css預(yù)編譯--sass進(jìn)階篇

周國輝發(fā)布于2019-08-29 15:23 / 3123人閱讀

摘要：字符串函數(shù)函數(shù)主要是用來刪除一個(gè)字符串中的引號，如果這個(gè)字符串沒有帶有引號，將返回原始的字符串。顏色函數(shù)顏色函數(shù)在的官方文檔中，列出了的顏色函數(shù)清單，從大的方面主要分為和三大函數(shù)，當(dāng)然其還包括一些其他的顏色函數(shù)，比如說和等。

基礎(chǔ)篇中主要介紹了一些sass的基本特性，進(jìn)階篇中，主要是寫一些我們常用的sass控制命令，函數(shù)和規(guī)則。

控制命令

可能看過基礎(chǔ)篇的朋友會發(fā)現(xiàn)在有些代碼中出現(xiàn)@if @else @each等，熟悉JS條件語句和循環(huán)的朋友會比較了解這些控制命令的功能所在，這些控制命令是 sass 的一個(gè)重要組成部分。

@if,@else

@if @else是一個(gè)簡單的根據(jù)條件來處理樣式塊的SassScript，如果if的條件是true那么就調(diào)用if的樣式塊，否則就調(diào)用else的樣式塊，一個(gè)簡單的代碼示例

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

.block {
  @include GOD;
}

.hidden{
  @include GOD(false);
}

上面的代碼中因?yàn)?b>.block調(diào)用沒有傳參if判斷為true，調(diào)用if里面的代碼塊，.hidden調(diào)用GOD的時(shí)候傳入了參數(shù)false，false覆蓋原有默認(rèn)參數(shù)，if判斷就為false，調(diào)用else代碼塊里的代碼。

@for循環(huán)

舉一個(gè)栗子，我們可能會寫到一個(gè)類似bootstrap的柵格網(wǎng)絡(luò)，col-1 col-2 col-3這時(shí)候如果數(shù)目較多，可能寫起來會比較麻煩，那么有了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; }
}

語法規(guī)則是 @for 變量 from 起始 to/through 結(jié)束，他有to和through兩種方法來形容到，他們的區(qū)別是1 to 5最后生成的只到.col-4而 1 through 5是生成到 col-5 的，to會比through少一個(gè)。

@while循環(huán)

while循環(huán)和JS中的循環(huán)類似，我們看一個(gè)上面@for循環(huán)作用一樣的栗子

$number: 5;
$number-width: 20px;

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

@each循環(huán)

$list: adam john wynn mason kuroir;//$list 就是一個(gè)列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

sass的@規(guī)則 @import

Sass 擴(kuò)展了 CSS 的 @import 規(guī)則，讓它能夠引入 SCSS 和 Sass 文件。所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個(gè)單一的 CSS 文件。另外，被導(dǎo)入的文件中所定義的變量或 mixins 都可以在主文件中使用。

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

@media

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

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

@extend

Sass 中的 @extend 是用來擴(kuò)展選擇器或占位符。

.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 從字面上解釋就是跳出根元素。當(dāng)你選擇器嵌套多層之后，想讓某個(gè)選擇器跳出，此時(shí)就可以使用 @at-root。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}

編譯出來的結(jié)果:

.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}

@debug，@warn，@error

這三個(gè)命令在 Sass 中是用來調(diào)試的，當(dāng)你的在 Sass 的源碼中使用了這些指令之后，Sass 代碼在編譯出錯(cuò)時(shí)，在命令終端會輸出你設(shè)置的提示 Bug。

函數(shù)

sass的函數(shù)主要包括

字符串函數(shù)

數(shù)字函數(shù)

列表函數(shù)

顏色函數(shù)

Introspection 函數(shù)

三元函數(shù)

自定義函數(shù)

下面主要介紹一下這些函數(shù)的方法。

字符串函數(shù)

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

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

To-upper-case() 函數(shù)將字符串小寫字母轉(zhuǎn)換成大寫字母。

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

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

數(shù)字函數(shù)

percentage($value)：將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值

round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)

ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)

floor($value)：將一個(gè)數(shù)去除他的小數(shù)部分

