Sass - チュートリアル

この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。

Translation of: Sass - Tutorial

Ruby と Sass のインストール

まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。

Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います:

gem install sass

最初の Sass スタイルシート

非常にシンプルな SCSS ファイルの作成から始めてみましょう。SCSS は CSS3 を拡張したものなので、まずは簡単な CSS から始めます。テキスト・エディタで style.scss という名前で新しくファイルを作成し、以下のコードを入力します:

/* style.scss */
      #navbar {
        width: 80%;
        height: 23px;
    }

この Sass ファイルを CSS ファイルに変更するには、以下のコマンドを実行します:

sass --watch style.scss:style.css

これで style.scss に何かしら変更を加えると、Sass がその変更を反映するように自動的に style.css を更新します。後々複数の Sass ファイルを扱うようになった場合は、以下のようにしてディレクトリ全体を監視するようにすることもできます:

sass --watch stylesheets/sass:stylesheets/compiled

特徴

素晴らしいことにあらゆる CSS ファイルは妥当な SCSS ファイルなので、SCSS について学ぶことは多くありません。CSS よりも何が出来るのかを学ぶことになるでしょう。SCSS は最新の CSS の機能を全て提供します。このチュートリアルでは、style.scss に追加して簡単に試せるようなサンプルで最も基本的なことを練習します。

ネスト

CSS を書いていると多くのセレクタがほとんと同じもので始まることがよくあります。例えば “#navbar ul” や “#navbar li”、“#navbar li a”などです。何度も何度も同じもので始めるというのは、特にそれが長い時には、苦痛でしかありません。

Sass では子セレクタを親セレクタにネストすることによってそれを回避することができます:

/* style.scss */

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}
/* style.css */

#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }

出力された CSS が SCSS でのセレクタのネストを反映するように整形されていることに注目してください。これがデフォルトの CSS の出力スタイルですが、様々な CSS 整形に適した他のスタイルもあります。限界まで CSS の圧縮の行うものすらあります！

また、プロパティをネストすることもでき、“border-left-” などといったものをなんども繰り返す必要はありません:

/* style.scss */

.fakeshadow {
  border: {
    style: solid;

    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}
/* style.css */

.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; }

親の参照

:hover といった擬似クラスではどうでしょうか？　親セレクタと擬似クラスの間に半角スペースはありませんが、これもネストすることができます。Sass の特殊文字 & を使う必要があるだけです。セレクタ内では & は親セレクタに置換されます:

/* style.scss */

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}
/* style.css */

