LogoMark.png

Sass(SCSS)

Sass(SCSS)


Sass(Syntactically Awesome Stylesheets)は、2006年ハンプトン・キャトリンが設計、ネイサン・バイゼンバウムが開発したスタイルシート記法のことで、ファイルの拡張子は .sass。また SCSS(Sassy CSS)は、CSS3の記述と高い互換性があるスタイルシート記法で、拡張子は .scss。いずれも従来のCSSにプログラミング的要素を加えた記法で、CSSコーディングの作業効率を上げる技術です。SassとSCSSの2つの記法があり、どちらを選ぶかについては、動向の見極めが必要です。

style.scss > コンパイル(要Ruby等) > style.css 

という作業の流れでCSSを生成します。


この記事は、Sass(SCSS)導入の概要のみを記述しています。CSSそのものを十分理解している必要があり、あくまで「作業の効率化」が重要課題であるという現場において重要な技術・・といえます。

導入の前提

Sass(SCSS)はプログラミングの要素を持った言語で、書いたものは、そのままではブラウザが理解しません。最終的にCSSファイルを得るために、Ruby、Koalaなどをインストールをして、開発環境を構築する必要があります。

参考:でも、以下のような方法で試すことも可能です
http://websae.net/sass-meister-20140708/

Ruby

Sassを使えるようにするために、Rubyが必要です。新しいMacOSの場合は標準で搭載されているので、ターミナルから以下の入力で確認してみてください。

$ ruby -v


Koala

ターミナルからコンパイルすることもできますが、KoalaというGUI開発環境をインストールすると作業が楽になります。

補足

記述の利点

セレクタのネストができる

変数が使える

その他

など、要するにこれは、CSSを能率的に生成するためのプログラミング言語です。本格的な利用にはそれなりの学習コストがかかるとお考えください。
ここでは、Sass(SCSS)の概要のみしか書いていませんので、具体的な事例等については、以下のようなキーワードで検索してください。

PAGES

GUIDE

TOOL

DATA

Last-modified: 2019-10-06 (日) 13:54:57