ちゃっかりデザインを変更しました。
デザイン以外にも、メインエリアの横幅が変わったりしてます。
かなり突貫工事なので、色々アレな部分があるかと思いますが、、、
さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。
変数と演算のおさらい
軽くおさらいです。
次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。
Sass
$yokohaba: 600px;
#main {
width: $yokohaba;
padding: 10px - 5;
}
これを、CSSに変換すると下記のようになります。
CSS
#main {
width: 600px;
padding: 5px;
}
変数を使うことで、同じ値を一ヶ所にまとめて定義出来たりするので、再利用しやすいとか色々メリットが有りますね。
演算も計算が苦手なボクなんかにはとても助かります。
なお、変数はSCSSファイル内で呼び出したい部分より先に書く必要があります。そうしないと「そんな変数ねーよ！」的なエラーが出ちゃいます。
なので、変数を別のSCSSファイルでまとめてる場合も、変数が定義されてるファイルから @import する必要があります。
変数に対して演算を使ってみる
Sassはそれぞれの機能を基本的には組み合わせて利用できるので、変数に対して演算を使うことも出来ます。
Sass
$base_width: 650px;
#contents {
width: $base_width - 20;
padding: 10px;
}
変数 $base_width から #contents では widthの値を 20px 引いています。
これをCSSに変換すると次のようになります。
CSS
#contents {
width: 630px;
padding: 10px;
}
こんな風に計算してくれますが、これだとpaddingの値が変わったら2箇所直さないと行けないので、もうチョット変数と演算を組み合わせて使うと、次のようにすることも出来ます。
Sass
$base_width: 650px;
#contents {
$pd: 10px;
width: $base_width - ($pd * 2);
padding: $pd;
}
CSSに変換した際の結果は先の例と同じになりますが、paddingの値が変わった場合に $pd で定義した値を変更すればOKになります。
この際に、規則集合内に宣言のように変数を定義（例だと $pd ）すると、その宣言ブロックにだけ適用されるので、同じ変数名が別の規則集合にあっても大丈夫です。
逆を言えば、別の規則集合で使おうとすると「そんな変数ねーよ！」的なエラーが出るって事です。
演算は色指定とかでも使えます
演算は、10進数以外にも使えるので、色の指定でも使えます。
Sass
$color: #111;
.sample {
color: #333 + #666;
color: $color + #9926a5;
color: #e73562 / 3;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
これを、CSSに変換すると次のように。
CSS
.sample {
color: #999999;
color: #aa37b6;
color: #4d1120;
color: rgba(255, 255, 0, 0.75);
}
こんな風に使えますが、人が直感的にどんな色になるかが分かりにくいので、コレをどうやって有効に使うかはボクにはイマイチ見えてません...
この辺り突っ込んで色々やってみたい場合、Sassには予め関数が組み込まれているのでその辺りを見てもらえれば良いかと。
背景画像のパスとかを定義する
変数は任意の文字列を定義して自由に使えますが、画像のパス等に使いたい場合、普通に使うとエラーになってしまいます。
Sass（エラー）
$img_path: "../common/images/hogehoge/";
.sample {
background: url($img_pathmark.gif) no-repeat;
}
コレでは当然といえば当然ですが、変数名とファイル名の区別が付かず、エラーになってしうので、そんな場合は次のようにすればOKです。
Sass
$img_path: "../common/images/hogehoge/";
.sample {
background: url(#{$img_path}mark.gif) no-repeat;
}
変数名を #{ と } で囲う感じですね。
これをCSSに変換すれば次のようにしてくれます。
CSS
.sample {
background: url(../common/images/hogehoge/mark.gif) no-repeat;
}
これで、指定するパスが長い場合とか、違うプロジェクトでも使いまわしたり後から画像のディレクトリが変わってしまう場合などに有効に使っていけるかなーと。
Sassは初期のコーディング時の効率化も有りますが、運営・保守など、メンテナンス性の部分でも力を発揮するので、単純にスピードが上がると言うより長いスパンで見て効率が良くなると言う感じでしょうか。
それ故に、納品後もSassで運営できると嬉しいって言う部分が有るわけですけど。