初めてのSass
今回は、Sassを見ていこうと思います。
CSSはプログラミング言語じゃないので、色々不便なところがありますよね。
DRYを守るのはほぼ不可能なレベル。
そこでSassですよ！ってな感じらしい。
中身を早く見たいのは山々ですが、先にCSSにコンパイルするやり方を確認しましょう。
Sassのままじゃ動かないので、動作確認もできませんし。
こんな感じでやるみたい。
$ sass Sassファイル 吐き出すCSSのファイル名
これでSassファイルから指定した名前のCSSを吐くようです。試しに、
$ touch test.scss
と入力して空っぽのScssファイルを作成し、
$ sass test.scss test.css
とやると、空っぽのtest.cssができました。
これで、安心してSassを書けますね。
それでは、ここにある、Sassの基本を見て行きましょう。
このページにある内容で、書くのに関係ありそうなのは、
・変数 ・ネスト ・パーシャル ・インポート ・ミックスイン ・継承 ・演算子
ってとこでしょうか。一つずつ見て行きましょう。
変数
CSSで変数を使えるとか半端ないっす。超ありがてぇっす。
変数は頭に"$"をつけて定義するようです。
$base-color: #192bc1; header { background-color: $base-color; } footer { background-color: $base-color; }
カンマで書けっていうツッコミはごもっともです。
ネスト
ネストは地味にありがたいです。可読性が上がりますね。
header { background-color: darkblue; p { color: snow; } a { color: red; } }
CSSでネストできなくて絶望していた頃が懐かしい。
パーシャルとインポート
_で始まるファイル名のSassファイルをインポートして、コンパイル時に合体してくれるようです。管理が簡単になりますな。
書き方は、@import '_を抜いたファイル名'でいくようです。
たとえば、modalのCSSだけを分けて書くと仮定すると、
_modal.scssとmain.scssを用意して、
modalの分だけ_modal.scssに書きます。
.modal { .modal-content { color: red; } .modal-body { color: black; } }
で、他のスタイルをmain.scssに書きつつ、インポートします。
@import 'modal'; header { color: red; }
ミックスイン
ミックスインって何のことかと思ったら、関数じゃないですか！
何これ超すごい。
@mixinで定義して、@includeで呼び出すみたいです。
@mixin emphasize-text() { font-weight: bold; font-style: italic; } p { color: blue; &:hover { @include emphasize-text(); } }
&はネストされている親セレクタ、ここではpです。
見た目でわかると思いますが、引数行けます。
@mixin set-blue-border($width) { border: $width solid blue; } p { @include set-blue-border(2px); }
これは激アツですね。
継承
@extendで同じスタイルが当たるみたいです。これは…どうだろう。
h1 { color: white; background-color: maroon; } h2 { @extend h1 }
クラスとidをうまく振れば使わなくていい気がしています。
使いこなせれば便利になるのかなぁ。
演算子
SCSSは計算までできるとは…激萌えですな…
条件分岐ができれば完璧でしたな…
$h1-size: 10px h1 { font-size: $h1-size; } p { font-size: $h1-size / 2px; }
数値を計算できるのは、かなり可読性が上がると思います。
何に対するどんな数値なのかがわかるのは大きいです。
とりあえず、すぐに使えそうなのはこんな感じでしょうか。
それでは、CSSとSCSSでスタイルを当てて、比較してみましょう。
こんなのを作ります。ヘッダーとタイトルだけです。これ以上書くと、読んでられない文量に…
ロゴはArt Text 2 Liteでサクッと作りました。ファイル名はsass.pngです。
まずはhtmlを用意します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Scssのテスト</title> <link rel="stylesheet" href="test.css"> </head> <body> <header> <p>ヘッダー</p> </header> <h1>初めてのSass</h1> </body> </html>
それでは、スタイルを当てます。まずはCSSから。
この例では、簡単すぎてDRYは守れてますが、ちょっと色を変えてみたり、後からいじるのはめんどくさくなっています。
ファイル名はtest.cssです。
/* ページ全体の背景色をsnowにする */ body { background-color: snow; } /* ヘッダーを細いバーにして、スクロール時についてくるようにする */ header { background-color: darkblue; position: fixed; top: 0; left: 0; height: auto; width: 100%; color: snow; } header p { margin: 0; } /* h1の前にロゴを置いて、位置を変更 */ h1 { color: maroon; font-family: fantasy; margin: 1.5em; } h1:before { content: url("sass.png"); }
次に、Scssを書きます。
CSSと比べて、後からいじるのがかなり楽です。
色や大きさを変えるだけなら、変数の値を変えるだけでできます。
ScssのメンテナブルっぷりはCSSとは比較になっていませんね。
// 変数 // ページ全体 $page-background-color: snow; // ヘッダー $header-background-color: darkblue; $header-color: snow; // h1 $h1-color: maroon; $h1-font: fantasy; $h1-margin: 1.5em; $h1-font-size: 2.25em; $logo-img: "sass.png"; // ミックスイン // ヘッダーをバーにする。 @mixin make-header-bar($background-color, $color) { background-color: $background-color; position: fixed; top: 0; left: 0; width: 100%; height: auto; color: $color; * { margin-top: 0; margin-bottom: 0; } } // ロゴを置く。 @mixin put-logo($img) { &:before { content: url($img); } } // スタイルを当てる // ページ全体の背景色をセット body { background-color: $page-background-color; } // ヘッダーをバーにする header { @include make-header-bar($header-background-color, $header-color); } // h1にロゴを置いて、位置を変更 h1 { @include put-logo($logo-img); margin: $h1-margin; font-family: $h1-font; font-size: $h1-font-size; color: $h1-color; }
書けたら、コンパイルします。
$ sass test.scss test.css
いかがだったでしょうか。
個人的には、今後CSSを書く気が失せるほど、Scssの方が優れていると感じました。
Railsが生成するScssファイルにCSSをそのまま書くのはもったいないですね。
