Sass-也許你想和CSS玩耍起來（下篇），sass-css

Sass-也許你想和CSS玩耍起來（下篇），sass-css
問心無愧，共勉！sass-也許你想和CSS玩耍起來（上篇）

上篇中主要介紹了一些sass的基本特性。下篇中，主要是寫一些我們常用的sass控制命令，函數和規則。

sass進階控制命令

可能看過上篇的朋友會發現在有些代碼中出現@if,@else,@each等，熟悉JS條件陳述式和迴圈的朋友會比較瞭解這些控制命令的功能所在，這些控制命令是sass的一個重要組成部分。

@if,@else

@if@else是一個簡單的根據條件來處理樣式塊的SassScript，如果if的條件是true那麼就調用if的樣式塊，否則就調用else的樣式塊，一個簡單的程式碼範例

@mixin GOD($SHOW:true) {  @if $SHOW {      display: block;    }    @else {      display: none;    }}.block {  @include GOD;}.hidden{  @include GOD(false);}

上面的代碼中因為.block調用沒有傳參if判斷為true，調用if裡面的代碼塊，.hidden調用GOD的時候傳入了參數false，false覆蓋原有預設參數，if判斷就為false，調用else代碼塊裡的代碼。

@for迴圈

舉一個栗子，我們可能會寫到一個類似bootstrap的柵格網路，col-1，col-2，col-3。。。這時候如果數目較多，可能寫起來會比較麻煩，那麼有了sass我們可以這樣寫

