Sass語法規則及使用方法

sass是一種css的擴充套件，可以使得css的編碼更加強大和優雅。sass支援使用變數、條件、迴圈、巢狀、繼承、mixin、函式等強大的功能。

sass特點：

sass有兩種語法格式，分別以sass和scss為字尾名。scss語法一般css相同，以大括號分隔作用域，以分號來分隔屬性；而sass則以縮排分隔作用域，換行分隔屬性。

//scss syntax div//sass syntax divcolor : #ccc

兩種語法之間可以用sass-convert命令列來轉換

# convert sass to scss $ sass-convert style.sass style.scss # convert scss to sass

$ sass-convert style.scss style.sass

sass是用ruby語言寫的，因此在安裝sass之前首先需要安裝ruby，然後就可以用以下命令安裝：

gem insall sass

將sass檔案轉換為css檔案：

sass input.scss output.css

也可以監聽sass檔案的變化，並實時轉換為css：

sass --watch input.scss:output.css

如果想要監聽整個資料夾中的內容，也可以使用如下命令：

sass允許巢狀使用css選擇器，如下所示：

.out
}

將被編譯成

.out .inner

css中有一大類屬性是具有命名空間的，例如border-color、border-radius、border-image等。sass提供了更簡潔的方法用於對這類屬性的設定：

#main
}

將被編譯成

#main

& 表示對乙個父選擇器的使用，有時候使用&會使得樣式表達更加簡介，例如使用hover屬性時：

a
}

將被編譯成

a a:hover

&也能新增字尾來構造新的選擇器，例如：

#main
}

將被編譯成

#main #main-side

sass中加入了變數，變數以美元符號$開頭，例如：

$gray:#ccc;

並使用$來引用變數

div

如果變數在選擇器外面定義，則屬於全域性變數，如果在選擇器內部定義，則只能在該選擇器作用範圍內使用。當然也可以使用!global來將其宣告為全域性變數：

.global

sassscript支援對數值進行算數操作，包括加(+)、減(-)、乘(*)、除(/)、取餘(%)。算數操作可以保留單位，比如下面兩種加法都是合法的：

.operation

將編譯成

.operation

但是需要注意的是對於不同單位的數值（如px和em）不能進行算數操作。

對於乘法來說，如果兩個數值具有相同的單位，相乘時會生成單位的平方，但是在css中單位的平方是不允許的。

而對於除法來說，由於css中已經存在除法表示式，如10px/2px，這種表示式在輸出為css不會被計算成結果，除非由括號包圍，正確的使用方式是10px/2。

對於減法，使用負號(-)時需要在兩邊有空格。

除此之外，算數操作中也可以使用變數。

.operation

將被編譯成

.operation

對於顏色值，rgb三個值是分開計算的，例如：

.color

將被計算成

.color

條件語句以@if、@else if、@else為關鍵字

div  @else 
}

將被編譯成

div

迴圈語句有三種形式：@for、@each、@while，@for和@while與普通迴圈相同，@each用於遍歷list和map。

@for

@for有兩種形式，分別是from (start) through (end)和from (start) to (end)，其區別是前者的範圍是從start到end，後者的範圍是從start到end-1

@for $var
from
1 to 3
}

將被編譯成

.item-1 .item-2

@while

$var:3;
@while
$var>0
}

將被編譯成

.item-2 .item-1 .item-0

@each

@each可用於遍歷中的變數

//遍歷list @each $var in main, sider, foot -item

}

將被編譯成

.main-item .sider-item .foot-item

//遍歷map
@each
$key, $value
in (main:5px, sider:10px, foot:5px)  
}

將被編譯成

.main .sider .foot

sass中使用@function定義函式，使用@return返回值，例如：

@function
my_add($var1,$var2)
div

將被編譯成

div

需要注意的是：函式定義名稱中的下劃線(_)和橫線(-)是等同的，即上面的使用my-add(1px,2px)也是可以的。

使用@import可以匯入其他的sass檔案，例如想要匯入乙個foo.scss檔案，由於匯入的預設字尾名為.scss和.sass，因此下面兩中方式均可：

@import "foo.scss";

或

@import "foo";

雖然@import一般都在文件的頭部使用，但也可以在css規則中使用，例如

在乙個for-import.scss檔案中包含

.im-test

使用

div

將被編譯成

div .im-test

height

: 50px;

width

: 50px;

} @extend

background-color

: #5bc0de;}

將被編譯成

height

: 50px;

width

: 50px;

}div

:hover

@extend

background-color

: #5bc0de;}

將被編譯成

div:hover

此外@extend也支援多重繼承、鏈式繼承，在這裡不作多述。

@mixin可以用於定義一些可重用的樣式，並用@include來引用這些樣式，例如：

@mixin title

.top-title

將被編譯成

.top-title

@mixin似乎與@extend非常相似，但@mixin強大的地方在於它可以傳遞引數,類似於函式：

@mixin
title($color)
.top-title

將被編譯成

.top-title

wireshark過濾規則及使用方法

例子 ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者 ip.addr eq 192.168.1.107 都能顯示 ip和目標iptcp.port eq 80 不管埠是的還是目標的都顯示 tcp.port 80 tcp.port eq 272...

gitignore語法規則及踩過的坑

1 空行或是以開頭的行即注釋行將被忽略。2 可以在前面新增正斜槓來避免遞迴,下面的例子中可以很明白的看出來與下一條的區別。3 可以在後面新增正斜槓來忽略資料夾，例如 build 即忽略 build 資料夾，doc build 這樣的目錄也會忽略。4 可以使用來否定忽略，即比如在前面用了 ...

ruby中使用yacc定義的語法規則

摘自1.8.6，parse.y stmt kalias fitem fitem kalias tgvar tgvar kalias tgvar tback ref kalias tgvar tnth ref kalias沒有找到定義的部分，不知可以產生這個訊號莫非這個是由yacc而非lex產生的...

Sass語法規則及使用方法

wireshark過濾規則及使用方法

gitignore語法規則及踩過的坑

ruby中使用yacc定義的語法規則

相關推薦