用到的sass語法是:
sass --watch test.scss:test.css --style compact --style expanded
如下圖:
1 自訂變數
test.scss內容是:
<span style="color: #000000;">$color: black; .test1 { background-color: $color; } </span>
編譯成test.css內容是:
<span style="color: #000000;">.test1 { background-color: black; }</span>
2 在字串內加變數
test.scss內容是:
<span style="color: #000000;">$left: left; .test2 { border-#{$left}:1px #000 solid; }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test2 { border-left: 1px #000 solid; }</span>
3 樣式內進行加減乘除(注意除法書寫)
test.scss內容是:
<span style="color: #000000;">$para:4; .test3 { height: 5px+3px; width: (14px/7); right: $para*4; }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test3 { height: 8px; width: 2px; right: 16; }</span>
4 子元素書寫
test.scss內容是:
<span style="color: #000000;">.test4 { .lala { color: pink; } }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test4 .lala { color: pink; }</span>
5 繼承(SASS允許一個選擇器,繼承另一個選擇器)
test.scss內容是:
<span style="color: #000000;">.class1 { border-left: 1px #000 solid; } .class2 { @extend .class1; font-size: 15px; }</span>
編譯成test.css內容是:
<span style="color: #000000;">.class1, .class2 { border-left: 1px #000 solid; } .class2 { font-size: 15px; }</span>
6 復用程式碼區塊
test.scss內容是:(無變數)
<span style="color: #000000;">@mixin test6 { height: 5px; left: 20px; top: 10px; } .lili { @include test6; }</span>
編譯成test.css內容是:(無變數)
<span style="color: #000000;">.lili { height: 5px; left: 20px; top: 10px; }</span>
這個方法很好用的是可以設定變數,如下:
test.scss內容是:(有變數)
<span style="color: #000000;">@mixin test62($height) { height: $height; left: 20px; top: 10px; } .lili2 { @include test62(100px); }</span>
編譯成test.css內容是:(有變數)
<span style="color: #000000;">.lili2 { height: 100px; left: 20px; top: 10px; }</span>
7 函數
test.scss內容是:
<span style="color: #000000;">@function aa($color) { @return $color; } .test7 { color: aa(pink); }</span>
編譯成test.css內容是:
<span style="color: #000000;">/*example 07*/ .test7 { color: pink; }</span>
8 導入外部scss或css檔
test.scss內容是:
@import 'more.scss'
more.scss內容是:
<span style="color: #000000;">$width: 30px; .test8 { width: $width; }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test8 { width: 30px; }</span>