SCSS is a useful tool for building up your css file.
You can create some function and call in scss to reduce your workload. It is more benefit to build up website.
|
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 |
gem install sass cd css sass --watch style.scss:style.css //上面指令是sass會開始監視你的style.scss檔案，在檔案儲存時，會馬上把style.scss編譯成style.css，隨時可以按Command + C 取消監視 //sass --watch --style expanded style.scss:style.css //以expanded壓縮方式 //sass --watch --style compressed style.scss:style.css //以compressed壓縮方式 //1.Variables 變數 //使用$作為開頭當參數 $main_color: #2e2e2e; $font-size: 14px; div{ color: $main_color; font-size: $font-size; } //2.Nesting 巢狀結構 div{ color: $main_color; ul{ font-size: $font-size; li{ background: $main_color; } } button{ color: $main_color; } } //3.Mixins //其實就像function一樣使用，還可以帶參數 @mixin roundedBox{ font-size: $font_size; color: $main_color; $radius: 10px; border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } @mixin roundedBox2($radius:10px){ font-size: $font_size; color: $main_color; border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } div{ @include roundedBox; } div.second{ @include roundedBox2(100px); } |