ドットインストールのSass/SCSS入門をやってみた
先日のドットインストールのBackbone.js入門をやってみた - 悪あがきプログラマーに引き続きSass/SCSS入門をやってみました。
Sass/SCSS入門 (全15回) - プログラミングならドットインストール
環境構築
ディレクトリを作ります。
sass_lessons/css/
sass_lessons/scss/
ソース
すみません、ドットインストールまんまです。個人的に見やすいように並べただけです。まずかったら消すので言ってください。
Sass/SCSS入門 (全15回) - プログラミングならドットインストール
#04 入れ子構造を使ってみよう
main.scss
/* comment */ /* comment comment */ // comment #main { width: 90%; p { font-size: 16px; a { text-decoration: none; &:hover { font-weight: bold; } } } }
main.css
/* comment */ /* comment comment */ #main { width: 90%; } #main p { font-size: 16px; } #main p a { text-decoration: none; } #main p a:hover { font-weight: bold; }
#05 変数を使ってみよう
main.scss
// 変数:データにつけるラベル // データ型(数値、文字列、真偽、色、リスト) // + - * / $baseFontSize: 14px; #main { width: 90%; p { font-size: $baseFontSize; .sub { font-size: $baseFontSize - 2px; } } }
main.css
#main { width: 90%; } #main p { font-size: 14px; } #main p .sub { font-size: 12px; }
#06 文字列を扱ってみよう
main.scss
// 変数:データにつけるラベル // データ型(数値、文字列、真偽、色、リスト) $imgDir: "../img/"; #main { width: 90%; background: url("#{$imgDir}bg.png"); p { font-size: #{12 + 12}px; } }
main.css
#main { width: 90%; background: url("../img/bg.png"); } #main p { font-size: 24px; }
#07 色を扱ってみよう
main.scss
// 変数:データにつけるラベル // データ型(数値、文字列、真偽、色、リスト) $brandColor: rgba(255,0,0,0.9); // lighten darken #main { width: 90%; p { color: lighten($brandColor, 30%); font-size: 14px; } }
main.css
#main { width: 90%; } #main p { color: rgba(255, 153, 153, 0.9); font-size: 14px; }
#08 @if文を使ってみよう
main.scss
// データ型(数値、文字列、真偽、色、リスト) // 条件分岐 @if @else // == != < > <= >= $debugMode: true; $x: 10; #main { @if $debugMode == true { color: red; } @else { color: green; } p { @if $x > 20 { color: yellow; } } }
main.css
#main { color: red; }
#09 @for, @while文を使ってみよう
main.scss
// ループ // @for // @while // .fs10 { font-size: 10px; } @for $i from 10 through 14 { .fs#{$i} { font-size: #{$i}px; } } $i: 10; @while $i <= 14 { .fs#{$i} { font-size: #{$i}px; } $i: $i + 1; }
main.css
.fs10 { font-size: 10px; } .fs11 { font-size: 11px; } .fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; } .fs10 { font-size: 10px; } .fs11 { font-size: 11px; } .fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; }
#10 リストを扱ってみよう
main.scss
// リスト(似たようなデータをまとめて管理) // $animals: cat, dog, tiger; @each $animal in cat, dog, tiger { .#{$animal}-icon { background: url("#{$animal}.png"); } }
main.css
.cat-icon { background: url("cat.png"); } .dog-icon { background: url("dog.png"); } .tiger-icon { background: url("tiger.png"); }
#11 #12 関数を使ってみよう
main.scss
// 関数 $totalWidth: 940px; $columnCount: 10; @function getColumnWidth($width, $count) { // $columnWidthを計算 $padding: 10px; $columnWidth: floor(($width - ($padding * ($count - 1))) / $count); @debug $columnWidth; @return $columnWidth; } .grid { float: left; width: getColumnWidth($totalWidth, $columnCount); }
main.css
.grid { float: left; width: 85px; }
#13 ファイルを分離させてみよう
main.scss
// 関数 @import "settings"; @import "functions"; .grid { float: left; width: getColumnWidth($totalWidth, $columnCount); }
_settings.scss
$totalWidth: 940px; $columnCount: 10;
_functions.scss
@function getColumnWidth($width, $count) { // $columnWidthを計算 $padding: 10px; $columnWidth: floor(($width - ($padding * ($count - 1))) / $count); @debug $columnWidth; @return $columnWidth; }
main.css
.grid { float: left; width: 85px; }
#14 @mixinを使ってみよう
main.scss
// mixin @mixin round($radius:4px) { border-radius: $radius; } .label { font-size: 12px; @include round(10px); }
main.css
.label { font-size: 12px; border-radius: 10px; }
#15 @extendを使ってみよう
main.scss
// @extend (継承) // .errorMsg // .warningMsg .msg { font-size: 12px; font-weight: bold; padding: 2px 4px; color: white; } .errorMsg { @extend .msg; background: red; } .warningMsg { @extend .msg; background: orange; }
main.css
.msg, .errorMsg, .warningMsg { font-size: 12px; font-weight: bold; padding: 2px 4px; color: white; } .errorMsg { background: red; } .warningMsg { background: orange; }
まとめ
Sass/SCSSを初めて使ってみたわけですが、これは一度使ったら手放せない感があります。
個人的にはネストとかlightenがとても便利に使えそうです。