關於前端CSS預處理器Sass的小知識！

時間 2019-11-09

標籤關於前端 css 預處理 sass 知識欄目 CSS 简体版

原文原文鏈接

前面的話

"CSS預處理器"(css preprocessor)的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。本文將詳細介紹sass的使用javascript

定義

Sass是一門高於CSS的元語言，它能用來清晰地、結構化地描述文件樣式，有着比普通CSS更增強大的功能。
Sass可以提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表php

【SASS和SCSS】css

Sass和SCSS實際上是同一種東西，咱們平時都稱之爲Sass，二者之間不一樣之處有如下兩點：一、文件擴展名不一樣，Sass是以「.sass」後綴爲擴展名，而SCSS是以「.scss」後綴爲擴展名；二、語法書寫方式不一樣，Sass是以嚴格的縮進式語法規則來書寫，不帶大括號 ({})和分號(;)，而SCSS的語法書寫和咱們的CSS語法書寫方式很是相似html

下面爲Sass語法java

$font-stack: Helvetica, sans-serif  //定義變量 $primary-color: #333 //定義變量 body font: 100% $font-stack color: $primary-color

下面爲SCSS語法python

$font-stack: Helvetica, sans-serif;
$primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

編譯出來的CSS爲nginx

body { font: 100% Helvetica, sans-serif; color: #333; }

安裝

在Windows平臺下安裝Ruby須要先有Ruby安裝包。Ruby安裝文件
下載好後，能夠按應用軟件安裝步驟進行安裝Rubygit

在安裝過程當中選擇第二個選項(若不選中，就會出現編譯時找不到Ruby環境的狀況)，以下圖所示github

Ruby安裝完成後，在開始菜單中找到新安裝的Ruby，並啓動Ruby的Command控制面板(Start Command Prompt with Ruby)web

安裝好Ruby以後，接下來就能夠安裝Sass了。打開電腦的命令終端，輸入下面的命令：

gem install sass

【更新Sass】

在命令終端執行下列命令，能夠將sass升級到最高版本

gem update sass

【卸載Sass】

在命令終端執行下列命令，能夠卸載sass

gem uninstall sass

編譯

Sass的編譯包括如下幾種方法：命令編譯、GUI工具編譯和自動化編譯

[注意]在編譯sass時，常見的兩個錯誤是字符編碼錯誤(不支持gbk編碼)和路徑錯誤(不支持中文)

一、命令編譯

命令編譯是指使用電腦中的命令終端，經過輸入Sass指令來編譯Sass。這種編譯方式是最直接也是最簡單的一種方式

【單文件編譯】

sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

【多文件編譯】

下面的命令表示將項目中「sass」文件夾中全部「.scss」(「.sass」)文件編譯成「.css」文件，而且將這些CSS文件都放在項目中「css」文件夾中

sass sass/:css/

在實際編譯過程當中，會發現上面的命令只能一次性編譯。每次保存「.scss」文件以後，都得從新執行一次這樣的命令。如此操做太麻煩，其實還有一種方法，就是在編譯Sass時，開啓「watch」功能，這樣只要代碼進行任何修改，都能自動監測到代碼的變化，而且直接編譯出來：

[注意]冒號的左右兩側必定不要留空格

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css sass --watch sass/test.scss:css/test.css

調試

使用chrome瀏覽器的sourcemap功能能夠將本地的文件和服務器上的文件關聯起來。這樣，經過chrome的開發者工具調試網頁(如更改一個css屬性值)時，本地文件的內容也會相應地發生變化並保存。若是再使用sass的watch命令，在調試sass文件時，就能夠實時保存文件並經過瀏覽器看到效果

以下圖所示，點擊map to network resource，把本地文件關聯到服務器上相應文件。瀏覽器會智能地把項目目錄下的其餘css文件和html文件和服務器上對應的文件都關聯起來

編譯風格

SASS提供四個編譯風格的選項：

nested：嵌套縮進的css代碼，它是默認值。
expanded：沒有縮進的、擴展的css代碼。
compact：簡潔格式的css代碼。 compressed：壓縮後的css代碼。

生產環境當中，通常使用最後一個選項

sass --style compressed test.sass test.css

二、GUI編譯

通常地，使用koala編譯器來對sass進行編譯

三、自動化編譯

使用grunt或gulp能夠配置sass的編譯

下面以grunt爲例，首先須要安裝sass插件

npm install grunt-contrib-sass --save-dev

而後，初始化grunt配置

grunt.initConfig({
  sass: { // Task dist: { // Target options: { // Target options style: 'expanded' }, files: { // Dictionary of files 'main.css': 'main.scss', // 'destination': 'source' 'widgets.css': 'widgets.scss' } } } });

接下來，告訴grunt將使用該插件

grunt.loadNpmTasks('grunt-contrib-sass');

最後，告訴grunt當咱們在終端中輸入grunt時須要作些什麼

grunt.registerTask('default', ['sass']);

語法

數據類型

SassScript 支持六種主要的數據類型：

一、數字(例如 1.二、1三、10px)

二、文本字符串，不管是否有引號(例如 "foo"、'bar'、baz)

三、顏色(例如 blue、#04a3f九、rgba(255, 0, 0, 0.5))

四、布爾值(例如 true、false)

五、空值(例如 null)

六、值列表，用空格或逗號分隔(例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif)

Sass還支持全部其餘CSS屬性值類型，例如Unicode範圍和!important聲明。然而，它不會對這些類型作特殊處理。它們只會被當作不帶引號的字符串看待

註釋

sass有兩種註釋方式，一種是標準的css註釋方式/* */，另外一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會輸入到CSS中

/* *多行註釋 */ body{  padding:5px; } //單行註釋 body{  padding:5px; //5px }

變量

SASS的變量用法相似於php與css語法的結合，全部變量以$變量，變量名和變量值之間用冒號隔開。定義以後能夠在全局範圍內使用

$blue : #1875e7;　 div { color : $blue; }

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中

$side : left;
.rounded {
　　border-#{$side}-radius: 5px; }

【默認變量】

sass的默認變量僅須要在值後面加上!default便可。sass的默認變量通常用來設置默認值，而後根據需求來覆蓋。覆蓋的方式也很簡單，只須要在默認變量以前從新聲明變量便可

//sass style //------------------------------- $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style //------------------------------- body{ line-height:2; }

【特殊變量】

通常咱們定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下(如嵌套在字符串中)等則必需要以#{$variables}形式使用

$borderDirection:       top !default; $baseFontSize: 12px !default; //應用於class和屬性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //應用於複雜的屬性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; }

【全局及局部變量】

在選擇器、函數、混合宏...的裏面定義的變量叫局部變量，它們的外面定義的變量爲全局變量

//scss $color: orange; .block {  color: $color;//調用全局變量 } em { $color: red;//定義局部變量 a {  color: $color;//調用局部變量 } } span {  color: $color;//調用全局變量 } //CSS .block {  color: orange; } em a {  color: red; } span {  color: orange; }

嵌套

選擇器嵌套提供了一個經過局部選擇器相互嵌套實現全局選擇的方法，Sass 的嵌套分爲兩種：一、選擇器嵌套；二、屬性嵌套

【選擇器嵌套】

[注意]在sass嵌套嵌套中，可使用&表示父元素選擇器

#top_nav{  line-height: 40px; li{  float:left; } a{  display: block;  padding: 0 10px;  color: #fff; &:hover{  color:#ddd; } } } //css style //------------------------------- #top_nav{  line-height: 40px; } #top_nav li{  float:left; } #top_nav a{  display: block;  padding: 0 10px;  color: #fff; } #top_nav a:hover{  color:#ddd; }

【屬性嵌套】

CSS有一些屬性前綴相同，只是後綴不同，好比：border-top/border-right，與這個相似的還有 margin、padding、font等

[注意]border後面必須有冒號

//css .box { border-top: 1px solid red; border-bottom: 1px solid green; } //scss .box {  border: {  top: 1px solid red;  bottom: 1px solid green; } }

混合宏

混合宏是能夠重用的代碼塊

在Sass中，使用「@mixin」來聲明一個混合宏

@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }

可使用@include命令，來調用混合宏mixin

button {
 @include border-radius; }

mixin指定參數和缺省值

@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } div{ @include border-radius(10px); }

Sass中的混合宏還提供更爲複雜的狀況，能夠在大括號裏面帶有邏輯關係

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }

Sass在調用相同的混合宏時，並不能智能的將相同的樣式代碼塊合併在一塊兒。這也是 Sass的混合宏最大的不足之處

【佔位符】

佔位符是介於混合宏和變量之間的一個功能

//SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .block { @extend %mt5; span { @extend %pt5; } } //CSS .block { margin-top: 5px; } .block span { padding-top: 5px; }

繼承

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1

.class1{ border: 1px solid black; }

class2要繼承class1，就要使用@extend命令

.class2{
  @extend .class1; font-size:120%; }

Sass中的繼承，能夠繼承類樣式塊中全部樣式代碼，並且編譯出來的CSS會將選擇器合併在一塊兒，造成組合選擇器

//SCSS .btn {  border: 1px solid #ccc;  padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; @extend .btn; } .btn-second { background-color: orange; @extend .btn; } //CSS .btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; } .btn-second { background-clor: orange; }

運算

SASS容許在代碼中使用算式

【注意事項】

一、100px * 2px會報錯，乘法應該寫成100px * 2

二、由於除號/在CSS中在特殊的含義，因此爲了不除法不生效，須要在外面添加一個小括號

三、相似於javascript，sass中的加法也有字符串鏈接的做用

$num: '1' + '1'; body{  top: 10px + 10px;//20  left: 10px - 10px;//0  right: 100px *2;//200  bottom: (100px/2);//50  width: $num;//11 }

語句

【條件語句】

@if指令是一個SassScript，它能夠根據條件來處理樣式塊，若是條件爲true返回一個樣式塊，反之false返回另外一個樣式塊。在Sass中除了@if，還能夠配合@else if或@else一塊兒使用

//scss @mixin blockOrHidden($boolean:true) { @if $boolean {  display: block; } @else {  display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); } //CSS: .block {  display: block; } .hidden {  display: none; }

【循環語句】

for循環

Sass中的for循環有兩種方式

@for $i from <start> through <end> @for $i from <start> to <end>

這兩個的區別是關鍵字through表示包括end，而to則不包括end

//scss @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css .item-1 {  width: 2em; } .item-2 {  width: 4em; } .item-3 {  width: 6em; }

while循環

//SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; } //css .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }

each循環

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

函數

在命令終端開啓sass -i這個命令，至關於開啓Sass的函數計算

sass -i

【字符串函數】

unquote($string)：刪除字符串中的引號

//SCSS .test1 { content: unquote('Hello Sass!') ; } .test3 { content: unquote("I'm Web Designer"); } .test5 { content: unquote('"Hello Sass!"'); } //css .test1 { content: Hello Sass!; } .test3 { content: I'm Web Designer; } .test5 { content: "Hello Sass!"; }

quote($string)：給字符串添加引號，若是字符串自身帶有引號會統一換成雙引號""

//SCSS .test1 { content: quote('Hello Sass!'); } .test2 { content: quote("Hello Sass!"); } .test3 { content: quote(ImWebDesigner); } .test4 { content: quote(' '); } //CSS .test1 { content: "Hello Sass!"; } .test2 { content: "Hello Sass!"; } .test3 { content: "ImWebDesigner"; } .test4 { content: ""; }

To-upper-case()：將字符串小寫字母轉換成大寫字母

//SCSS .test {  text: to-upper-case(aaaaa);  text: to-upper-case(aA-aAAA-aaa); } //CSS .test {  text: AAAAA;  text: AA-AAAA-AAA; }

To-lower-case()：將字符串轉換成小寫字母

//SCSS .test {  text: to-lower-case(AAAAA);  text: to-lower-case(aA-aAAA-aaa); } //CSS .test {  text: aaaaa;  text: aa-aaaa-aaa; }

【數字函數】

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

//scss .footer{ width : percentage(.2) } //css .footer{ width : 20% }

round()將一個數四捨五入爲一個最接近的整數

//scss .footer1 {  width:round(15.8px) } .footer2 {  width:round(3.4em) } //css .footer1 {  width:16px } .footer2 {  width:3em }

ceil()向上取整

//scss .footer1 {  width:ceil(15.8px) } .footer2 {  width:ceil(3.4em) } //css .footer1 {  width:16px } .footer2 {  width:4em }

floor()向下取整

//scss .footer1 {  width:floor(15.8px) } .footer2 {  width:floor(3.4em) } //css .footer1 {  width:15px } .footer2 {  width:3em }

abs()取絕對值

//scss .footer1 {  width:abs(-15.8px) } .footer2 {  width:abs(3.4em) } //css .footer1 {  width:15.7px } .footer2 {  width:3.4em }

min()取最小值，max()取最大值

[注意]min()和max()都只能夠比較相同單位的數值，不然會報錯

//scss div{  height:max(10px,23px);  width:min(10px,23px); } //css div{  height:23px;  width:10px; }

random()用來獲取一個隨機數

//scss div{  color: rgba(200, 150, 40, random()); } //css div {  color: rgba(200, 150, 40, 0.57236); }

【列表函數】

length()用來返回一個列表中有幾個值。length()函數中的列表參數之間使用空格隔開，不能使用逗號，不然函數將會出錯

>> length(10px) 1 >> length(10px 20px (border 1px solid) 2em) 4 >> length(border 1px solid) 3

nth($list,$n)用來指定列表中某個位置的值，nth()函數的起始值爲1

>> 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()用來將兩個列表鏈接合併成一個列表。不過join()只能將兩個列表鏈接成一個列表，若是直接鏈接兩個以上的列表將會報錯

>> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((blue,red),(#abc,#def)) (#0000ff, #ff0000, #aabbcc, #ddeeff) >> join((blue,red),(#abc #def)) (#0000ff, #ff0000, #aabbcc, #ddeeff)

append()用來將某個值插入到列表中，而且處於最末位

>> append(10px 20px ,30px) (10px 20px 30px) >> append((10px,20px),30px) (10px, 20px, 30px) >> append(green,red) (#008000 #ff0000) >> append(red,(green,blue)) (#ff0000 (#008000, #0000ff))

zip()用於將多個列表值轉成一個多維的列表。在使用zip()函數時，每一個單一的列表個數值必須是相同的，不然將會出錯

>> zip(1px 2px 3px,solid dashed dotted,green blue red) ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index()相似於索引同樣，用來找出某個值在列表中所處的位置。起始值是1，不是0

>> index(1px solid red, 1px) 1 >> index(1px solid red, solid) 2 >> index(1px solid red, red) 3

type-of()主要用來判斷一個值是屬於什麼類型

number爲數值型，string爲字符串型，bool爲布爾型，color爲顏色型

>> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "string" >> type-of(true) "bool" >> type-of(false) "bool" >> type-of(#fff) "color" >> type-of(blue) "color" >> type-of(1 / 2 = 1) "string"

unit()用來獲取一個值所使用的單位，碰到複雜的計算時，其能根據運算獲得一個「多單位組合」的值，不過只容許乘、除運算

>> unit(100) "" >> unit(100px) "px" >> unit(20%) "%" >> unit(1em) "em" >> unit(10px * 3em) "em*px" >> unit(10px / 3em) "px/em" >> unit(10px * 2em / 3cm / 1rem) "em/rem"

unitless()用來判斷一個值是否帶有單位，若是不帶單位返回的值爲 true，帶單位返回的值爲 false

>> unitless(100) true >> unitless(100px) false >> unitless(100em) false >> unitless(100%) false >> unitless(1 /2 ) true >> unitless(1 /2 + 2 ) true >> unitless(1px /2 + 2 ) false

comparable()用來判斷兩個數是否能夠進行「加，減」以及「合併」。若是能夠返回值爲true，若是不能夠返回值是false

>> comparable(2px,1%) false >> comparable(2px,1em) false >> comparable(2rem,1em) false >> comparable(2px,1cm) true >> comparable(2px,1mm) true

Miscellaneous()稱爲三元條件函數。該函數有兩個值，當條件成立返回一種值，當條件不成立時返回另外一種值

if($condition,$if-true,$if-false) >> if(true,1px,2px) 1px >> if(false,1px,2px) 2px

【顏色函數】

RGB顏色函數

rgb($red,$green,$blue)根據紅、綠、藍三個值建立一個顏色

rgba($red,$green,$blue,$alpha)根據紅、綠、藍和透明度值建立一個顏色

除了與CSS相同的rgba()格式外，sass中的rgba()還支持rgba(

.overlayout{ background-color:rgba(#773,0.5); }

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

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

blue($color)從一個顏色中獲取其中藍色值

mix($color-1,$color-2,[$weight])把兩種顏色混合在一塊兒。$color-1和$color-2指須要合併的顏色，顏色能夠是任何表達式，也能夠是顏色變量

$weight爲第一個顏色合併所佔的比例(權重)，默認值爲50%，其取值範圍是0~1之間。它是由每一個RGB的百分比來衡量的，固然透明度也會有必定的權重。默認的比例是50%，這意味着兩個顏色各佔一半，若是指定的比例是25%，這意味着第一個顏色所佔比例爲 25%，第二個顏色所佔比例爲75%

mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

HSL顏色函數

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)經過改變一個顏色的色相值，建立一個新的顏色。色相是色彩的首要特徵，是區別各類不一樣色彩的最準確的標準。事實上任何黑白灰之外的顏色都有色相的屬性，而色相也就是由原色、間色和複色來構成的

darken($color,$amount)經過改變顏色的亮度值，讓顏色變暗，建立一個新的顏色

lighten($color,$amount)經過改變顏色的亮度值，讓顏色變亮，建立一個新的顏色

lighten()和darken()兩個函數都是圍繞顏色的亮度值作調整的，其中lighten()函數會讓顏色變得更亮，與之相反的darken()函數會讓顏色變得更暗。這個亮度值能夠是0~1之間，不過經常使用的通常都在3%~20%之間

[注意]當顏色亮度值接近或大於100%，顏色會變成白色；反之顏色亮度值接近或小於0時，顏色會變成黑色

//SCSS $baseColor: #ad141e; .lighten {  background: lighten($baseColor,10%); } .darken{  background: darken($baseColor,10%); } //CSS .lighten {  background: #db1926; } .darken {  background: #7f0f16; }

saturate($color,$amount)經過改變顏色的飽和度值，讓顏色更飽和，從而建立一個新的顏色。飽和度是指色彩的鮮豔程度，也稱色彩的純度

desaturate($color,$amount)經過改變顏色的飽和度值，讓顏色更少的飽和，從而建立出一個新的顏色

saturate()、desaturate()這兩個函數是經過改變顏色的飽和度來獲得一個新的顏色，他們和前面介紹的修改亮度獲得新顏色的方法很是類似

grayscale($color)函數會顏色的飽和度值直接調至0%，因此此函數與desaturate($color,100%)所起的功能是同樣的。通常這個函數能將彩色顏色轉換成不一樣程度的灰色將一個顏色變成灰色

//SCSS $baseColor: #ad141e; .grayscale {  background: grayscale($baseColor); } .desaturate {  background: desaturate($baseColor,100%); } //CSS .grayscale {  background: #616161; } .desaturate {  background: #616161; }

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

透明度顏色函數

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

alphpa()和opacity()很簡單，與前面介紹的red()、green()等函數很相似。函數的主要功能是用來獲取一個顏色的透明度值。若是顏色沒有特別指定透明度，那麼這兩個函數獲得的值都會是1

>> alpha(red) 1 >> alpha(rgba(red,.8)) 0.8 >> opacity(red) 1 >> opacity(rgba(red,.8)) 0.8

opacify()和fade-in()是用來對已有顏色的透明度作一個加法運算，會讓顏色更加不透明。其接受兩個參數，第一個參數是原始顏色，第二個參數是須要增長的透明度值，其取值範圍主要是在0~1之間。當透明度值增長到大於1時，會以1計算，表示顏色不具備任何透明度

>> opacify(rgba(22,34,235,.6),.2) rgba(22, 34, 235, 0.8) >> opacify(rgba(22,34,235,.6),.5) #1622eb >> opacify(hsla(22,34%,23%,.6),.15) rgba(79, 53, 39, 0.75) >> opacify(hsla(22,34%,23%,.6),.415) #4f3527 >> opacify(red,.15) #ff0000 >> opacify(#89adde,.15) #89adde >> fade-in(rgba(23,34,34,.5),.15) rgba(23, 34, 34, 0.65) >> fade-in(rgba(23,34,34,.5),.615) #172222

transparentize()和fade-out()所起做用恰好與opacify()和fade-in()函數相反，讓顏色更加的透明。這兩個函數會讓透明值作減法運算，當計算出來的結果小於0時會以0計算，表示全透明

>> transparentize(red,.5) rgba(255, 0, 0, 0.5) >> transparentize(#fde,.9) rgba(255, 221, 238, 0.1) >> transparentize(rgba(98,233,124,.3),.11) rgba(98, 233, 124, 0.19) >> transparentize(rgba(98,233,124,.3),.51) rgba(98, 233, 124, 0) >> fade-out(red,.9) rgba(255, 0, 0, 0.1) >> fade-out(hsla(98,6%,23%,.5),.1) rgba(58, 62, 55, 0.4) >> fade-out(hsla(98,6%,23%,.5),.6) rgba(58, 62, 55, 0)

數組

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

$map: (
 key1: value1,  key2: value2,  key3: value3 )

首先有一個相似於Sass的變量同樣，用個$加上命名空間來聲明map。後面緊接是一個小括號()，將數據以key:value的形式賦予，其中key和value是成對出現，而且每對之間使用逗號(,)分隔，其中最後一組後面沒有逗號。其中鍵key是用來查找相關聯的值value。使用map 能夠很容易收集鍵的值和動態插入

在Sass中經常使用下面的方式定義變量

$default-color: #fff !default; $primary-color: #22ae39 !default;

使用map能夠更好的進行管理

$color: (
 default: #fff,  primary: #22ae39 );

若是哪天須要新增長顏色變量值，在map中能夠很是方便的添加

$color: (
 default: #fff,  primary: #22ae39,  negative: #d9534f );

對於map，還可讓map嵌套map。其實就是map的某一個key當成map，裏面能夠繼續放一對或者多對key:value

$map: (
 key1: value1,  key2: (  key-1: value-1,  key-2: value-2, ),  key3: value3 );

map嵌套的實用性強，在換膚項目中，每一套皮膚對應的顏色蠻多的，使用map嵌套來管理顏色的變量就很是的有條理性，便於維護與管理

$theme-color: (
 default: (  bgcolor: #fff,  text-color: #444,  link-color: #39f ),  primary:(  bgcolor: #000,  text-color:#fff,  link-color: #93f ),  negative: (  bgcolor: #f36,  text-color: #fefefe,  link-color: #d4e ) );

爲了方便的操做map，在Sass中map自身帶了七個函數

map-get($map,$key)用來根據$key參數，返回$key在$map中對應的value值。若是$key不存在$map中，將返回null值。該函數包含兩個參數：$map表示定義好的map；$key表示須要遍歷的key

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); .btn-dribble{  color: map-get($social-colors,facebook); } //css .btn-dribble {  color: #3b5998; }

若是是多重數組，能夠嵌套使用map-get()函數來獲取值

//scss
$theme-color: (
 default: (  bgcolor: #fff,  text-color: #444,  link-color: #39f ),  primary:(  bgcolor: #000,  text-color:#fff,  link-color: #93f ),  negative: (  bgcolor: #f36,  text-color: #fefefe,  link-color: #d4e ) ); h1{  color:map-get(map-get($theme-color,default),text-color); } //css h1 {  color: #444; }

map-has-key($map,$key)用來判斷map中是否存在參數中的key，若是存在則返回true，不然返回false

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @if map-has-key($social-colors,facebook){ .btn-facebook {  color: map-get($social-colors,facebook); } } @else { @warn "No color found for faceboo in $social-colors map. Property ommitted." } //css .btn-fackbook{  color: #3b5998; }

若是使用上面的寫法，每獲取一個key都須要寫一個if語句，其實能夠自定義函數來解決這個問題

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @function colors($color){ @if not map-has-key($social-colors,$color){ @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; } @return map-get($social-colors,$color); } .btn-dribble {  color: colors(dribble); } .btn-facebook {  color: colors(facebook); } .btn-github {  color: colors(github); } .btn-google {  color: colors(google); } .btn-twitter {  color: colors(twitter); } .btn-weibo {  color: colors(weibo); } //css .btn-dribble {  color: #ea4c89; } .btn-facebook {  color: #3b5998; } .btn-github {  color: #171515; } .btn-google {  color: #db4437; } .btn-twitter {  color: #55acee; }

用each()循環來減小重複

@each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } }

map-keys($map)將返回$map中的全部key。這些值賦予給一個變量，就是一個列表

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @each $i in map-keys($social-colors){ .c-#{$i}{  color: map-get($social-colors,$i); } }; //css .c-dribble {  color: #ea4c89; } .c-facebook {  color: #3b5998; } .c-github {  color: #171515; } .c-google {  color: #db4437; } .c-twitter {  color: #55acee; }

map-values($map)相似於map-keys($map)功能，不一樣的是，map-values($map)獲得的是鍵值，而map-keys($map)獲得的是鍵名

//scss $social-colors: (  dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); @each $val in map-values($social-colors){ .c-#{$val}{  color: $val; } }; //css .c-dribble {  color: #ea4c89; } .c-facebook {  color: #3b5998; } .c-github {  color: #171515; } .c-google {  color: #db4437; } .c-twitter {  color: #55acee; }

map-merge($map1,$map2)用於將$map1和$map2合併，而後獲得一個新的$map。若是$map1和$map2中有相同的$key名，那麼將$map2中的$key會取代$map1中的$key

$color: (
 text: #f36,  link: #f63,  border: #ddd,  backround: #fff ); $typo:(  font-size: 12px,  line-height: 1.6,  border: #ccc,  background: #000 ); $newmap: map-merge($color,$typo); $newmap:(  text: #f36,  link: #f63,  font-size: 12px,  line-height: 1.6,  border: #ccc,  background: #000 );

map-remove($map,$key)用來刪除當前map中的某一個key，從而獲得一個新的map。其返回的值仍是一個map。他並不能直接從一個map中刪除另外一個map，僅能經過刪除map中的某個key獲得新map。若是刪除的key並不存在於map中，那麼map-remove()函數返回的新map和之前的map同樣

$social-colors: (
 dribble: #ea4c89,  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee ); $map:map-remove($social-colors,dribble); $map:(  facebook: #3b5998,  github: #171515,  google: #db4437,  twitter: #55acee );

keywords($args)是一個動態建立map的函數。能夠經過混合宏或函數的參數變建立map。參數也是成對出現，其中$args變成key(會自動去掉$符號)，而$args對應的值就是value

@mixin map($args...){ @debug keywords($args); } @include map( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee ); 在命令終端能夠看到一個@debug信息： DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

指令

Sass支持全部CSS3的@規則，以及一些Sass專屬的規則，也被稱爲「指令(directives)」

【@import】

Sass擴展了CSS的@import規則，讓它可以引入SCSS和Sass文件。全部引入的SCSS和Sass文件都會被合併並輸出一個單一的CSS文件。另外，被導入的文件中所定義的變量或mixins均可以在主文件中使用

Sass會在當前目錄下尋找其餘Sass文件，若是是Rack、Rails或Merb環境中則是Sass文件目錄。也能夠經過:load_paths選項或者在命令行中使用--load-path選項來指定額外的搜索目錄

@import根據文件名引入。默認狀況下，它會尋找Sass文件並直接引入，可是，在少數幾種狀況下，它會被編譯成CSS的@import規則，包括如下幾種狀況：若是文件的擴展名是.css；若是文件名以http://開頭；若是文件名是url()；若是@import包含了任何媒體查詢(mediaqueries)

若是上述狀況都沒有出現，而且擴展名是.scss或.sass，該名稱的Sass或SCSS文件就會被引入。若是沒有擴展名，Sass將試着找出具備.scss或.sass擴展名的同名文件並將其引入

【@media】

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

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

【@extend】

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

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

【@at-root】

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

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

【@debug】

@debug在Sass中是用來調試的，當在Sass的源碼中使用了@debug指令以後，Sass代碼在編譯出錯時，在命令終端會輸出設置的提示Bug:

@debug 10em + 12em; 會輸出： Line 1 DEBUG: 22em

【@error、@warn】

@error和@warn、@debug功能相似，可類比於javascript中的console.error()、console.warn()和console.debug()

實例

下面來使用SCSS來實現一個七色卡片的效果，以下圖所示

首先，要了解顏色模式除了RGB模式，還有HSL模式

h:色調(hue)能夠爲任意整數。0(或360或-360)表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍色，300表示洋紅(當h值大於360時，實際的值等於該值模360後的值)

s:飽和度(saturation)，就是指顏色的深淺度和鮮豔程度。取0-100%範圍的值，其中0表示灰度(沒有該顏色)，100%表示飽和度最高(顏色最鮮豔)

l:亮度(lightness)，取0-100%範圍的值，其中0表示最暗(黑色)，100%表示最亮(白色)

[注意]關於CSS中HSL模式的詳細信息移步至此

因爲對色彩知識並無深刻的瞭解，就以圖片表觀上從左到右亮度逐漸變小爲依據，來寫CSS

下面來分析圖片，從上到下分別是紅、橙、黃、藍、綠、紫、黑七種顏色，共7行。每行都有21列，從左到右，亮度逐漸變小。最左列爲純白，最右列爲純黑。因此，能夠以最中心列的顏色爲起點，向左10列，每列亮度增長10%，最左列亮度爲100%。向右10列，每列亮度減少10%，最右列亮度爲0%

使用量圖工具，量得每一行中心列的顏色值從上到下分別爲：#e0274四、#ec8a00、#fae200、#91de00、#47c9f二、#a500fe、#848484

下面要使用SASS中關於亮度改變的函數：darken()讓顏色變暗和lighten()讓顏色變亮

在lighten()函數中，參數amount爲50%，則爲全白。因此，第1到第10列的參數amount爲從50%到5%；相似地，在darken()函數中，參數amount爲50%，則爲全黑。因此，第12到第21列的參數amount爲從5%到50%

【HTML代碼】

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <div class="box"> <ul class="red"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="orange"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="yellow"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="green"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="blue"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="purple"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> <ul class="grey"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div> </body> </html>

【SASS代碼】

body{margin: 0} ul{margin: 0;padding: 0;list-style:none;overflow: hidden} li{float:left;height: 30px;width: 20px;} //定義colorMap用於儲存每一行中間列的顏色值 $colorMap: ( red: #e02744, orange: #ec8a00, yellow: #fae200, green: #91de00, blue: #47c9f2, purple: #a500fe, grey: #848484 ); //爲一行中的每一個元素設置背景顏色 @mixin changelightness($color){ @for $index from 1 through 21 { //從第一列到第十列，亮度增大值由50%變化到5% @if($index < 11){ //amount表示當前列的亮度 $amount: percentage((11-$index)/20); li:nth-child(#{$index}) { background-color: lighten($color,$amount); } } //第十一列爲中心列，以測量值賦值 @if($index == 11){ li:nth-child(#{$index}){ background-color: $color; } } //從第十二列到第二十一列，亮度減少值由5%變化到50% @if($index > 11){ $amount: percentage(($index - 11)/20); li:nth-child(#{$index}){ background-color: darken($color,$amount); } } } } //經過forEach循環爲每一行(也就是HTML結構中的每個ul)添加樣式 @each $index in map-keys($colorMap){ .#{$index}{ @include changelightness(map-get($colorMap,$index)); } }