a {
  color: #ce4dd6; }
  a:hover {
    color: #ffb3ff; }
  a:visited {
    color: #c458cb; }

変数

Sass では変数を定義することができ、それはスタイルシート全体で利用することができます。変数は $ で始まり、プロパティと同じようにして定義します。CSS プロパティの値として許可されているもの、色や数値(マイナス付きも)・文字列ならどんな値もとることができます:

/* style.scss */

#navbar {
  $navbar-width: 800px;
  $items: 5;
  $navbar-color: #ce4dd6;

  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;

  li {
    float: left;
    width: $navbar-width/$items - 10px;

    background-color:
      lighten($navbar-color, 20%);
    &:hover {
      background-color:
        lighten($navbar-color, 10%);
    }
  }
}
/* style.css */

#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid; }

a {
  color: #ce4dd6; }
  a:hover {
    border-bottom: solid 1px; }

変数によって色やサイズ、その他の値を繰り返すことなく再利用することが出来ます。つまり、少しの変更、色合いやサイズの微調整なら、スタイルシート全体を編集することなくたった一ヶ所の変更によって完了するのです。

式と関数

変数をそのまま定義された通り使うことに加え、計算式や定義済みの関数でそれらを変更したり、組み合わせたりすることもできます。これにより要素のサイズや色合いを動的に決定できるようになっています。

一般的な計算式の記号(+ や -・*・/・%) では単位付きも含めて数字を処理できます。色には明るさや色調、彩度、その他の便利な関数が用意されています:

/* style.scss */

#navbar {
  $navbar-width: 800px;
  $items: 5;
  $navbar-color: #ce4dd6;

  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;

  li {
    float: left;
    width: $navbar-width/$items - 10px;

    background-color:
      lighten($navbar-color, 20%);
    &:hover {
      background-color:
        lighten($navbar-color, 10%);
    }
  }
}
/* style.css */

#navbar {
  width: 800px;
  border-bottom: 2px solid #ce4dd6; }
  #navbar li {
    float: left;
    width: 150px;
    background-color: #e5a0e9; }
    #navbar li:hover {
      background-color: #d976e0; }

インターポレーション

変数はプロパティの値に使えるだけではありません。#{} で括ることによってプロパティ名やセレクタに使うこともできます:

/* style.scss */

$side: top;
$radius: 10px;

.rounded- {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
/* style.css */

.rounded-top {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

ミックスイン

ミックスインは Sass 最も強力な特徴の一つです。スタイル – 複数のプロパティやセレクタすら – の再利用をコピー・アンド・ペーストなしでセマンティクスの欠片も感じられないクラス名に格納することなく行うことが出来るようになります。

“@mixin” というディレクティブでスタイルのブロックを括ることによってミックスインは定義され、セレクタ内で “@include” ディレクティブによって参照されます:

/* style.scss */

@mixin rounded-top {
  $side: top;
  $radius: 10px;

  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded-top; }
#footer { @include rounded-top; }
/* style.css */

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

引数

ミックスインの真価は引数を渡すことによって発揮されます。引数は括弧で括られたカンマ区切りの変数のリストで定義されます。これらの値はそれぞれミックスインから使われる度に新たに割り当てられます。

ミックスインの引数では通常使われる値としてデフォルトの値を定義できます。ミックスインを使う時に引数を渡さなければデフォルトの値が割り当てられるでしょう:

/* style.scss */

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
/* style.css */

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 5px;
  -moz-border-radius-top: 5px;
  -webkit-border-top-radius: 5px; }

#sidebar {
  border-left-radius: 8px;
  -moz-border-radius-left: 8px;
  -webkit-border-left-radius: 8px; }

@import

スタイルシートは時に巨大になることがあります。CSS には @import ディレクティブがあり、これにより複数のスタイルシートに分割することができますが、それぞれのスタイルシートは別々の HTTP リクエストで(遅れて)処理されます。これが Sass が @import ディレクティブでスタイルシートの中身を統合する理由です。それだけでなく、@import で指定されたファイルで定義された変数やミックスインもインポートした側で利用することができます。

Sass はインポートするためのファイル(“端切れ”と呼ぶことにします)がアンダースコアで始まる場合、名前の変換を行います。rounded というミックスインを含んだ端切れを _rounded.scss という名前で作ってみましょう。

.scss ファイルと .sass ファイルの両方をサポートするため、Sass ではファイルの拡張子なしでインポートすることができます。つまり、"rounded.scss" ではなく "rounded" をインポートすれば良いのです:

/* _rounded.scss */

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
/* style.css */

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 5px;
  -moz-border-radius-top: 5px;
  -webkit-border-top-radius: 5px; }

#sidebar {
  border-left-radius: 8px;
  -moz-border-radius-left: 8px;
  -webkit-border-left-radius: 8px; }
/* style.scss */

@import "rounded";

#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

その他参照すべきもの

Sass を使うにはこれで十分でしょうが、他にも読んでおいたほうが良い物がいくつかあります: 実行時に指定できる全てのオプションや Rails/Rack プラグインとして使う方法など、Sass が出来ることの全てが書いてある Sass のリファレンスを参照してみましょう。

Sass について何か助けが必要な時などは、irc.freenode.net にある #sass (そこに誰もいなかった場合は #haml) に参加してみてください。質問は Haml/Sass のメーリング・リストでも大丈夫です。

Haml © 2006-2010 Hampton Catlin, Nathan Weizenbaum, Chris Eppstein, and numerous contributors. It is available for use and modification under the MIT license.