Sass 2

sassの自動変換
変更があると、上書きされる
[vagrant@localhost sass]$ sass –style expanded –watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
write css/main.css
write css/main.css.map
>>> Change detected to: scss/main.scss
write css/main.css
write css/main.css.map

あれ、gulpって必要なかったっけ？

1
2
3
4
5
6
7
8
9
10
11
/* comment */
 
#main {
    width: 90%;
    p {
        font-size: 16px;
        a {
            text-decoration: none;
        }
    }
}

&の使い方

1
2
3
4
5
6
a {
            text-decoration: none;
            &:hover {
                font-weight: bold;
            }
        }

変数

1
2
3
4
5
6
7
8
$baseFontSize: 14px;
 
#main {
    width: 90%;
    p {
        font-size: $baseFontSize;
    }
}
1
2
3
4
5
6
7
8
9
$imgDir: "../img/";
 
#main {
    width: 90%;
    background: url($imgDir + "bg.png");
    p {
        font-size: 16px;
    }
}