【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

CSSコーディング

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することができますが、Sass・SCSSを使うことでWEBサイトの制作を効率化することができます。今回は、Sass・SCSSとは何か?を簡単にご紹介します。

Sassとは?

Sass(サース、サス:Syntactically Awesome Stylesheets)は、CSSを効率よくまとめ、開発効率を良くしようと開発されたスクリプト言語の一つです。拡張子は.sassという形で管理ができます。

WEBサイトを構築するとCSSは、何千行ものコードによって記述されることがあります。規模の大きなWEBサイトになるとさらに膨大なコードの記述になり、開発時間がかかったり、記述ミスや、見落としが出ているリスクが高まります。

そこでSassでは、記述するコードの簡略化、CSSだけでは記述できなかった変数の利用、プログラミングなどで使われるループ、引数、複数のファイルを統合するといった管理方法で効率化しています。

SCSSとは?

SCSSは、Sassで構文をよりCSSの構文に近づけたブロックの書式を用いたものです。拡張子は.scssという形で管理ができます。

Sass・SCSSをWEBサイトに組み込む方法

Sass・SCSSをWEBサイトへ組み込む場合、そのままではCSSとして認識できないためCSSに変換するか、変換するためのスクリプトと一緒に読み込み利用することができます。Sass・SCSSを変換する(コンパイル)の方法としては、コマンドや専用のソフトを使う方法があります。

WEBのコーディングで使われるAdobeのDreamweaverでもSass・SCSSを変換(コンパイル)してCSSにすることができます。

関連記事

【デザイン】ポップでグラフィカルなシングルページデザインのWEBサイトまとめ

WEBサイトのコンテンツ(内容)を1ページに収めて掲載をするシングルページデザイン。コンテンツが多い分、ページは縦に長くなってしまいますが、その長さを生かしてデザインされたポップでグラフィカルなWEBサイトをまとめてみました。 Chilicongraphic デザイン...続きを読む

2015.02.15インスピレーション

ウェブサイトの制作を頼むときに知っておきたい専門用語

お店や会社のホームページを持ちたいと思うとき、制作できる方や制作会社を探しますが、説明される内容や掲載されている内容に専門用語が多く、難しいと思う方もいらっしゃると思います。今回は、ホームページの制作でよく出てくる専門用語を解説したいと思います。 ウェブサイトの制作は実際の...続きを読む

2018.02.09WEBサイト制作レンタルサーバ

【デザイン】フード&ドリンクのメニューデザインまとめ

先日、レストランの店舗様のWEBサイトやメニュー表、名刺などのデザインワークスを手掛けさせていただくことになりました。 今日は、フードやドリンクのメニューデザインで参考になったデザインワークスのまとめです。 Discover YOUR WAY Cafe - Patra...続きを読む

2015.02.15インスピレーション

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08HTMLコーディング

2015年のウェブサイトのデザイントレンド

2015年も4月新年度を迎えますね。年度の切り替わるこの時期はウェブサイトのリニューアルも多いと思います。今回は、2015年の注目されるウェブサイトのデザイントレンドをご紹介します。 Startup Framework 「Startup」タイプのウェブサイトは1ページ...続きを読む

2015.03.26WEB