css預編譯--sass進階篇

時間 2019-11-09

標籤 css 編譯 sass 進階欄目 CSS 简体版

原文原文鏈接

基礎篇中主要介紹了一些sass的基本特性，進階篇中，主要是寫一些咱們經常使用的sass控制命令，函數和規則。css

控制命令

可能看過基礎篇的朋友會發如今有些代碼中出現@if @else @each等，熟悉JS條件語句和循環的朋友會比較瞭解這些控制命令的功能所在，這些控制命令是 sass 的一個重要組成部分。前端

@if,@else

@if @else是一個簡單的根據條件來處理樣式塊的SassScript，若是if的條件是true那麼就調用if的樣式塊，不然就調用else的樣式塊，一個簡單的代碼示例bootstrap

@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代碼塊裏的代碼。segmentfault

@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少一個。sass

@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 均可以在主文件中使用。app

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

@media

Sass 中的 @media 指令和 CSS 的使用規則同樣的簡單，但它有另一個功能，能夠嵌套在 CSS 規則中。有點相似 JS 的冒泡功能同樣，若是在樣式中使用 @media 指令，它將冒泡到外面。less

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

@extend

Sass 中的 @extend 是用來擴展選擇器或佔位符。dom

.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 函數
三元函數
自定義函數

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

字符串函數

unquote() 函數主要是用來刪除一個字符串中的引號，若是這個字符串沒有帶有引號，將返回原始的字符串。
quote() 函數恰好與 unquote() 函數功能相反，主要用來給字符串添加引號。若是字符串，自身帶有引號會統一換成雙引號 ""。
To-upper-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!";
}

數字函數

percentage($value)：將一個不帶單位的數轉換成百分比值
round($value)：將數值四捨五入，轉換成一個最接近的整數
ceil($value)：將大於本身的小數轉換成下一位整數
floor($value)：將一個數去除他的小數部分
abs($value)：返回一個數的絕對值
min($numbers…)：找出幾個數值之間的最小值
max($numbers…)：找出幾個數值之間的最大值
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) //1
length(10px 20px (border 1px solid) 2em) //4
length(border 1px solid) //3

nth(10px 20px 30px,1) //10px
nth((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) //true
unitless(100px) //false
unitless(100em) //false
unitless(1 /2 + 2 ) //true
unitless(1px /2 + 2 ) //false

comparable(2px,1%) //false
comparable(2px,1em) //false
comparable(2px,1cm) //true

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

Miscellaneous函數

在這裏把 Miscellaneous 函數稱爲三元條件函數，主要由於他和 JavaScript 中的三元判斷很是的類似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另外一種值：

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

Sass Maps的函數

Sass 的 map 經常被稱爲數據地圖，也有人稱其爲數組，由於他老是以 key:value 成對的出現，但其更像是一個 JSON 數據。

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

要在 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%建立一個顏色 #7aa3b8
hsla(200,30%,60%,.8)//經過h200,s30%，l60%,a80%建立一個顏色 rgba(122, 163, 184, 0.8)
hue(#7ab)//獲得#7ab顏色的色相值 195deg
saturation(#7ab)//獲得#7ab顏色的飽和度值 33.33333%
lightness(#7ab)//獲得#7ab顏色的亮度值 60%
adjust-hue(#f36,150deg) //改變#f36顏色的色相值爲150deg #33ff66
lighten(#f36,50%) //把#f36顏色亮度提升50% #ffffff
darken(#f36,50%) //把#f36顏色亮度下降50% #33000d
saturate(#f36,50%) //把#f36顏色飽和度提升50% #ff3366
desaturate(#f36,50%) //把#f36顏色飽和度下降50% #cc667f
grayscale(#f36) //把#f36顏色變成灰色 #999999
complement(#f36) //#33ffcc
invert(#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庫。這裏推薦一下一個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可根據須要調用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。