F@N Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・nex8・viidleのエンジニア・技術ブログ

【入門編】Sassをためしてみた

はじめましてnagamuraです。 今回はSass入門部分を触れてみました。

本家サイトはここ http://sass-lang.com

Sassとは

Syntactically Awesome Style Sheets の略語であり 平たくいえばCSSを効率良く書くCSSの拡張言語になります。

Sassのインストール

Sassのインストールにはgemを使うのでrubyがインストールされているのが前提になります。 今回はrubyがインストールされているのを前提に進めます。

[shell] $ gem install sass [/shell] もしくは [shell] $ sudo gem install sass [/shell] でインストールできます。

確認のため [shell] $ sass -v [/shell] を実行します [shell] Sass 3.2.12 (Media Mark) [/shell] インストールに成功していると上記のような戻り値が返ってくると思います。

サンプルコードを試してみる

本家に載っていたサンプルコードを試してみました。 http://sass-lang.com/guide サンプルコードを一部抜粋

変数の使用

下記のSassを記述します。 [css] / フォントの種類 / $font-stack: Helvetica, sans-serif;

/ 初期のbodyの色 / $primary-color: #333;

body { font: 100% $font-stack; color: $primary-color; } [/css] 上記コードにSassコマンドを実行すると下記の様なcssが生成されます。 [css] body { font: 100% Helvetica, sans-serif; color: #333; } [/css]

Sassだと変数が使用可能なので [css] $font-stack: Helvetica, sans-serif; $primary-color: #333; [/css] このように変数にフォントの種類や、背景色などに使う色の情報なども 変数にいれて使用することができるのでウェブページ内の複数箇所で使用されていたフォントや色などの変更も変数の値を修正するだけで済みます。

ネスト

下記のSassを記述します。 [css] nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } [/css]

上記コードにSassコマンドを実行すると下記の用な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を使うと子セレクタを親セレクタにネストすることができるので 通常は下記のように何度も同じセレクタを書くことを回避することができます。 nav ul {...} nav li {...} nav a {...}

scssファイルからcssファイルの生成

先ずはファイルを.scss拡張子で作成します。 作成した.scssファイルに対してsassコマンドを実行します。 コマンドの実行方法は下のようになります。 [shell] $ cd ~/foo/bar/scss #.scssファイルがあるディレクトリへ移動 $ sass foo.scss:foo.css #sassコマンドを実行 [/shell]

毎回修正する度に、sassコマンドを実行するのが手間だと感じますが watchオプションを使用すると自動で反映してくれます。

sass コマンドをwatchオプション付けて実行

[shell] sass --watch foo.scss:foo.css >>> Sass is watching for changes. Press Ctrl-C to stop. Missing dependency 'rb-fsevent' (version '~> 0.9')! Please run the following to satisfy the dependency: gem install --version '~> 0.9' rb-fsevent

For a better performance, it's recommended that you satisfy the missing dependency. Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback. [/shell]

.scssファイルに修正が加えられると下記のような出力がされます。 [shell] >>> Change detected to: /path/to/your/scss/foo.scss overwrite foo.css [/shell]

便利だなと感じた所

他にも色々な機能やメリットがありますが、所感としてはこういった感じでしょうか。

  • 変数が使える
  • セレクタを親セレクタにネストされることができる
  • --watch オプションを使用すれば自動で修正を反映してくれる
  • メンテナンス性

更にはSassを効率よくコーディングするためのフレームワークcompass」というのもあるそうです。 http://compass-style.org/ 次回あたりに触れてみようと思います。