初心者向けSass入門

/

Sass (Syntactically Awesome Stylesheets)

Sass(サース)と読むようです。
僕は今までは「エス・エー・エス・エス」と読んでました(間違いではないだろうけど)。

SassはRubyによって作られたCSSの機能を拡張してくれる言語でネストや変数などの便利な機能が使えるようになります。
Ruby on RailsなどのWebAppフレームワークなどでもプラグインのような形で簡単に利用出来るので人気のある拡張言語の一つです。

sass-lang.com

インストール

SassはRubyがあればRubyGemsから簡単にインストール出来ます。

$ gem install sass(Selective Steve)
sass --version
Sass 3.4.22

Rubyのインストール/Koltatt

sass&scss

実際にSassを使って行く前にSassにはsassとscssという2種類のシンタックスがある事を抑えておく必要があります。
sassとscssはそれぞれコードの書き方が異なり.sass.とscssという拡張子でファイル毎に区別されます。

sass

sassはセレクタに対してプロパテイと値をインデントによって一段下げる書き方になります、また「:」の後にはスペースが必要です。
sassの表記法だとscssに比べてシンプルな書き方になるため、見た目がスッキリしてキーボード入力の数を減らせるというメリットがあります。

h1
  font-size: 12px
  color: red

インデントによる構文という事で見た目はPythonに似ています。

scss

言語の名前自体がSassなのにややこしいですが、こちらが現在の主流の書き方になっています。

scssは通常のCSSと同様にセレクタに対してプロパテイをまとめて{}でくくり、各プロパテイと値の最後に「;」をつけます。またscssの場合には「:」の後にスペースは必要ありません。

ちなみにですがセレクタの最後のプロパテイの場合には末尾の「;」は無くともコンパイル可能なようです。しかし後々のエラーの元なので全てのプロパテイに「;」をつけておいたほうが無難でしょう。

h1 {
  font-size:12px;
  color:red;
}

scssのほうが主流である理由ですがやはり書き方がCSSと同じだという事が大きいようです。特にSassはCSSのコードを書いても問題なく動くのでscssの方式では全てのコードの書き方を統一出来るというメリットがあります。
sassのほうはより簡略化できるという利点がありますが、そもそもSassを使うことによって通常のCSSよりも手間が減っているのでバランスをとってscss表記を採用している場合が多いのだと思います。
僕も主流にならってscssを使っていますが、sassの見た目のシンプルな美しさも捨てがたいです。

またSassではsass-covertというコマンドでsassとscssを相互に変換することも出来るので、自分のコードを両方の書き方で比べてみて採用するほうを決める事も可能です。

使い方

Sassを使う際にHTMLはsassファイルをそのままでは読み込んでくれないのでsassファイルをコンパイルする必要があります。
コンパイルとは元々ソースコードをコンピューターが実行可能なオブジェクトコードに変換する事を意味しますが、Sassのコンパイルの場合はsassファイルをCSSファイルに変換します。

コンパイル

コンパイルは sass [option][input]:[output] で実行します。
例えばstyle.scssのあるディレクトリで

$ sass style.scss:style.css

と実行するとstyle.cssに変換されて出力されます。

watchオプション

また–watchオプションを付けて実行すると[input]に指定したファイルの変更が保存されるたびに[output]のファイルがコンパイルされるようになるので、scssファイルを書き換える度に一々コマンドを打つという手間が省けます。

$ sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
      write style.css
      write style.css.map

終了したい時にはCtrl-Cを押します。

sass-convert

sass-convertを利用するとsassとscssファイルを相互に変換出来ます。

sass-convert style.sass style.scss

逆も可能です

sass-convert style.scss style.sass

通常のcssファイルscss,sassファイルに変換する事も出来ます。

sass-convert style.css style.scss

一方でsass,scssファイルをcssファイルにコンバートする事は一応可能なのですが、正しいcssに変換してくれません。けれども、scssファイル→cssファイルの変換は元々通常のSassのコンパイルの挙動なので特にこれが問題になる事は無いでしょう。

ネスト

Sassではセレクタの継承をネストでまとめる事が出来ます。

/*コンパイル前*/
body {
  width: 1000px;
  .main_contents {
    width: 800px;
  }
  .side_bar {
    width: 200px;
  }
}

/*コンパイル後*/
body {
  width: 1000px; 
}
body .main_contents {
  width: 800px; 
}
body .side_bar {
  width: 200px; 
}

親セレクタ

またネスト内で&で親セレクタを参照して:hoverなどの擬似クラスを利用する事が出来ます。


/*コンパイル後*/
h1 {
  color: #ffebee;
  &:hover {
    color: #d32f2f;
  }
}

/*コンパイル後*/
h1 {
  color: #ffebee;
}
h1:hover {
    color: #d32f2f;
}

変数

変数を使うと、よく使う値を予め定義して名前をつけておく事が出来ます。
変数を使い方は$の後に変数名とプロパテイを定義します。

/* コンパイル前 */
$maincolor: #075543;
$wraper_width: 1000px;

h1 {
  color:  $maincolor;
}
.maincontents {
  width: $wraper_width;
}

/* コンパイル後 */
h1 {
  color: #075543; 
}
.maincontents {
  width:  1000px; 
}

変数で設定した値に演算を使う事も可能です。

/* コンパイル前 */
$wraper_width: 1000px;

.maincontents{
  width: $wraper_width * 2;
}

/* コンパイル後 */
.maincontents {
  width: 2000px; 
}

webサイトのデザインをするときにはまずメインカラーを決めて差し色を一つか二つ決めるという事も多いので、事前に変数でそれらのプロパティを定義しておくと統一感のあるコードが書けます。また解りやすい変数名をつけておけば、あとからソースコードを見た人の理解の助けにもなるでしょう。

Partial

Sassでは複数に分けたファイルをパージャルとして扱い、まとめて一つのファイルにコンパイルする事が出来ます。
パージャルの書き方はscssファイルの名前の前にアンダーバーをつけます。

h1 {
color: red;
}

パージャルを読み込むにはimportを宣言します。
書き方はパージャルを読み込みたいファイルで@import ‘パージャルの名前’;になります。
importの際にはアンダーバーと拡張子は必要ありませんが、scssの場合パージャル名をクォーテーションで囲う必要があります(個人的に結構忘れてエラーを出すポイントです…)。

@import ‘partial’;

h1 {
font-stize: 20px;
}

base.scssをコンパイルします。

h1 {
  font-size: 20px; 
}
h1 {
  color: 20px; 
}

importしたファイルでパージャルがきちんと読み込まれている事が確認出来ます。

パージャルによって上手くパーツ毎にファイルを分割できればコードの可読性が上がり編集や修正がしくなりますし、複数人がプロジェクトに参加する際に作業する人ごとにファイルを分けて進めるといった使い方も可能になります。

mixin

mixinは予め設定して置いたプロパティを、あとから指定して呼び出します。また変数を利用する事により呼び出す際にプロパティの値を指定することも可能です。

@mixinでmixinの名前を指定し後に括弧の中に$をつけて変数名の指定をします。

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

呼び出す時には@include mixin名(変数の値)で呼び出します。

.box { @include border-radius(10px); }

コンパイルすると変数の値に呼び出しの際に指定した値が書き込まれます。

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

あとがき

SassはCSSの機能を便利に拡張してくれます。便利過ぎて一度使うと普通のCSSには戻れない程です。
CSSも同時に使えて導入の敷居も低いですし、ネストを使うだけでもコードの可読性が上がって見やすくなると思います。