以前入っていた案件で知り合ったデザイナーさんと勉強会をしているのですが、今回はSassを使ってみようって事でSassについて調べました。
まずは、環境構築。
とりあえず、Sassを使うにはRubyが必要らしい。
しかーし、どうやらRuby2.0.0 compassが相性が悪いらしい。
自分の環境↓
$ruby -v
$ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]
こりゃダメかもしれない。。。
とりあえずRubyのあぷで。
しようとしたらしばらくアップデートしていなかったコマンドラインツールのアップデートをしろと怒られたのでそっちからアップデート。
ふぅ、ひどい目にあったぜ。
こういうのはこまめに整備しておかないとダメですね。
とりあえずRubyのバージョンアップには成功。
こちらの記事を参考にしました。
Mac で Ruby のバージョンをアップデート | gworks web site
Sass+Compassのイスントールはこちらの記事を参考にしました。
sass+compassのインストールにMacOS10.9+ruby2.0.0の環境で失敗したら。 - Qiita
$ sudo gem install sass --pre $ sudo gem install compass --pre
今度は上手くいきました。
とりあえず、installはできたかな。。。
次は実装。
Sassを使いたくなる！便利機能をまとめてみました。 | MONSTER DIVE【モンスターダイブ】
のサンプルコードを参考にまずは試し書き。
#main {
width:940px;
p {
font-size: 14px;
.head {
background-color: #000000;
}
}
}
こんな風に書いて変換コマンドを打つと、
$sass --style expanded style.scss:style.css
いつものCSSファイルを吐いてくれる。
#main {
width: 940px;
}
#main p {
font-size: 14px;
}
#main p .head {
background-color: #000000;
}
・別なscssファイルをimporできる！
例えば、
main.scss
style.scss
っていう二つのファイルを用意しておく。
実際にコンパイルするのはstyle.scssだけ。
style.scssに
@import "main.scss";
って書いておくと、両方のファイルに書いたcssを１つのファイルにまとめて吐き出してくれる。
これは結構便利かもしれない。
しかし、最後に;つけないとエラーになるのなんか罠っぽい。
何度もひっかかるんですけど、;っていつもideaが勝手につけてくれるか、もはや最近の言語では;をつけない文化になってきてるのでうっかり忘れる。
・コメントの書き方
// コメント
って書く、吐き出されたcssファイルにはコメントは記載されない。
scssファイルでのみコメント扱い。
/* コメント */
って書くと、吐き出したcssファイルにもコメントが書かれるようになる。
実装上コメントしたいときだけとかある気がするので、使い分けられるの便利ですね。
・変数が使える！
$DarkPrimaryColor: #C2185B;
$BigTextSize: 24px;
って感じでカラーコードや文字のサイズとかを定義して使い回せる。
例えば、色だけ、サイズだけを定義したファイルを用意しておく。
color.scss
text_size.scss(ファイル名のつけ方はこれでいいのだろうか？？css界のお作法わからんのでこれでいいのかどうか……)
っていうファイルを用意して、メインで使うscssファイルにimportしておけば、整理された感ありますよね。
Androidのリソースファイルっぽい管理ができそうです。
外部ファイルに定義したscssの変数を補完してくれるともっと便利なんだけどなぁ。
そんなAtomのpluginありませんかねー？
・変数が使える
font-size: $NomalTextSize + $SmallTextSize;
とかって、定義している変数同士の四則演算ができるようです。
width: 400 + 200px;
とかってできるみたいだけど、サイズ計算面倒だから〜って理由でこれを使い出すと訳分からんことになりそうですね。
あと、美しくない。
・継承
.unitA {
margin: 10px;
padding: 5px;
}
.unitB {
@extend .unitA;
color: $PrimaryTextColor;
}
この様に、@extendを使うとunitAの記述を継承できます。
吐き出されるcss
.unitA, .unitB {
margin: 10px;
padding: 5px;
}
.unitB {
color: #212121;
}
ってなるんだけど、自分の予想と違う吐かれ方をしたのでちょっと使いにくいかも。
慣れるとこうなるって予想が付くんだろうけどね。
・ループ
for文、while文、eachが使えるみたいだけど、とりあえずwhileしてみる。
$i: 0;
$length: 10;
@while $i <= $length {
.imagePanel_#{$i} {
$path: '../images/img' + $i + '.png';
background: url('#{$path}') no-repeat center center;
}
$i: $i + 1;
}
ってすると、画像名とクラス名の$iのところ一つづつインクリメントしたcssが書かれます。
.imagePanel_0 {
background: url("../images/img0.png") no-repeat center center;
}
.imagePanel_1 {
background: url("../images/img1.png") no-repeat center center;
}
以下略…
これはなかなか便利！
画像の指定とか、同じようなスタイルを複数指定したいときはこれ使うと良さげですね。
せっせとコピペしなくて済みそうです。
コンパイル時にうっかり無限ループしちゃったんですが、慌てず騒がずCntl+Cです！
・ところで
sass-autocompilっていうAtomのプラグインを入れてみたところ、なんだかコンパイルエラーになってしまった。。。
セーブするだけでコンパイルできる優れものだと思ったら……。
コマンドからはちゃんとコンパイルできるので、何か設定とかあるのかな。
面倒なので深追いせずにアンインストールです。
なんか、便利そうなのでさっそく趣味サイトで使ってみようかと思いました。
webのお仕事来たら使おう〜って提案したい。
