Sass語法規則及使用方法
Sass是一種css的擴充套件,可以使得css的編碼更加強大和優雅。sass支援使用變數、條件、迴圈、巢狀、繼承、mixin、函式等強大的功能。
Sass特點:
- 對css完全相容
- 語言擴充套件,例如變數、巢狀、mixins
- 擁有大量函式,可以用來操作顏色及其他屬性值
- 高階特性如control directives
- 可以自定義格式化輸出
sass有兩種語法格式,分別以sass和scss為字尾名。scss語法一般css相同,以大括號分隔作用域,以分號來分隔屬性;而sass則以縮排分隔作用域,換行分隔屬性。
//scss syntax
div{
color: #ccc;
}
//sass syntax
div
color: #ccc
兩種語法之間可以用sass-convert命令列來轉換
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
1. 使用Sass
sass是用ruby語言寫的,因此在安裝sass之前首先需要安裝ruby,然後就可以用以下命令安裝:
gem insall sass
將sass檔案轉換為css檔案:
sass input.scss output.css
也可以監聽sass檔案的變化,並實時轉換為css:
sass --watch input.scss:output.css
如果想要監聽整個資料夾中的內容,也可以使用如下命令:
sass --watch app/sass:public/stylesheets
2. css擴充套件
2.1 巢狀選擇器
sass允許巢狀使用css選擇器,如下所示:
.out{
.inner{
color:#ccc;
}
}
將被編譯成
.out .inner {
color: #ccc;
}
2.2 巢狀屬性
css中有一大類屬性是具有名稱空間的,例如border-color、border-radius、border-image等。sass提供了更簡潔的方法用於對這類屬性的設定:
#main{
border:{
color: #ccc;
radius: 3px;
width: 1px;
}
}
將被編譯成
#main {
border-color: #ccc;
border-radius: 3px;
border-width: 1px; }
2.3 &:引用父選擇器
& 表示對一個父選擇器的使用,有時候使用&會使得樣式表達更加簡介,例如使用hover屬性時:
a{
color:#1b6d85;
&:hover{
color: #de1d18;
}
}
將被編譯成
a {
color: #1b6d85; }
a:hover {
color: #de1d18; }
&也能新增字尾來構造新的選擇器,例如:
#main{
color:#ccc;
&-side{
color:#aaa;
}
}
將被編譯成
#main {
color: #ccc; }
#main-side {
color: #aaa; }
3. 計算
3.1 變數
sass中加入了變數,變數以美元符號$開頭,例如:
$gray:#ccc;
並使用$來引用變數
div{
color: $gray;
}
如果變數在選擇器外面定義,則屬於全域性變數,如果在選擇器內部定義,則只能在該選擇器作用範圍內使用。當然也可以使用!global來將其宣告為全域性變數:
.global{
$blue:#00f !global;
}
3.2 計算
SassScript支援對數值進行算數操作,包括加(+)、減(-)、乘(*)、除(/)、取餘(%)。算數操作可以保留單位,比如下面兩種加法都是合法的:
.operation{
height:1+1px;
width:1px+1px;
}
將編譯成
.operation {
height: 2px;
width: 2px; }
但是需要注意的是對於不同單位的數值(如px和em)不能進行算數操作。
對於乘法來說,如果兩個數值具有相同的單位,相乘時會生成單位的平方,但是在css中單位的平方是不允許的。
而對於除法來說,由於css中已經存在除法表示式,如10px/2px,這種表示式在輸出為css不會被計算成結果,除非由括號包圍,正確的使用方式是10px/2。
對於減法,使用負號(-)時需要在兩邊有空格。
除此之外,算數操作中也可以使用變數。
.operation{
$width:5px;
width: $width*2;
height:2*2px;
font-size: 5px - 1px;
margin-bottom: (10px/5);
margin-left: (10px/5px);
margin-right: 10px/5px;
margin-top: 2px+10px/5px;
}
將被編譯成
.operation {
width: 10px;
height: 4px;
font-size: 4px;
margin-bottom: 2px;
margin-left: 2;
margin-right: 10px/5px;
margin-top: 4px; }
對於顏色值,rgb三個值是分開計算的,例如:
.color{
color: #001122+#002244;
}
將被計算成
.color {
color: #003366; }
4. 表示式與函式
4.1 條件語句
條件語句以@if、@else if、@else為關鍵字
div {
@if ($width>2px) {
height: 5px;
} @else {
height: 10px;
}
}
將被編譯成
div {
height: 5px; }
4.2 迴圈語句
迴圈語句有三種形式:@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-#{$var}{
width: 2px*$var;
}
}
將被編譯成
.item-1 {
width: 2px; }
.item-2 {
width: 4px; }
@while
$var:3;
@while $var>0{
$var : $var - 1;
.item-#{$var}{
width:$var px;
}
}
將被編譯成
.item-2 {
width: 2 px; }
.item-1 {
width: 1 px; }
.item-0 {
width: 0 px; }
@each
@each可用於遍歷<list or map>中的變數
//遍歷list
@each $var in main, sider, foot {
.#{$var}-item {
color: #ccc;
}
}
將被編譯成
.main-item {
color: #ccc; }
.sider-item {
color: #ccc; }
.foot-item {
color: #ccc; }
//遍歷map
@each $key, $value in (main:5px, sider:10px, foot:5px) {
.#{$key} {
height: $value;
}
}
將被編譯成
.main {
height: 5px; }
.sider {
height: 10px; }
.foot {
height: 5px; }
4.3 函式
sass中使用@function定義函式,使用@return返回值,例如:
@function my_add($var1,$var2){
@return $var1 + $var2;
}
div{
width: my_add(1px,2px);
}
將被編譯成
div {
width: 3px; }
需要注意的是:函式定義名稱中的下劃線(_)和橫線(-)是等同的,即上面的使用my-add(1px,2px)也是可以的。
5. 樣式重用
5.1 @import
使用@import可以匯入其他的sass檔案,例如想要匯入一個foo.scss檔案,由於匯入的預設字尾名為.scss和.sass,因此下面兩中方式均可:
@import "foo.scss";
或
@import "foo";
雖然@import一般都在文件的頭部使用,但也可以在css規則中使用,例如
在一個for-import.scss檔案中包含
.im-test{
height: 10px;
}
使用
div{
@import "for-import";
}
將被編譯成
div .im-test {
height: 10px; }
5.2 @extend
使用@extend可以繼承另一個選擇器的屬性,例如happy類定義了基本屬性,而very-happy類在具有happy類屬性的同時還增加其他屬性:
.happy{
height: 50px;
width: 50px;
}
.very-happy{
@extend .happy;
background-color: #5bc0de;
}
將被編譯成
.happy, .very-happy {
height: 50px;
width: 50px; }
.very-happy {
background-color: #5bc0de; }
@extend的實際原理是所有繼承的選擇器出現的地方都應用當前選擇器,例如下面所示,.happy下面的div、 hover屬性都會被.very-happy繼承:
.happy{
height: 50px;
width: 50px;
}
.happy div{
border: 1px;
}
.happy:hover{
color: #de1d18;
}
.very-happy{
@extend .happy;
background-color: #5bc0de;
}
將被編譯成
.happy, .very-happy {
height: 50px;
width: 50px; }
.happy div, .very-happy div {
border: 1px; }
.happy:hover, .very-happy:hover {
color: #de1d18; }
.very-happy {
background-color: #5bc0de; }
此外@extend也支援多重繼承、鏈式繼承,在這裡不作多述。
5.3 @mixin
@mixin可以用於定義一些可重用的樣式,並用@include來引用這些樣式,例如:
@mixin title{
font-size: 18px;
color: #222;
}
.top-title{
@include title;
margin: 10px;
}
將被編譯成
.top-title {
font-size: 18px;
color: #222;
margin: 10px; }
@mixin似乎與@extend非常相似,但@mixin強大的地方在於它可以傳遞引數,類似於函式:
@mixin title($color){
font-size: 18px;
color: $color;
}
.top-title{
@include title(#222);
margin: 10px;
}
將被編譯成
.top-title {
font-size: 18px;
color: #222;
margin: 10px; }