abs($value)：返回一個(gè)數(shù)的絕對值

min($numbers…)：找出幾個(gè)數(shù)值之間的最小值

max($numbers…)：找出幾個(gè)數(shù)值之間的最大值

random()：獲取隨機(jī)數(shù)

.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 //鬼才知道的隨機(jī)數(shù)
}

列表函數(shù)

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

nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽

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

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

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

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

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() 只能將兩個(gè)列表連接成一個(gè)列表，如果直接連接兩個(gè)以上的列表將會報(bào)錯(cuò)，但很多時(shí)候不只碰到兩個(gè)列表連接成一個(gè)列表，這個(gè)時(shí)候就需要將多個(gè) join() 函數(shù)合并在一起使用。在使用zip()函數(shù)時(shí)，每個(gè)單一的列表個(gè)數(shù)值必須是相同的。

Introspection函數(shù)

Introspection 函數(shù)包括了幾個(gè)判斷型函數(shù)：

type-of($value)：返回一個(gè)值的類型

unit($number)：返回一個(gè)值的單位

unitless($number)：判斷一個(gè)值是否帶有單位

comparable($number-1, $number-2)：判斷兩個(gè)值是否可以做加、減和合并

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

但加、減碰到不同單位時(shí)，unit() 函數(shù)將會報(bào)錯(cuò)，除 px 與 cm、mm 運(yùn)算之外,unitless()有單位時(shí)返回false。

Miscellaneous函數(shù)

在這里把 Miscellaneous 函數(shù)稱為三元條件函數(shù)，主要因?yàn)樗?JavaScript 中的三元判斷非常的相似。他有兩個(gè)值，當(dāng)條件成立返回一種值，當(dāng)條件不成立時(shí)返回另一種值：

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

Sass Maps的函數(shù)

Sass 的 map 常常被稱為數(shù)據(jù)地圖，也有人稱其為數(shù)組，因?yàn)樗偸且?key:value 成對的出現(xiàn)，但其更像是一個(gè) JSON 數(shù)據(jù)。

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

要在 Sass 中獲取變量，或者對 map 做更多有意義的操作，我們必須借助于 map 的函數(shù)功能。在 Sass 中 map 自身帶了七個(gè)函數(shù)：

map-get($map,$key)：根據(jù)給定的 key 值，返回 map 中相關(guān)的值。

map-merge($map1,$map2)：將兩個(gè) map 合并成一個(gè)新的 map。

map-remove($map,$key)：從 map 中刪除一個(gè) key，返回一個(gè)新 map。

map-keys($map)：返回 map 中所有的 key。

map-values($map)：返回 map 中所有的 value。

map-has-key($map,$key)：根據(jù)給定的 key 值判斷 map 是否有對應(yīng)的 value 值，如果有返回 true，否則返回 false。

keywords($args)：返回一個(gè)函數(shù)的參數(shù)，這個(gè)參數(shù)可以動態(tài)的設(shè)置 key 和 value。

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

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

RGB 顏色只是顏色中的一種表達(dá)式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍(lán)色。在 Sass 中為 RGB 顏色提供六種函數(shù)：

rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色；

rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色；

red($color)：從一個(gè)顏色中獲取其中紅色值；

green($color)：從一個(gè)顏色中獲取其中綠色值；

blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值；

mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

HSL函數(shù)簡介

在 Sass 中提供了一系列有關(guān)于 HSL 的顏色函數(shù)，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。

hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色；

hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色；

hue($color)：從一個(gè)顏色中獲取色相（hue）值；

saturation($color)：從一個(gè)顏色中獲取飽和度（saturation）值；

lightness($color)：從一個(gè)顏色中獲取亮度（lightness）值；

adjust-hue($color,$degrees)：通過改變一個(gè)顏色的色相值，創(chuàng)建一個(gè)新的顏色；

lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個(gè)新的顏色；

darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個(gè)新的顏色；

saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創(chuàng)建一個(gè)新的顏色

desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創(chuàng)建出一個(gè)新的顏色；

grayscale($color)：將一個(gè)顏色變成灰色，相當(dāng)于desaturate($color,100%);

