以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。
sassとは
一言でいうとCSSをプログラミングのように書ける言語です。具体的には下記のようなことができます。
- 変数、配列や条件分岐、繰り返しなどを使うことができる
- ネストによりCSSの階層構造や継承を表記できる
- テンプレート化したものを読み込んだりなどもできる
- もちろん生のCSSを使うこともきます。
cssも保守するの結構大変ですもんね・・
インストール&コンパイル
前提としてruby(とgem)がインストールされていないと動きません。
ruby(とgem)がインストールされていれば下記コマンドで一発インストールできます。
1 |
gem install sass |
あとはsassの記法により、~.scssというファイルをつくり、下記コマンドで一気にcssファイルを作れます。
1 |
sass sample.scss:sample.css |
またnodeをインストールしたあと使うこともできます。
1 |
npm install -g node-sass |
一般的な記法など
sample.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
$imgDir:"../img"; $width:"50%"; #main{ /** 変数を使うことができる **/ width:$width; background:url("#{$imgDir}bg.png"); p{ /** 数式を使える **/ font-size:#{12+12}px; } } $debugMode:true; $x:10; /** 条件分岐 **/ #main2{ @if $debugMode == true{ color:red; } @else { color:green; } p{ @if $x > 10 { color:yellow; } } } /**ループ **/ $i:10; $i2:10; #main3{ /**10から14まで **/ /** 変数を文字で使うときは **/ /** 下記のような記法をインターポーションという**/ @for $i from 10 through 14 { .fs_#{$i} {font-size: #{$i}px;} } @while $i2 <= 14 { .fs_#{$i2} {font-size: #{$i2}px;} $i2:$i2+1; } } /**配列 **/ $animals: cat,dog,tiger; @each $animal in $animals{ /** 最初の#はidの# **/ ##{$animal}_icon {background:url("#{$animal}.png");} } /** 関数 a**/ $totalWidth:940px; $columnCount:10; @function getColumnWidth($width, $count){ $padding:10px; $columnWidth:floor( ($width) - $padding*($count) / $count ); /** debugはコンソールに出力をする **/ /** @debug $columnWidth **/; @return $columnWidth; } .grid{ float:left; width:getColumnWidth($totalWidth, $columnCount); } /** mixin テンプレート的な機能 **/ @mixin round-btn($radius:4px) { border: 1px solid #b8b8b8; border-radius:5px; background-color:#c9c9c9x; } @mixin auto-color($color) { @include round-btn; color:$color; } .btn-blue{ @include auto-color(blue); } .btn-red{ @include auto-color(red); } /** 継承 **/ #main4{ background-color:red; color:gray; } #main5{ @extend #main4; border:1px solid white; } |
そして上記のファイルをコンパイルすると下記のようなcssができあがります。
sample.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
@charset "UTF-8"; #main { /** 変数を使うことができる **/ width: "50%"; background: url("../imgbg.png"); } #main p { /** 数式を使える **/ font-size: 24px; } /** 条件分岐 **/ #main2 { color: red; } /**ループ **/ #main3 { /**10から14まで **/ /** 変数を文字で使うときは **/ /** 下記のような記法をインターポーションという**/ } #main3 .fs_10 { font-size: 10px; } #main3 .fs_11 { font-size: 11px; } #main3 .fs_12 { font-size: 12px; } #main3 .fs_13 { font-size: 13px; } #main3 .fs_14 { font-size: 14px; } #main3 .fs_10 { font-size: 10px; } #main3 .fs_11 { font-size: 11px; } #main3 .fs_12 { font-size: 12px; } #main3 .fs_13 { font-size: 13px; } #main3 .fs_14 { font-size: 14px; } /**配列 **/ /** 最初の#はidの# **/ #cat_icon { background: url("cat.png"); } /** 最初の#はidの# **/ #dog_icon { background: url("dog.png"); } /** 最初の#はidの# **/ #tiger_icon { background: url("tiger.png"); } /** 関数 a**/ .grid { float: left; width: 930px; } /** mixin テンプレート的な機能 **/ .btn-blue { border: 1px solid #b8b8b8; border-radius: 5px; background-color: #c9c9c9x; color: blue; } .btn-red { border: 1px solid #b8b8b8; border-radius: 5px; background-color: #c9c9c9x; color: red; } /** 継承 **/ #main4, #main5 { background-color: red; color: gray; } #main5 { border: 1px solid white; } |
参考リンク
CSSの常識が変わる!「Compass」の基礎から応用まで!
※タイトルはcompassですがsassの説明も含まれています。