Sassミニマムスタートのススメ

できることから始める

ワシ「Sass使おうよ、便利だよ」
Aさん「難しそう…」
Bさん「プログラムっぽい…」
Cさん「何が出来るかわかんない…」

ワシ「じゃあ簡単なものだけ使ってみようよ」
A,B,C「これだけならじゃあ…使ってみようかな…！」

変数

カラーコード

$keyColor : #000;

.hoge {
    color: $keyColor;
}

ルートディレクトリ

$imgRoot : '../img/';

.fuga {
    background-image: '#{$imgRoot}abc.png';
}

ネスト

.hoge {
    width: 200px;
        li {
            width: 80px;
            img {
                width: 20px;
            }
        }
}

親セレクタの継承

a {
    font-size: 12px;
    &:hover {
        font-size: 18px;
    }
}

コメント

//コメント

あとは便利な機能を少しずつ教えるだけ

ワシ「よし、Sassを浸透させる舞台は整った！！」