complement($color)：返回一個(gè)補(bǔ)充色，相當(dāng)于adjust-hue($color,180deg);

invert($color)：反回一個(gè)反相色，紅、綠、藍(lán)色值倒過來，而透明度不變。

hsl(200,30%,60%) //通過h200,s30%，l60%創(chuàng)建一個(gè)顏色 #7aa3b8
hsla(200,30%,60%,.8)//通過h200,s30%，l60%,a80%創(chuàng)建一個(gè)顏色 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函數(shù)簡介

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

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

alpha($color) /opacity($color)：獲取顏色透明度值；

rgba($color, $alpha)：改變顏色的透明度值；

opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；

transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。

自定義函數(shù)簡介

上面的一些函數(shù)可以說比較雞肋或者話說在平時(shí)可能我們用不到，那么除了使用 @mixin 來進(jìn)行一些操作以外，自定義函數(shù)是一個(gè)很好的選擇，并且在做插件時(shí)是十分有用的。

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

sass庫

其實(shí)市場上有一些比較好的sass庫。這里推薦一下一個(gè)sass基礎(chǔ)庫Sandal以及基于Sandal（基礎(chǔ)sass庫）擴(kuò)展的移動端UI庫sheral。

sandal取其“檀香”之意，針對移動端站點(diǎn)為前端人員提供了一些基礎(chǔ)的重置，常用的mixin，如flex布局，等分，水平垂直居中，常用圖標(biāo)等，基于它你可以擴(kuò)展出更多你需要的UI組件，sheral就是基于sandal的移動端UI庫。

_function.scss集成了所有的基礎(chǔ)功能，并且不輸出任何樣式，而_core.scss則在function的基礎(chǔ)上加入了重置樣式，ext文件夾則包含了四個(gè)擴(kuò)展文件，可根據(jù)個(gè)人需要自由導(dǎo)入，具體介紹及使用請參考sandal文檔。

如何使用

sandal，分核心文件和擴(kuò)展文件兩種。其中核心文件包括重置樣式，@mixin，%等方便調(diào)用；而擴(kuò)展文件則提供基礎(chǔ)原子類class，圖標(biāo)，網(wǎng)格系統(tǒng)。

核心文件提供兩個(gè)集合文件以供調(diào)用，分別為_function.scss， _core.scss。兩者的區(qū)別為function僅提供功能，而core除了提供function的功能，還會會生成一份重置樣式

擴(kuò)展文件有四個(gè)，分別為_icons.scss，_helper.scss，_grid.scss，_page-slide.scss可根據(jù)需要調(diào)用。

云服務(wù)器 GPU云服務(wù)器進(jìn)階篇 webrtc進(jìn)階信令篇 webrtc進(jìn)階-信令篇預(yù)編譯階段

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113282.html

發(fā)表評論

登陸后可評論

0條評論

周國輝

男|高級講師

我要關(guān)注我要私信

TA的文章

Css打字機(jī)效果

閱讀 2373·2019-08-30 15:44
css filter濾鏡的實(shí)例講解

閱讀 1307·2019-08-30 13:01
徹底搞懂JS事件冒泡與捕獲

閱讀 3343·2019-08-30 11:22
css預(yù)編譯--sass進(jìn)階篇

閱讀 3124·2019-08-29 15:23
input下拉列表選中后背景變黃色

閱讀 1646·2019-08-29 12:22
網(wǎng)頁上渲染數(shù)學(xué)公式

閱讀 3413·2019-08-26 13:58
this的指向問題

閱讀 3478·2019-08-26 12:17
如何利用showdoc自動生成API文檔

閱讀 3513·2019-08-26 12:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

css預(yù)編譯--sass進(jìn)階篇

相關(guān)文章

css預(yù)編譯--sass基礎(chǔ)篇

**大話css預(yù)編譯處理（一）通讀介紹篇**

**大話css預(yù)編譯處理（二）安裝使用篇**

CSS預(yù)編譯器

webpack進(jìn)階之loader篇

發(fā)表評論

0條評論

周國輝

男|高級講師

TA的文章

Css打字機(jī)效果

css filter濾鏡的實(shí)例講解

徹底搞懂JS事件冒泡與捕獲