@for $i from 1 through 5 { //產生到col-5  .col-#{$i} { width: 2rem * $i; }}@for $i from 1 to 5 { //產生到col-4  .col-#{$i} { width: 2rem * $i; }}

文法規則是 @for 變數 from 起始 to/through 結束，他有to和through兩種方法來形容“到”，他們的區別是1 to 5最後產生的只到.col-4而 1 through 5是產生到col-5的，to會比through少一個。

@while迴圈

while迴圈和JS中的迴圈類似，我們看一個上面@for迴圈作用一樣的栗子

$number: 5;$number-width: 20px;@while $number > 0 {    .col-#{$number} {        width: $mumber-width * $number;    }    $number: $number - 1;}

@each迴圈

$list: adam john wynn mason kuroir;//$list 就是一個列表@mixin author-images {    @each $author in $list {        .photo-#{$author} {            background: url("/images/avatars/#{$author}.png") no-repeat;        }    }}.author-bio {    @include author-images;}

 

sass的@規則

@import

Sass 擴充了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 檔案。 所有引入的 SCSS 和 Sass 檔案都會被合并並輸出一個單一的 CSS 檔案。 另外，被匯入的檔案中所定義的變數或 mixins 都可以在主檔案中使用。

@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);

@media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。

.sidebar {  width: 300px;  @media screen and (orientation: landscape) {    width: 500px;  }}

@extend

Sass 中的 @extend 是用來延伸選取器或預留位置。

.error {  border: 1px #f00;  background-color: #fdd;}.error.intrusion {  background-image: url("/image/hacked.png");}.seriousError {  @extend .error;  border-width: 3px;}

@at-root

@at-root 從字面上解釋就是跳出根項目。當你選取器嵌套多層之後，想讓某個選取器跳出，此時就可以使用 @at-root。

.a {  color: red;  .b {    color: orange;    .c {      color: yellow;      @at-root .d {        color: green;      }    }  }  }

編譯出來的結果

.a {  color: red;}.a .b {  color: orange;}.a .b .c {  color: yellow;}.d {  color: green;}

@debug，@warn，@error

這三個命令 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了這些指令之後，Sass 代碼在編譯出錯時，在命令終端會輸出你設定的提示 Bug

 函數

sass的函數主要包括

• 字串函數
• 數字函數
• 列表函數
• 顏色函數
• Introspection 函數
• 三元函數
• 自訂函數

下面主要介紹一下這些函數的方法。

字串函數1，unquote()：

unquote() 函數主要是用來刪除一個字串中的引號，如果這個字串沒有帶有引號，將返回原始的字串。

2，quote()：

quote() 函數剛好與 unquote() 函數功能相反，主要用來給字串添加引號。如果字串，自身帶有引號會統一換成雙引號 ""

3，To-upper-case():

To-upper-case() 函數將字串小寫字母轉換成大寫字母。

4，To-lower-case()：

To-lower-case() 函數 與 To-upper-case() 剛好相反，將字串轉換成小寫字母

.test1 {    content:  unquote('Hello Sass!') ;//結果->content: Hello Sass!;}.test2 {    content: quote(Hello Sass!);//結果->content: "Hello Sass!";}.test3 {    content: to-upper-case("Hello Sass!");//結果->content: "HELLO SASS!" ;}.test4 {    content:  to-lower-case("'Hello Sass!'");//結果->content: "hello sass!";}

數字函數

1，percentage($value)：將一個不帶單位的數轉換成百分比值；

2，round($value)：將數值四捨五入，轉換成一個最接近的整數

3，ceil($value)：將大於自己的小數轉換成下一位整數

4，floor($value)：將一個數去除他的小數部分

5，abs($value)：返回一個數的絕對值

6，min($numbers…)：找出幾個數值之間的最小值

7，max($numbers…)：找出幾個數值之間的最大值

8，random(): 擷取隨機數

.div1{    width : percentage(5px / 10px) //20%}.div2{    width : round(5.4px) //5px}.div3{    width : ceil(7.1px) //8px}.div4{    width : floor(9.9px) //9px}.div5{    width : abs(-10px) //10px}.div6{    width : min(5px ,10px) //5px}.div7{    width : max(5px , 10px) //10px}.div8{    width : random()px //鬼才知道的隨機數}

列表函數

length($list)：返回一個列表的長度值；

nth($list, $n)：返回一個列表中指定的某個標籤

 join($list1, $list2, [$separator])：將兩個列給串連在一起，變成一個列表

append($list1, $val, [$separator])：將某個值放在列表的最後

zip($lists…)：將幾個列表結合成一個多維的列表

index($list, $value)：返回一個值在列表中的位置值。

 

length(10px) //1length(10px 20px (border 1px solid) 2em) //4length(border 1px solid) //3nth(10px 20px 30px,1) //10pxnth((Helvetica,Arial,sans-serif),2) //"Arial"nth((1px solid red) border-top green,1) //(1px "solid" #ff0000)join(10px 20px, 30px 40px) //(10px 20px 30px 40px)join((blue,red),(#abc,#def)) //(#0000ff, #ff0000, #aabbcc, #ddeeff)join((blue red), join((#abc #def),(#dee #eff))) //(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)append(10px 20px ,30px) //(10px 20px 30px)zip(1px 2px 3px,solid dashed dotted,green blue red) //((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))index(1px solid red, solid) //2

需要注意的是join() 只能將兩個列表串連成一個列表，如果直接連接兩個以上的列表將會報錯，但很多時候不只碰到兩個列表串連成一個列表，這個時候就需要將多個 join() 函數合并在一起使用。在使用zip()函數時，每個單一的列表個數值必須是相同的。

Introspection函數

Introspection 函數包括了幾個判斷型函數：

• type-of($value)：返回一個值的類型
• unit($number)：返回一個值的單位
• unitless($number)：判斷一個值是否帶有單位
• comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合并

type-of(100) //"number"type-of(100px) //"number"type-of("asdf") //"string"type-of(asdf) //"string"type-of(true) //"bool"type-of(#fff) //"color"unit(100) //""unit(100px) //"px"unit(20%) //"%"unit(10px * 3em) //"em*px"unit(10px * 2em / 3cm / 1rem) //"em/rem"unitless(100) //trueunitless(100px) //falseunitless(100em) //falseunitless(1 /2 + 2 ) //trueunitless(1px /2 + 2 ) //falsecomparable(2px,1%) //falsecomparable(2px,1em) //falsecomparable(2px,1cm) //true

但加、減碰到不同單位時，unit() 函數將會報錯，除 px 與 cm、mm 運算之外,unitless()有單位時返回false。

Miscellaneous函數

在這裡把 Miscellaneous 函數稱為三元條件函數，主要因為他和 JavaScript 中的三元判斷非常的相似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另一種值：

if(true,1px,2px) //1pxif(false,1px,2px) //2px

Map

Sass 的 map 常常被稱為資料地圖，也有人稱其為數組，因為他總是以 key:value 成對的出現，但其更像是一個 JSON 資料。

{"employees": [{ "firstName":"John" , "lastName":"Doe" },{ "firstName":"Anna" , "lastName":"Smith" },{ "firstName":"Peter" , "lastName":"Jones" }]}

Sass Maps的函數

要在 Sass 中擷取變數，或者對 map 做更多有意義的操作，我們必須藉助於 map 的函數功能。在 Sass 中 map 自身帶了七個函數：

• map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。
• map-merge($map1,$map2)：將兩個 map 合并成一個新的 map。
• map-remove($map,$key)：從 map 中刪除一個 key，返回一個新 map。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根據給定的 key 值判斷 map 是否有對應的 value 值，如果有返回 true，否則返回 false。
• keywords($args)：返回一個函數的參數，這個參數可以動態設定 key 和 value。

RGB顏色函數-RGB()顏色函數

在 Sass 的官方文檔中，列出了 Sass 的顏色函數清單，從大的方面主要分為 RGB , HSL 和 Opacity 三大函數，當然其還包括一些其他的顏色函數，比如說 adjust-color 和 change-color 等。

RGB 顏色只是顏色中的一種運算式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍色。在 Sass 中為 RGB 顏色提供六種函數：

• rgb($red,$green,$blue)：根據紅、綠、藍三個值建立一個顏色；
• rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值建立一個顏色；
• red($color)：從一個顏色中擷取其中紅色值；
• green($color)：從一個顏色中擷取其中綠色值；
• blue($color)：從一個顏色中擷取其中藍色值；
• mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

HSL函數簡介

在 Sass 中提供了一系列有關於 HSL 的顏色函數，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。

• hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值建立一個顏色；
• hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值建立一個顏色；
• hue($color)：從一個顏色中擷取色相（hue）值；
• saturation($color)：從一個顏色中擷取飽和度（saturation）值；
• lightness($color)：從一個顏色中擷取亮度（lightness）值；
• adjust-hue($color,$degrees)：通過改變一個顏色的色相值，建立一個新的顏色；
• lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，建立一個新的顏色；
• darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，建立一個新的顏色；
• saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而建立一個新的顏色
• desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而建立出一個新的顏色；
• grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);
• complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);
• invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

hsl(200,30%,60%) //通過h200,s30%，l60%建立一個顏色 #7aa3b8hsla(200,30%,60%,.8)//通過h200,s30%，l60%,a80%建立一個顏色 rgba(122, 163, 184, 0.8)hue(#7ab)//得到#7ab顏色的色相值 195degsaturation(#7ab)//得到#7ab顏色的飽和度值 33.33333%lightness(#7ab)//得到#7ab顏色的亮度值 60%adjust-hue(#f36,150deg) //改變#f36顏色的色相值為150deg #33ff66lighten(#f36,50%) //把#f36顏色亮度提高50% #ffffffdarken(#f36,50%) //把#f36顏色亮度降低50% #33000dsaturate(#f36,50%) //把#f36顏色飽和度提高50% #ff3366desaturate(#f36,50%) //把#f36顏色飽和度降低50% #cc667fgrayscale(#f36) //把#f36顏色變成灰色 #999999complement(#f36) //#33ffccinvert(#f36) //#00cc99

Opacity函數簡介

在 CSS 中除了可以使用 rgba、hsla 和 transform 來控制顏色透明度之外，還可以使用 opacity 來控制，只不過前兩者只是針對顏色上的透明通道做處理，而後者是控制整個元素的透明度。

在 Sass 中，也提供了系列透明函數，只不過這系列的透明函數主要用來處理顏色透明度：

•       alpha($color) /opacity($color)：擷取顏色透明度值；
•       rgba($color, $alpha)：改變顏色的透明度值；
•       opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
•       transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。

自訂函數簡介

上面的一些函數可以說比較雞肋或者話說在平時可能我們用不到，那麼除了使用@mixin來進行一些操作以外，自訂函數是一個很好的選擇，並且在做外掛程式時是十分有用的。

$oneWidth: 10px;  $twoWidth: 40px;    @function widthFn($n) {    @return $n * $twoWidth + ($n - 1) * $oneWidth;  }    .leng {       width: widthFn(5);  }  

 

其實市場上有一些比較好的sass庫。這裡推薦一下一個sass基礎庫Sandal以及基於Sandal（基礎sass庫）擴充的移動端UI庫sheral。

sandal取其“檀香”之意，針對移動端網站為前端人員提供了一些基礎的重設，常用的mixin，如flex布局，等分，水平垂直置中，常用表徵圖等，基於它你可以擴充出更多你需要的UI組件，sheral就是基於sandal的移動端UI庫。

_function.scss整合了所有的基礎功能，並且不輸出任何樣式，而_core.scss則在function的基礎上加入了重設樣式，ext檔案夾則包含了四個擴充檔案，可根據個人需要自由匯入，具體介紹及使用請參考sandal 文檔。

如何使用

sandal，分核心檔案和擴充檔案兩種。其中核心檔案包括重設樣式，@mixin，%等方便調用；而擴充檔案則提供基礎原子類class，表徵圖，網格系統。

核心檔案提供兩個集合檔案以供調用，分別為_function.scss， _core.scss。兩者的區別為function僅提供功能，而core除了提供function的功能，還會會產生一份重設樣式

擴充檔案有四個，分別為_icons.scss，_helper.scss，_grid.scss，_page-slide.scss可根據需要調用