本文都是以.sCSS為準
普通變量
sass的變量必須是以$開頭的,后面直接跟變量名
$fontSize: 12px;body{ font-size:$fontSize;}如果變量需要默認值,在變量值的后面加上默認值的聲明 變量的默認值的聲明方式是變量值后加上!default; 如下:
$baseLineHeight: 2;$baseLineHeight: 1.5 !default;這樣編譯的結果是2
普通變量的使用:
body{ line-height: $baseLineHeight; }多值變量 多值變量分為list類型(類似js中的數組)和map類型(類似js中的對象) 2.1 list類型 list類型定義
$px: 5px 10px 20px 30px;list類型使用
$linkColor: #08c #333 !default;a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); }}2.2map類型 map數據以key和value成對出現,其中value又可以是list。 map類型定義
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);map類型使用
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}3.跳出嵌套
//單個選擇器跳出.parent-2 { color:#f00; @at-root .child { width:200px; }}//多個選擇器跳出.parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } }}默認@at-root只會跳出選擇器嵌套,而不能跳出@media,如果要跳出這種,則需使用@at-root (without: media)。這個語法的關鍵詞有四個:all(表示所有),rule(表示常規css),media(表示media),我們默認的@at-root其實就是@at-root (without:rule)。
|
新聞熱點
疑難解答