スイッチ | ブログ・サイト運営を応援するWebマガジン

CSSがもっと便利になる!SCSS(SASS)とは?


SCSS(SASS)を使うと、CSSの記述や管理がし易くなります。CSSにはない機能も備わっているので、WebデザイナーやWeb制作者におすすめです。
本記事では、SCSSの基本的な知識について解説しています。気になった方はぜひ利用してみてください。

SCSS(SASS)とは?

CSSがもっと便利になるメタ言語のこと

Webデザインの現場では、日常的にCSSを使っているかと思います。SCSS(SASS)とは、CSSを拡張したプログラミング言語のこと。Web業界の方におすすめの、便利なツールです。

SCSS(SASS)は専用の文法を習得する必要がありますが、CSSが使える方にとっては学習コストは比較的低いです。

SCSSとSASSの違い

よくSCSSとSASSを混同している方が多いので、ここでは簡単にその違いについて解説しておきましょう。

SASSとは、CSSを拡張したメタ言語(プリプロセッサ)のこと。Syntactically Awesome Style Sheetsを略して、SASSと呼ばれています。ファイルの拡張子は、.sassです。

一方でSCSSとは、SASSをもう少し書きやすくしたものです。Sassy CSS(SASSに似たCSS)という名前からわかるように、CSSを書くのと似た感覚でSASSが使えるのです。SCSSのファイルは、.scssの拡張子が使われます。

どちらとも便利でよく使われるのですが、SCSSの方が普及しています。以降の記事では、SCSSに話題を絞って進めていきます。

メリット

SCSSを導入した時に得られるメリットです。

CSSコードが減る

SCSSを導入すると、CSSのコード量が減ります。CSSでは冗長だったコードが減らせますし、効率的にコードを作っていくことができます。

コードの保守管理がし易い

SCSSはネスト(入れ子)を使ってコードを書くことができます。コード量も減りますし、視認性も高まります。コードの保守管理が格段にし易くなるでしょう。

バグが減らせる

SCSSを導入すると、バグ(不具合)を減らすことが期待できます。コード量が減ることで、人為的なミスが減ることが主な理由です。

CSSにはない機能が使える

SCSSでは、変数やMixinなど、CSSをもっと便利に使える機能が備わっています。

出力方式が選べる

SCSSは、.scssファイルをコンパイルして.cssファイルを作ります。出力するCSSは、nestedやexpanded、compact、compressedなどの形式から選ぶことができます。

デメリット

SCSSの導入にはデメリットもあります。代表的なものは以下の2つです。

学習コストが必要

SCSSはCSSに似た言語だと述べましたが、とは言っても習得するにはある程度の期間が必要です。SCSSを使う時は、その学習コストについても考えておくようにしましょう。

CSSの修正箇所がわかりづらい

SCSSを使っている場合、CSSを修正するときはその元ファイルであるSCSSを直します。出力されたCSSはコンパイル後のため、コンパイル前のSCSSを修正しなければいけないのです。

しかし、CSSスタイルから該当するSCSSのコードを探すのは面倒です。そのため、場合によってはCSSの修正がしづらくなってしまいます。

あとがき

SCSSを使う場合は、Compassを併用することを強くおすすめします。SCSSを使ったプロジェクトが管理しやすくなりますし、watch機能(自動コンパイル)も使えます。その他にもSCSS専用のGUIツールなどもあります。必要に応じて活用していってください。


Sponsored Links

こちらの記事もおすすめです!

シェア頂けると励みになります!

ブログ更新情報はこちらから発信しています。

【完全保存版】ショッピングカートASP徹底比較2018

著者情報

荒木 厚(株式会社コクリ 代表)

デザイン会社、WEB運営会社を経て、「株式会社コクリ」を設立。 Wordpressを使ったWebサイトやネットショップの企画・制作、SEO・リスティング広告を使った集客支援をしています。