sass初級文法，sass

sass初級文法，sass

用到的sass文法是:

sass --watch test.scss:test.css --style compact --style expanded

如:

1 自訂變數

test.scss內容是:

$color: black;.test1 {    background-color: $color;} 

編譯成test.css內容是:

.test1 {  background-color: black;}

 

2 在字串內加變數

test.scss內容是:

$left: left;.test2 {    border-#{$left}:1px  #000 solid;}

編譯成test.css內容是:

.test2 {  border-left: 1px  #000 solid;}

 

3 樣式內進行加減乘除(注意除法書寫)

test.scss內容是:

$para:4;.test3 {    height: 5px+3px;    width: (14px/7);    right: $para*4;}

編譯成test.css內容是:

.test3 {  height: 8px;  width: 2px;  right: 16;}

 

4 子項目書寫

test.scss內容是:

.test4 {    .lala {        color: pink;    }}

編譯成test.css內容是:

.test4 .lala {  color: pink;}

 

5 繼承(SASS允許一個選取器，繼承另一個選取器)

test.scss內容是:

.class1 {    border-left: 1px #000 solid;}.class2 {    @extend .class1;    font-size: 15px;}

編譯成test.css內容是:

.class1, .class2 {  border-left: 1px #000 solid;}.class2 {  font-size: 15px;}

 

6 複用代碼塊

test.scss內容是:(無變數)

@mixin test6 {    height: 5px;    left: 20px;    top: 10px;}.lili {    @include test6;}

編譯成test.css內容是:(無變數)

.lili {  height: 5px;  left: 20px;  top: 10px;}

這個方法很好用的是可以設定變數,如下:

test.scss內容是:(有變數)

@mixin test62($height) {    height: $height;    left: 20px;    top: 10px;}.lili2 {    @include test62(100px);}

編譯成test.css內容是:(有變數)

.lili2 {  height: 100px;  left: 20px;  top: 10px;}

 

7 函數

test.scss內容是:

@function aa($color) {    @return $color;}.test7 {    color: aa(pink);}

編譯成test.css內容是:

/*example 07*/.test7 {  color: pink;}

 

8 匯入外部scss或者css檔案

test.scss內容是:

@import 'more.scss' 

more.scss內容是:

$width: 30px;.test8 {    width: $width;}

編譯成test.css內容是:

.test8 {  width: 30px;}