こちらも以前からずっと気になっていたのでした。CSS書くのが面倒なのでウェブ側の勉強に手が出せなかったってのもあります。ちょっと規模が大きくなってくるとCSSがカオスになってきて、最初から作り直してたけど、もういいや！ってなってました。わかりやすく効率的にCSSが書きたかった。そして、それならSass/SCSSがいいって見知ってた。
今回もドットインストールを利用しました。興味のある言語（？）の概要をさらっと知るには本当に適してると感じてます。
他のプログラミング言語を経験しているとSassはちょっと勉強するだけですぐに使えるようになって効率上がるんじゃないかなと思いました。
良い点（簡単に）
入れ子構造がわかりやすい&変数が使える
$baseFontSize: 14px;
$imgDir: "../img/";
#main {
width: 90%;
background: url("#{$imgDir}bg.png");
p {
font-size: $baseFontSize;
.sub {
font-size: $baseFontSize - 2px;
}
}
}
関数も使える
$totalWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count) {
$padding: 10px;
$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
@debug $columnWidth;
@return $columnWidth;
}
.grid {
float: left;
width: getColumnWidth($totalWidth, $columnCount);
}
ファイルを分割して使える
@import "settings";
@import "functions";
.grid {
float: left;
width: getColumnWidth($totalWidth, $columnCount);
}
継承が使える
.msg {
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
color: white;
}
.errorMsg {
@extend .msg;
background: red;
}
.warningMsg {
@extend .msg;
background: orange;
}
もっと色々出来るんでしょうけれど、これだけ知ればもうCSSがだいぶすっきりすることになりそうです。
リアルタイムにCSS変換
ただ、Sassは利用前にCSSに変換する必要があります。CSSへの変換は
sass scss:css
このような形で、入力元の.scssディレクトリとと出力先の.cssディレクトリを指定すればできるのですが、.scssファイルの変更をリアルタイムで.cssに変換してくれるコマンドがあります。
sass --watch scss:css
リアルタイムでcssが変更されていきます。便利ですね。ちなみに、--style expandedというオプションをつけると、出力されるcssの並びが一般的なcssファイルっぽくなります。
その他CSSについて
Normalize.cssというのを利用すると、デフォルトでブラウザごとに設定されているcssを一旦リセットされるのかな。使ったほうが良いっぽい。
