5 SassとRuby

最近よく聞くSass

これはCSSを使う上で面倒になりがちな部分を、プログラム的に置き換えて無駄を排除しようと考えられたプログラムです。Sass(サスと呼ばれている)は、「Syntactically Awesome StyleSheet」の略で、CSSとプログラムを合わせたスクリプト言語となっています。

Sass(サス、Syntactically Awesome Stylesheets)は、Hampton Catlinが設計しNathan Weizenbaumが開発したスタイルシート言語である。後にSassファイルに用いられる単純なスクリプト言語であるSassScript用の拡張が加えられた。
SassはCascading Style Sheets(CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScriptはスクリプト言語自体を示す。 「インデント構文」と呼ばれる既存の構文は、Hamlと同様にブロック (プログラミング)や改行コードを分離する際に字下げを活用している。 新規の構文である「SCSS」は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため中括弧を用いている。 インデント構文には.sassの、SCSSファイルには.scssの拡張子が付与される。
CSS3はグループルールを適用するセレクタ及び擬似セレクターの一群で構成されている。 SASSは伝統的なプログラミング言語、特にオブジェクト指向言語で利用可能ないくつかの仕組みを提供することでCSSを拡張しているが、CSS3には適用できない。 SassScriptの解釈時には、Sassファイルで定義された様々なセレクタとして、CSSルールのブロックが作成される。 SassインタプリタがSassScriptをCSSに変換する。.sassか.scssの保存時にSassがこれらを監視し、CSS出力変換を行っている。[CSS用の単純な糖衣構文でもある。
公式にRubyで実装されているオープンソースソフトウェアであるが、 PHPを含めた多言語の実装も存在しており、中にはlibSassと呼ばれるC言語用の高性能の実装や、JSassと呼ばれるJava用の実装がある。インデント構文はメタ言語であり、SCSSはネストされたメタ言語であるように、プログラム意味論上ではValidなCSSは、ValidなSCSSである。 Mozilla Firefoxの拡張機能であるFirebugとの統合に対応している。  wikipediaより引用

 

Sassは、今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成させるプログラムということになります。例えば「style.scss」のSassファイルを変換すると「style.css」が完成します。

なぜこのSassが話題になっているかというと、Sassを使うにはまずRubyというオープンソースの動的なプログラミング言語が必要なのですが、Mac OS XにはもともとRubyがインストールされているということなのです。Macユーザーからどんどん広がっていったという経緯が考えられます。FirefoxやFirebugとも統合しているということですから、かなりの広がりです。そのため、ProgateでもRubyを学べるプログラムがあるのかなと思いました。

SassについてはCSSコーディングで泣かないためのSassの基礎知識と10の利点 というサイトでわかりやすくまとめられています。他にもSassで調べるといろいろあると思います。

モバイルファースト(iPhoneの爆発的ヒット)が主流になり、WordpressがCMSの主流になってきて、シンプルが求められる時代だからこそ、共有できるシステムがどんどん増えているのだと思います。

Scroll Up