本文簡單的介紹SASS預(yù)處理語言，更多的應(yīng)用請參考官方文檔
一、什么是SASS
二、為什么使用SASS
三、安裝SASS
四、初次嘗試SASS
數(shù)據(jù)類型
SASS中有著如下數(shù)據(jù)類型：
- 數(shù)字：
12310px - 字符串：
"foo"'far'baz（注意baz為“無引號字符串”） - 顏色：
blue#04a3f9rgba(255, 0, 0, 0.5) - 布爾值：
truefalse - 空值：
null - 列表——用空格或者逗號分隔的一組值：
1.5em 1em 0 2em, Helvetica, Arial - map——用小括號擴(kuò)起的一組鍵值對集合
($key1: value1, $key2: value2, …) - arglist——參數(shù)列表，函數(shù)中的變長參數(shù)
變量
-
定義變量：
$var_name : value;SASS中變量的定義是寬松的，如果拿高級寫的語言來考量的話會有時而是字符串時而是數(shù)字的疑惑，所以不要那么做，你不需要講過多的注意力類型這一概念上。
$grayColor : darken(#FFFFFF, 20%); $width : 42px; -
使用變量：SASS中的變量先聲明后引用，（下文中引用到的變量$widht, #grayColor在上文中已經(jīng)聲明，本文以此縮短排版，這并不嚴(yán)謹(jǐn)有時有點濫用需要結(jié)合上下文）
div { color: $grayColor; width: $width; }上面是SCSS代碼，下面是對應(yīng)的CSS代碼，全文如不特殊說明一律采用這種方式div { color: #cccccc; width: 42px; } -
變量的
!default關(guān)鍵字（前面的！不能省）!default關(guān)鍵字表示：為該變量設(shè)置默認(rèn)值，如果該變量已經(jīng)聲明過，則不改變原來值。
$var1: 12; $var1: 24 !default // var的值保持12不變$var2: 24 !default // 直接聲明并定義一個變量$var2，初始化值為24 -
局部變量與全局變量類似于大多數(shù)語言一樣，SASS中擁有局部變量與全局變量的概念，這么做可以避免變量名重復(fù)，引用或更改到了不想更改的其它變量，造成系統(tǒng)的混亂。不包含在選擇器，函數(shù)等塊級結(jié)構(gòu)之內(nèi)，直接在文件中聲明的變量稱之為全局變量，反之則為局部變量。
$color: red; //全局變量 .blk { color: $color; //引用全局的$color，值為red } em { $color: orange; div { color: $color; //引用局部的$color，值為orange } }.blk { color: red; } em div { color: orange; }
列表
CSS中存在有margin: 10px 15px 0 0這類屬性，為了便于處理這類情況SASS中存在有列表的數(shù)值類型，有點類似于大多數(shù)語言中的數(shù)組，列表需要將不同的類型的值用逗號或者空格分隔開，對于列表，SASS提供了一些函數(shù)進(jìn)行處理：
$margins: 2px 4px 0 0;
.btn {
margin-top: nth($margins, 1); //列表的下標(biāo)從1開始計算
}
.btn {
margin-top: 2px;
}
運(yùn)算符
-
+加法可以用于基本的數(shù)字相加，字符串連接
$width: 1px + 2in; $str: 'Hello ' + world; $margins: 12 12 12 1; .btn { width: $width + 4pt; font: $str; margin: margins + 2; }.btn { width: 198.33333px; //不同的單位之間可以相加，但是不兼容的類型是不可以的，比如1px + 2em font: "Hello world"; //加法可以用于字符串的連接 margin: margins2; }TIPS:
+用于字符串連接時結(jié)果是否有引號跟加號左邊的值保持一致，結(jié)果中的引號都會是雙引號（如果想去掉可以加一層#{}，或者使用unquote($string)函數(shù)），而數(shù)字，列表等類型跟字符串連接之前會被轉(zhuǎn)換成有引號字符串。結(jié)果是否有引號的規(guī)則還是按照前面所述。 -
-減號自然不必多說，用于數(shù)值之間的減法，也需要操作數(shù)相互兼容，與
+不同，-不支持字符串操作。 -
*乘號需要左右兩個操作數(shù)至少有一個不帶單位，不然會產(chǎn)生錯誤
.box { width: 10px * 2; height: 4 * 5pt; //height: 4pt * 5pt, 這么寫會報錯 }.box { width: 20px; height: 20pt; } -
/除法有些特殊，因為在CSS中
/已經(jīng)挪作他用，所以在下列幾種情況中才會有正常的表現(xiàn)，不然會作為CSS直接編譯。- 被
()擴(kuò)起來：(100px / 2) - 在表達(dá)式中：
1px + 100px / 2$width / 4
// xxx.scss .btn { width: 100px /2; }// xxx.css .btn { width: 100px /2; //這里的除法被原封不動的保存了 } - 被
-
==!=><>=<=基本的布爾運(yùn)算返回值為
false或true -
if($condition, $if-true, $if-false)其實if不是一個運(yùn)算符而是一個函數(shù)，類似于c語言中的條件運(yùn)算符，if函數(shù)當(dāng)$condition為真返回$if-true，否則返回$if-false，注意這里的if不同于控制流中的
@if
注釋
注釋有以下兩種風(fēng)格
//這一段注釋并不會顯示在生成的CSS文件中
/*這一段注釋會顯示在生成的CSS文件中*/
嵌套
-
選擇器嵌套，這里的選擇器是CSS選擇器
選擇器嵌套針對的是標(biāo)簽的父子（包含）關(guān)系，如果B標(biāo)簽在A標(biāo)簽的內(nèi)部，那么使用選擇器嵌套語法再好不過，需要注意的是嵌套對可讀性的影響，避免濫用選擇器的嵌套。
現(xiàn)在有一段HTML：
<body> <div> <a href="##">Item1<a> <a href="##">Item2<a> <a href="##">Item3<a> </div> </body>// xxx.scss div { a { color: red; body & { //這里的&表示當(dāng)前塊"div a" //body在&的前面，需要提出到全局去解析，不然是沒有意義的 //也就是說這里是"body div a"，而不是"div a body div a" color: green; } } }// xxx.css div a { color: red; } body div a { color: green; } -
屬性嵌套
屬性嵌套針對border-top這類使用
-分割的屬性，可以使用嵌套凸顯層次性。.banner { border: { //注意border后面的":" top: 1px solid red; bottom: 2px solid green; } }.banner { border-top: 1px solid red; border-bottom: 2px solid green; } -
偽類嵌套
偽類嵌套很類似于選擇器嵌套，需要借助&
.banner { &:before, &:after { content: ""; display: block; } }.banner:before, .banner:after { content: ""; display: block; }
Mixin宏
可以使用“混入宏”打到樣式的復(fù)用的目的
-
定義混入宏
-
不帶參數(shù)
@mixin foo_bar { //foo_bar為宏的名字 -webkit-border-radius: 1px; -border-radius: 1px; } -
帶參數(shù)
@mixin foo_bar_with_arg($radius: 1px) { //參數(shù)$radius默認(rèn)值1px -webkit-border-radius: $radius; -border-radius: $radius; }
-
-
使用混入宏
div { @include foo_bar_with_arg(2px); }div { -webkit-border-radius: 2px; -border-radius: 2px; }
繼承
SASS通過@extend關(guān)鍵字使用繼承，繼承可以復(fù)用已存在的樣式塊。
.button {
border: 1px;
font-size: 1.5em;
}
.btn {
background-color: red;
@extend .button;
}
.button, .btn { //相對于@Mixin直接的文本替換，@extend繼承顯得更加智能，生成的CSS更簡潔
border: 1px;
font-size: 1.5em;
}
.btn {
background-color: red;
}
占位符%placeholder
如果我需要繼承一些CSS但是這些CSS不單獨存在某些標(biāo)簽里該怎么辦？
%baz { //不使用@extend調(diào)用的話%placeholder并不產(chǎn)生任何CSS代碼
margin-top: 5px;
}
.btn {
@extend %baz;
margin-bottom: 10px;
}
#context a%foo { //這種詭異的形式也不會直接產(chǎn)生代碼，需經(jīng)過@extend
color: red;
width: 42;
}
.someots {
@extend %foo;
}
.btn {
margin-top: 5px;
}
.btn {
margin-bottom: 10px;
}
#context a.someots {
color: red;
width: 42;
}
插值#{}
插值是另一種本地替換的方式，有些類似于C語言中的宏定義
$arr: (top, bottom);
.btn {
@each $item in $arr { //暫未提及這里的@each in循環(huán)結(jié)構(gòu)
margin-#{$item}: 42px;
}
}
.btn {
margin-top: 42px;
margin-bottom: 42px;
}
TIPS: 插值中又一點需要特別注意的是，所有的 <u>有引號字符串</u> 經(jīng)過插值會轉(zhuǎn)化為 <u>無引號字符串</u>
流程控制
-
@if.block { @if 2 >= 3 { width: 200px; } @elseif 2 > 1 { width: 100px; } @else { width: 300px; } }.block { width: 100px; } -
@forfor循環(huán)有兩種格式，分別以through，to兩個關(guān)鍵字區(qū)分，for循環(huán)可以生成一個范圍區(qū)間，并綁定一個變量給用戶。
for $i from <start> through <end>: $i從<start>到<end>（不包括<start>）for $i from <start> through <end>: $i從<start>到<end>（包括<end>）@for $i from 1 through 3 { .block-#{$i} { width: 100px * $i; } }.block-1 { width: 100px; } .block-2 { width: 200px; } .block-3 { width: 300px; }循環(huán)可以極大的縮短CSS的代碼量，有時CSS中的選擇器可以達(dá)到效果，但是更多場景下靈活的SCSS利用循環(huán)可以極大的提高效率。
-
@while@while用一個布爾量來決策循環(huán)是否結(jié)束。
$i: 1; @while $i <= 3 { .block-#{$i} { width: 100px * $i; } $i: $i + 1; }.block-1 { width: 100px; } .block-2 { width: 200px; } .block-3 { width: 300px; } -
@each@each $var in <list>: 遍歷一個列表，綁定列表中的值到$var上。$nums: red yellow green; @each $color in $nums { .#{$color}_div { color: $color; } }.red_div { color: red; } .yellow_div { color: yellow; } .green_div { color: green; }
常用函數(shù)
-
unquote($string)quote($string)這兩個函數(shù)分別為字符串去除引號（只去除兩端），添加雙引號。
-
to-upper-case($string)to-lower-case($string)將字符串全部轉(zhuǎn)換成大／小寫。
-
一些數(shù)值函數(shù)
percentage($value): 將不帶單位的數(shù)轉(zhuǎn)換成百分?jǐn)?shù)round($value): 將數(shù)值四舍五入ceil($value): 返回一個不小于$value的整數(shù)floor: 返回一個不大于$value的整數(shù)abs($value): 返回$value的絕對值min($numbers...): 返回列表中最小的值max($numbers...): 返回列表中最大的值random(): 獲取一個隨機(jī)數(shù) -
一些列表函數(shù)
length($list): 返回列表長度nth($list, $n): 返回列表的第n個值join($list1, $list2, $separator: auto|comma|space): 合并兩個列表append($list, $val, $peparator: auto|comma|space): 為列表追加值zip($lists...): 將多個列表壓縮成多維度列表index($list, $val): 找到第一個與$val相等的值在$list中的下標(biāo)p -
一些map函數(shù)
map-get($map, $key): 取得$map中$key鍵對應(yīng)的值，沒有則返回nullmap-has-key($map, $key): 判斷$map中是否有鍵$keymap-keys($map): 返回$map中鍵的列表map-values($map): 返回$map中值的列表map-merge($map1, $map2): 返回包含$map1與$map2中所有鍵值對的一個新mapmap-remove($map, $key): 返回從$map中移除了$key為鍵的鍵值對的mapkeywords($args...): 按照給定的參數(shù)動態(tài)創(chuàng)建mapkeywords(c1: #fff, c2: #000) -
內(nèi)省函數(shù)
type-of($value): 返回值的類型unit($number): 返回數(shù)值的單位unitless($number): 判斷值是否有單位comparable($number-1, $number-2): 判斷兩個值是否可以相互比較 -
顏色函數(shù)
rgb($red, $green, $blue): 生成RGB顏色rbga($red, $green, $alpha): 生成RGBA顏色rgba($color, $alpha): 返回$color改變透明度為$alpha之后的顏色red($color): 獲取$color的紅色分量green($color): 獲取$color的綠色分量blue($color): 獲取$color的藍(lán)色分量mix($color-1, $color-2, $weight: 0.5): 混合兩種顏色invert($color): 返回$color的反向色，rgb反向，alpha不變hsl: 生成HSL顏色hsla: 生成HSLA顏色hue($color): 返回$color的色相saturation($color): 返回$color的飽和度lightness($color): 返回$color的亮度adjust-hue($color, $degrees): 調(diào)整色相adjust-hue(#234f33, 45deg)lighten($color, $amount): 變量顏色darken($color, $amount): 變暗顏色saturate($color, $amount): 增強(qiáng)飽和度desaturate($color, $amount): 降低飽和度grayscale($color): 返回$color對應(yīng)的灰色complement($color): 返回與$color色相相反的顏色alpha($color): 獲取透明度opacity($color): 獲取透明度opacify($color, $amount): 降低透明度fade-in($color, $amount): 降低透明度transparentize($color, $amount): 增加透明度fade-out($color, $amount): 增加透明度
自定義函數(shù)
使用@function關(guān)鍵字定義函數(shù)，可以問函數(shù)提供一個參數(shù)列表，在其中可以設(shè)置缺省參數(shù)，或者變長參數(shù)，如果函數(shù)有返回值需要使用@return關(guān)鍵字。
@function foo($arg1, $arg2: 42, $args...) { //$arg2有默認(rèn)值42，$args為變長參數(shù)
@debug 'foo get $arg1: ' + $arg1;
@debug 'foo get $arg2: ' + $arg2;
@debug 'foo get $args: ' + $args;
@return 0;
}
.btn {
width: foo(234, 43, 234, 2, 34, 234)
}
/*
控制臺輸出
DEBUG: foo get $arg1: 234
DEBUG: foo get $arg2: 43
DEBUG: foo get $args: 234, 2, 34, 234
*/
@規(guī)則
SASS支持所有的CSS的@規(guī)則，以及一些自己的擴(kuò)展，也稱為指令（directives）
-
@import
SASS擴(kuò)展了CSS的@import規(guī)則，可以導(dǎo)入其他的SCSS文件，尋找文件的路徑可以是當(dāng)前目錄，或者通過:load_path, —load-path配置
以下幾種情況@import命令編譯為CSS原生規(guī)則
- 導(dǎo)入文件擴(kuò)展名為.css
- 導(dǎo)入文件名以
http://開頭 - 文件名為url()
- 如果@import包含媒體查詢
@import "foo.css"; //后綴為css會編譯為原生規(guī)則 @import "foo.scss"; @import "foo"; //導(dǎo)入文件可以不寫后綴 @import "filea", "fileb"; //導(dǎo)入多個文件 @import "_fileignorecompile" //文件名之前加上_則只導(dǎo)入文件，不進(jìn)行編譯 -
@media
SASS中的@media可以嵌套在CSS規(guī)則中
.block { width: 100px; @media screen and (orientation: landscape) { //@media會浮出到最外層 width: 200px; } } //@media 是可以嵌套的 $media: screen; @media #{$media} { //在@media中使用插值 .btn { @media (orientation: landscape) { width: 500px; } } }.block { width: 100px; } @media screen and (orientation: landscape) { .block { width: 200px; } } @media screen and (orientation: landscape) { .btn { width: 500px; } } -
@at-root
at-root可以讓選擇器跳出到嵌套中.foo { color: red; .bar { color: blue; @at-root .baz { color: white; } } }.foo { color: red; } .foo .bar { color: blue; } .baz { //跳出了嵌套，不在層級結(jié)構(gòu)中 color: white; } -
@debug@warn@error用于向控制臺輸出不同信息
@debug 'Hello, World!'; @warn 42; @error 'ops' + here is some error;
