【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サイトやデザイン制作において、ベクター素材は加工もし易くロゴやアイコンいろんな場面で活躍します。そんなベクター素材が無料でダウンロードできるサイトをまとめてみました。 Vector Stock ユーザー登録が必要ですが、有料から無料のロイヤリティーフリーの素材が...続きを読む

2015.02.14インスピレーション

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB

【フォント】サインに最適なフリーのシンボンルフォント

WEBサイトや印刷物のデザインにおいて、メニューやボタン、マップ上のシンボルなどに利用者にわかりやすく内容を伝えるためアイコンを用いることがあります。 ビジュアルで内容を伝えることができるシンボルタイプのフリーフォントをまとめてみました。 Heydings Com...続きを読む

2015.02.14フォント

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の...続きを読む

2018.01.04

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室