Sassの基本

Translation of Sass: Sass Basics

Sassを使えるようにするには、まずあなたのプロジェクトにSassをセットアップする必要があります。もし単にこの文書を読みに来ただけなら、そのまま読み進めてください。しかしながらまずSassをインストールすることを薦めます。インストール手順の解説を読めば、セットアップに必要なことは全て知ることができるでしょう。

• プリプロセス
• 変数
• ネスト
• パーシャル
• インポート
• ミックスイン
• 継承
• 演算子

プリプロセス

CSSはただそれだけで楽しいものです。しかし、スタイルシートは大きく、より複雑に、そしてメンテナンスしづらくなっていってしまいます。プリプロセッサーが改善するのはそういったところです。SassはまだCSSにない機能、例えば変数やネスト、ミックスイン、そして継承などの機能を使えるようにし、CSSを再び楽しい物にしてくれます。

Sassを使ってスタイルシートをいじくり回し終わったなら、そのあなたの書いたプリプロセスされたSassファイルは、ウェブサイトで使えるように普通のCSSファイルとして保存されます。

変数

スタイルシート全体で何回も使いたい情報を保存できる変数について考えてみてください。色やフォント・スタック他あらゆるCSSの値を再利用できるように保存できるのです。Sassでは$という記号を使って変数を作成できます。例えば:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sassで処理すると、定義した$font-stackと$primary-colorという変数を認識し、出力する普通のCSSでその変数の値で置き換えられます。ブランド・カラーを扱う場合や、ウェブサイト全体で一貫性を持たせたい場合にとても強力な味方になってくれます。

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

ネスト

HTMLを書いていると、それが明確にネストされていて、わかりやすく階層化されていることに気づくことでしょう。一方CSSは……というと……。SassではHTMLと同じようにセレクターをネストさせることができます。ウェブサイトのナビゲーションを例にしてみましょう:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

ulとli、そしてaというセレクターがnavというセレクターにネストされていますよね。こうやって読みやすいようにCSSを管理できるようになります。CSSを生成すると以下のような形になるでしょう:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

パーシャル

パーシャル(訳注: いわゆるライブラリなどと呼ばれるものと同じようなものです)という、CSSの小さなスニペットを、他のSassファイルから読み込めるように作成することが出来ます。CSSをモジュール化し、メンテナンスしやすいようにするにはとても良いでしょう。パーシャルはSassファイルにアンダースコア(_)で始まるファイル名を付けるだけです。例えば_partial.scssなどです。アンダースコアを付けることによってSassにパーシャルのファイルであることを教え、生成するCSSに含めるようにすることができるわけです。Sassのパーシャルは@importディレクティブで読み込みます。

インポート

CSSにはインポート機能があり、CSSを小さくよりメンテナンスしやすい単位に分割することが可能になっています。しかしこの機能には@importが使われる度にHTTPリクエストが発生するという欠点があります。Sassでは@importをCSSのそれの上位互換として実装していますが、余計なHTTPリクエストが発生しないようにインポートしようとしているファイルを連結して取り込み、ブラウザーにはたったひとつのCSSファイルを提供するという形になっています。

例えば_resrt.scssとbase.scssという2つのSassファイルがあるとしましょう。そして_reset.scssをbase.scssへインポートしたいします。

/* _reset.scss */

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

/* base.scss */

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

ここで@import 'reset';とbase.scssに書いているのに気づいたでしょうか。Sassは賢いのでインポートする場合にファイルの拡張子である.scssは必要ありません。適切に解釈します。生成したCSSは以下のようになるでしょう:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

ミックスイン

CSSでは書くのが面倒だったりすること、特にCSS3においていくつものベンダー拡張プリフィックスが必要であったりする場合があります。ミックスインによってCSSの定義をグルーピングし、ウェブサイト全体で再利用できるようになります。ミックスインには引数を与えることもできるので、柔軟なものを作ることができるでしょう。ミックスインの利用例としてはベンダー拡張プリフィックスの追加が挙げられます。border-radiusを例にしてみましょう。

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

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

ミックスインの作成には@mixinディレクティブを使い、名前を付けます。ここではborder-radiusとしました。カッコ内で$radiusという変数を使っていますが、これによりどんな丸まり度をも引数として与えることが可能になります。ミックスインを作成した後、@includeでミックスインの名前を指定して使うことになります。生成されるCSSは以下のようになるでしょう:

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

継承

継承はSassの最も便利な機能のひとつです。@extendを使うことにより、CSSプロパティーをあるセレクターと他のセレクターで共有することが可能になります。SassをDRY(訳注: Don't Repeat Yourself)に保つために非常に助けになるでしょう。以下の例ではエラーと警告、そして成功のメッセージのための一連のスタイルを作ってみます:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

上記コードがやろうとしていることは.messageで定義されたのCSSプロパティーを.successや.error、そして.warningにも適用しようというものです。生成されたCSSでは魔法のようにうまくいくので、HTML側でいくつものクラス名を指定する必要はなくなります。例えばこのように:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

演算子

計算をCSSの中で行えるととても便利なことでしょう。Sassでは標準的な演算子、+や-、*、/、そして%を利用することが出来ます。以下の例ではasideとarticleの幅を計算で指定してみたいと思います。

.container { width: 100%; }

    article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

これは960pxベースの簡単なパーセント・グリッドを作成しています。こういう計算により、ごく簡単にピクセル単位をパーセントに変換することもできるでしょう。生成されたCSSは以下のようなものになります:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}