Sass語法 一 基本用法

//編譯後的css**

.meng  

在日常編輯過程中，可以給變數新增預設值(!default)標誌。如果在其變數值沒有單獨設定，那麼就用新增預設值的變數值。若設定了，那麼就用重新設定的變數值。如下

變數可以乙個乙個的宣告，也可以多個一起宣告。多個一起宣告，用起來是比較方便的，特別是宣告相似功能的變數。

a.全域性變數就是定義在元素外面的變數

b.區域性變數只會在區域性範圍內覆蓋全域性變數

//scss

$color: orange !default;//定義全域性變數(在選擇器、函式、混合巨集...的外面定義的變數為全域性變數)
.block 
em }
span 

變數不僅可以用在屬性值，還可以用在選擇器或者是屬性上面。下面是變數使用在選擇器上的小例項$class : meng;  

//　scss** 

.#  

//編譯後的css**

.meng  

對於攜帶不同型別的單位時，在sass中計算會報錯；兩個值單位相同時，只需要為乙個數值提供單位即可。

$full-width: 500px;

$sidebar-width: 200px;

.content

」/  」符號被當作除法運算子時有以下幾種情況：

•    如果數值或它的任意部分是儲存在乙個變數中或是函式的返回值。

•    如果數值被圓括號包圍。

•    如果數值是另乙個數學表示式的一部分。

如下所示：

//scss
p 

p 計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 並且被合成為：

如此編譯出來的 css 為：

p b.數字與顏色間運算

算數運算也能將數字和顏色值 一起運算，同樣也是分段運算的。如：

p 計算公式為 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 並且被合成為：

p $content: "hello" + "" + "sass!";

.box:before ";

cursor: e + -resize;}

編譯出來的css：

.box:before

div h1 

//可以寫成：
div 
}//屬性也可以巢狀，比如border-color屬性，可以寫成：
p }//注意，border後面必須加上冒號。

a 

}

.box  

}編譯css:

.box

其實偽類巢狀和屬性巢狀非常類似，只不過他需要借助`&`符號一起配合使用。我們就拿經典的「clearfix」為例吧

編譯出來的 css：

.clearfix

&:after 
}

編譯出來的 css：

clearfix:before, .clearfix:after 
.clearfix:after 

a.選擇器巢狀最大的問題是將使最終的**難以閱讀。開發者需要花費巨大精力計算不同縮排級別下的選擇器具體的表現效果。

b.選擇器越具體則宣告語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。

sass共有兩種注釋風格。

標準的css注釋 /comment/ ，會保留到編譯後的檔案。

單行注釋 // comment，只保留在sass原始檔中，編譯後被省略。

在/*後面加乙個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於宣告版權資訊。

/*! 

重要注釋！
*/

.class1

class2要繼承class1，就要使用@extend命令：

.class2

使用「@mixin」來宣告

a.不帶引數宣告

@mixin border-radius

b.帶引數宣告

@mixin border-radius($radius:5px)

c.複雜的混合巨集

在大括號裡面寫上帶有邏輯關係（@if...@else），幫助更好的做你想做的事情

@mixin box-shadow($shadow...) @else}

@mixin border-radius

button

a.傳乙個不帶值的引數

//定義了乙個不帶任何值的引數「$radius」

@mixin border-radius($radius)

//在呼叫的時候可以給這個混合巨集傳乙個引數值：

.box

b.傳乙個帶值的引數

//定義了乙個帶值的引數「$radius」

@mixin border-radius($radius:3px)

//只需要呼叫預設的混合巨集「border-radius」:

.btn

編譯出來的 css:

.box

但有的時候，頁面中有些元素的圓角值不一樣，那麼可以隨機給混合巨集傳值，如：

.box

編譯出來的 css:

.box

c.傳多個引數

多個引數。在實際呼叫和其呼叫其他混合巨集是一樣的：

//定義

@mixin center($width,$height)

//呼叫

.box-center

編譯出來 css:

.box-center

注意：有乙個特別的引數「…」。當混合巨集傳的引數過多之時，可以使用引數來替代

如：@mixin box-shadow($shadow...) @else

}其最大的不足之處是會生成冗餘的**塊。比如在不同的地方呼叫乙個相同的混合巨集時。如：

//scss

@mixin border-radius
.box 
.btn 

看編譯出來的 css：

.box 
.btn 

//scss

%mt5

%pt5

.btn

編譯出來的css

//css

.btn, .block

.btn, .block span

a.如果你的**塊中涉及到變數，建議使用混合巨集來建立相同的**塊。

b.如果你的**塊不需要專任何變數引數，而且有乙個基類已在檔案中存在，那麼建議使用 sass 的繼承。

@import命令，用來插入外部檔案。

@import

"path/filename.scss"
;

@import

"foo.css"
;

sass基本用法

本文都是以.scss為準 普通變數 sass的變數必須是以 開頭的，後面直接跟變數名 fontsize 12px body 如果變數需要預設值，在變數值的後面加上預設值的宣告 變數的預設值的宣告方式是變數值後加上 default 如下 baselineheight 2 baselineheight ...

SASS的基本語法

了解 sass sass是 css 的預編譯語言，可以把檔案編譯成 css 檔案。sass可以定義變數 可以定義函式 可以有 if 語句 可以有 for 迴圈語句，能使你敲 的速度的變得更高更快更強。sass 檔案 和 scss 檔案的區別 在 scss 檔案裡面和寫 css 的語法基本一致 在 s...

Sass安裝及基本語法

sass 是乙個 css 預處理器。sass 是 css 擴充套件語言，可以幫助我們減少 css 重複的 節省開發時間。sass 完全相容所有版本的 css。sass 擴充套件了 css3，增加了規則 變數 混入 選擇器 繼承 內建函式等等特性。sass 生成良好格式化的 css 易於組織和維護。s...