巷でとても話題になっているCSSを爆速に書くために生まれたすごいやつSassの導入方法と使いかたを書いていこうかと。
ちなみに、公式サイトはこちら。
http://sass-lang.com/
Rubyの導入
MacOSであればすでに入っているので、特にきにすることはありませんが、不安な人はこちらの記事を参考に。
http://blog.livedoor.jp/noanoa07/archives/1897747.html
Windowsの場合は入れる必要があります。
Windowsの方は
http://www.rubylife.jp/install/install/index1.html
こちらを参考にして入れてみてください。
今回はMacでのインストールの方法を記載していきます。
Windowsもほぼ同じなので大丈夫だとは思いますが。
Sassのインストール
ターミナルを起動して
$ sudo gem install sass
と入力してEnter。
sudoで実行しているので、パスワードを聞かれると思うので、入力。
しばし待つと、インストールが終わるので、これで完了
実際に使ってみる
まず知っておくべきことは 拡張子 です。
Sassを使う場合.cssではなくなり
style.sassもしくはstyle.scssのどちらかになります。
この２種類の違いは 記法 にあります。
#wrapper
width: 1200px
margin: 0 auto
div#box
width: 500px
background: red
#wrapper{
width: 1200px;
margin: 0 auto;
div#box{
width: 500px;
background: red;
}
}
.sassは{ }や;がない書き方。インデントで管理をする。
.scssはcssの記法でかけるのが特徴。
次にSassはそのままでは使えず コンパイル が必要です。
実際に書いたSassファイルをコンパイルするには
ターミナルから
$ cd hoge/sass/
$ sass style.scss:style.css
このようにコンパイルしてあげると、CSSファイルとしてそのディレクトリに生成されます。
オプションとして生成するCSSのタイプが４種類選べます。
- Nested 入れ子構造をインデントでうまく表現してくれる
- Expanded いわゆる普通のCSSとして生成してくれる
- Compact セレクタの中にあるスタイルの指定を１行で表示してくれる
- Compressed 全てを１行にしてくれる style.min.cssみたいなイメージ
オプションを付ける場合は
$ sass style.scss:style.css --style expanded
このように記述する。
Sassでできること
SassはCSSを爆速にかけるように、かつ管理しやすいように工夫されています。
代表的な使いかたを見ていきましょう！
記述は.scss方式です。
// スラッシュ２つでのコメントアウト
// $を付けると「変数」として使えます。
$w: 1200px;
$color: #3c3c3c;
$hover: #ff0000;
// mixin(プログラムの関数的なやつ)
@mixin boxStyle($width){
width: $width;
border: solid 1px #000000;
border-radius: 5px;
}
// 入れ子構造
#wrapper{
width: $w;
margin: 0 auto;
div#content{
@include boxStyle(300px);
color: $color;
// 親セレクタを参照して、擬似セレクタを適用
&:hover{
background: $hover;
}
}
}
これをコンパイルすると
#wrapper{
width: 1200px;
margin: 0 auto;
}
#wrapper div#content{
width: 300px;
border: solid 1px #000000;
border-radius: 5px;
color: #3c3c3c;
}
#wrapper div#content:hover{
background: #ff0000;
}
このように吐き出されます。
入れ子構造や変数、mixinを使うことで、爆速にかけます。
それ以外にも継承や、演算などもできます。
詳しくは以下の参考サイトをみると分かりやすいです！
参考サイト
とりあえず、ここをみるとだいたい全部のことがわかる。
http://www.saison-lab.com/web/sass-compass/