Scss基本用法

scss使用$符號來標識變數。變數有作用域，外部不能引用內部變數。在宣告變數時可以引用其他變數。變數名可以與css中的屬性名和選擇器名稱相同，推薦使用中劃線分隔。

$border-width: 1px;
$border: $width solid black;
div 
//編譯後
div

如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中。

$border: border;
div -width: 1px;
}//編譯後
div

sass允許在**中使用算式。

body

可以在規則塊中巢狀規則塊。

可以用>選擇乙個元素的子元素。

可以用+乙個元素後緊跟的某個元素。

可以用~選乙個元素後的同層元素。

div 
} //編譯後
div p

可以用&符號表示父選擇器。

div 
} //編譯後
div:hover

除了css選擇器，屬性也可以進行巢狀。

div 
} //編譯後
div

//單行注釋的內容不會出現在生成的css檔案中。而/* */多行注發布現在原生css不允許的地方也會被抹掉。

div  /* 這行注釋不會被移除 */

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

/*！重要注釋

*/

使用@mixin識別符號定義混合器。通過@include來使用這個混合器。

@mixin mixinname {}
div

可以給混合器傳參。

@mixin color($color) 
div

通過$name: value指定每個引數的值可以忽略引數順序，只需要保證沒有漏掉引數。

@mixin color($color, $width) 
div

可以給引數指定乙個預設值。預設值可以是其他引數的引用。

@mixin color(
$color: red, 
$border-color: $color
)

通過@extend語法實現繼承。

.parent .child //編譯後

.child

任何跟.parent有關的組合選擇器樣式也會被.child以組合選擇器的形式繼承。

.parent a{}		//應用到.child a
h1.parent {} //應用到hl.child

sass提供了一些內建的顏色函式。

lighten(#cc3, 10%)  // 顏色變深函式
darken(#cc3, 10%) // 顏色變淺函式
grayscale(#cc3) // 將該顏色轉換為相對應的灰度顏色
complement(#cc3) // 獲取該顏色值旋轉180度後相對應的顏色

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

@import "path/filename.sass";

@if可以用來判斷，配套的還有@else命令。

div  @else 
}

sass支援for迴圈：

@for $i from 1 to 6  px solid blue;
}}

也支援while迴圈：

$i: 6;
@while $i > 0 
$i: $i - 1;
}

each命令，作用與for類似：

}}sass允許使用者編寫自己的函式。

@function double($n) 
#sidebar

scss基本用法

color red border style 1px solid green box1編譯後得到得css如下 box1 1 father 編譯的css如下 father father son 2 引用父級選擇器 father 編譯的css father father hover 1 基本用法 mix...

scss基本用法總結

工作的時候天天用，面試的時候卻沒了思路，這就是懶得下場。多總結，多整理，才是成長得王道啊。最近換工作，把以前該整理得工作梳理一遍。color f00 a color ff0 b color 009 btn 子元素同層全體組合選擇器 div a h2,h3,h4 這個注釋不會出現在css中，這是注釋...

SCSS 的基本使用

首先，用一句話說明 sass scss的關係 sass就是css的預處理器，scss是sass3版本中引入的新語法特性。然後，我們來看怎麼使用呢？像日常一樣，需要安裝npm 包再使用哦 cnpm i s node sass sass loader，當然這裡你是用npm yarn 安裝都是可以的！我們...

Scss基本用法

scss基本用法

scss基本用法總結

SCSS 的基本使用

相關推薦