前置處理器Sass如何使用

這次給大家帶來前置處理器Sass如何使用，使用前置處理器Sass的注意事項有哪些，下面就是實戰案例，一起來看一下。

Sass 是一款強化 CSS 的協助工具輔助，它在 CSS 文法的基礎上增加了變數 (variables)、嵌套 (nested rules)、混合 (mixins)、匯入 (inline imports) 等進階功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式檔案，以及更高效地開發項目。

1. 特色功能

1. 完全相容 CSS3

2. 在 CSS 基礎上增加變數、嵌套 (nesting)、混合 (mixins) 等功能

3. 通過函數進行顏色值與屬性值的運算

4. 提供控制指令 (control directives)等進階功能

5. 自訂輸出格式

檔案尾碼名稱：sass有兩種尾碼名檔案，一種尾碼名為sass，不使用大括弧和分號；另一種就是我們這裡使用的scss檔案，這種和我們平時寫的css檔案格式差不多，使用大括弧和分號。而本教程中所說的所有sass檔案都指尾碼名為scss的檔案。在此也建議使用尾碼名為scss的檔案，以避免sass尾碼名的嚴格格式要求報錯。

//檔案尾碼名為sass的文法body  background: #eee  font-size:12pxp  background: #0982c1//檔案尾碼名為scss的文法  body {  background: #eee;  font-size:12px;}p{  background: #0982c1;}

2. Sass、Less文法比較

2.1 Sass與Less不同之處

1. 編譯環境不一樣——Sass基於Ruby等伺服器端環境編譯,Less既可以支援伺服器端編譯也可在用戶端（瀏覽器環境）編譯

2. 變數符不一樣——Sass使用$標記法宣告變數，Less使用@標記法宣告變數

3. 對於條件陳述式的支援不一樣——Sass支援複雜的條件陳述式（類似於if..else..），Less僅支援簡單的條件陳述式(類似於if()..)

4. 範圍——Sass局部修改變數可影響全域變數，Less則只會在局部範圍生效。

5. 引用外部CSS檔案方式不同——Sass預設引入.sass或.scss檔案時可忽略尾碼，Less則需要通過關鍵字配置來控制引入檔案如何處理。

2.2 Sass與Less相似的地方

1. 混入(Mixins)——類似於函數或者宏，並且可以傳遞參數；

2. 嵌套規則——class中嵌套class，從而減少重複的代碼；

3. 運算——CSS中運用加減乘除計算各種數值以及字串等；

4. 顏色功能——可以通過內建函數編輯顏色；

5. 命名空間(namespace)——分組樣式，從而可以被調用；

3. Sass文法主要功能介紹

3.1 CSS功能擴充

嵌套規則

Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選取器作為父選取器，嵌套功能避免了重複輸入父選取器，而且令複雜的 CSS 結構更易於管理，例如：

//sass style or less style#main p {  color: #00ff00;  width: 97%;  .redbox {    background-color: #ff0000;    color: #000000;  }}//css style#main p {color: #00ff00;width: 97%; }#main p .redbox {  background-color: #ff0000;  color: #000000; }

父選取器 &

在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選取器，例如，當給某個元素設定 hover 樣式時，或者當 body 元素有某個 classname 時，可以用 & 代表嵌套規則外層的父選取器。

//sass style or less stylea {  font-weight: bold;  text-decoration: none;  &:hover { text-decoration: underline; }  body.firefox & { font-weight: normal; }}//css stylea {font-weight: bold;text-decoration: none; }a:hover {  text-decoration: underline; }body.firefox a {  font-weight: normal; }

屬性嵌套

有些 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。為了便於管理這樣的屬性，同時也為了避免了重複輸入，Sass 允許將屬性嵌套在命名空間中，例如：

//sass style.funky {  font: {    family: fantasy;    size: 30em;    weight: bold;  }}//css style.funky {  font-family: fantasy;  font-size: 30em;  font-weight: bold; }

命名空間也可以包含自己的屬性值，例如：

//sass style.funky {  font: 20px/24px {    family: fantasy;    weight: bold;  }}//css style.funky {  font: 20px/24px;    font-family: fantasy;    font-weight: bold; }

3.2匯入

sass的匯入(@import)規則和CSS的有所不同，編譯時間會將@import的scss檔案合并進來只產生一個CSS檔案。但是如果你在sass檔案中匯入css檔案如 @import ‘reset.css’，那效果跟普通CSS匯入樣式檔案一樣，匯入的css檔案不會合并到編譯後的檔案中，而是以 @import 方式存在。

所有的sass匯入檔案都可以忽略尾碼名.scss。一般來說基礎的檔案命名方法以_開頭，如_mixin.scss。這種檔案在匯入的時候可以不寫底線，可寫成@import “mixin”。

less的匯入(@import)文法：@import (keyword) “filename”;

多個關鍵字 @import 是允許的，你必須使用逗號分隔關鍵字：example: @import (optional, reference) “foo.less”;

1. reference: 使用該less檔案但是不輸出它

2. inline: 包括在源檔案中輸出，但是不作處理

3. less: 將該檔案視為less檔案，無論其副檔名為什麼

4. css: 將檔案視為css檔案，無論副檔名為什麼

5. once: 該檔案僅可匯入一次 (預設)

6. multiple: 該檔案可以多次匯入

7. optional: 當沒有發現檔案時仍然編譯

匯入檔案程式碼範例：

/*被匯入sass檔案a.scss，less檔案a.less：*///a.scss or a.less//-------------------------------body {  background: #eee;}/*需要匯入樣式的sass檔案b.scss，less檔案b.less：*/@import "reset.css";@import "a";p{  background: #0982c1;}   /*轉譯出來的b.css樣式：*/@import "reset.css";body {  background: #eee;}p{  background: #0982c1;}

根據上面的代碼可以看出，b.scss編譯後，reset.css繼續保持import的方式，而a.scss則被整合進來了。同理，less中也是這樣處理的。

3.3 注釋 /* */ 與 //

Sass 支援標準的 CSS 多行注釋 /* */，以及單行注釋 //，前者會被完整輸出到編譯後的 CSS 檔案中，而後者則不會。Less中不用擔心這一點，Less中多行注釋 /* */，以及單行注釋 //都可以隨意使用，都會在編譯過程中被保留。例如：

//sass style/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */body { color: black; }// These comments are only one line long each.// They won't appear in the CSS output,// since they use the single-line comment syntax.a { color: green; }//css style/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */body {  color: black; }a {  color: green; }

3.4 SassScript

變數 $

Sass的變數必須是$開頭，後面緊跟變數名，如果值後面加上!default則表示預設值。Less的變數與Sass類似，只是使用符號不同，Less中採用的是@

//sass style//-------------------------------$fontSize: 12px;body{    font-size:$fontSize;}  //less style//-------------------------------@fontSize: 12px;body{    font-size:@fontSize;}//css style//-------------------------------body{    font-size:12px;}

變數預設值

sass的預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在使用預設變數之前重新聲明下變數即可；預設變數的價值在進行組件化開發的時候會非常有用。

//sass style//-------------------------------$baseLineHeight:  1.5 !default;body{    line-height: $baseLineHeight; }//css style//-------------------------------body{    line-height:1.5;}/*覆蓋預設值*///sass style//-------------------------------$baseLineHeight:  2;$baseLineHeight:  1.5 !default;body{    line-height: $baseLineHeight; }//css style//-------------------------------body{    line-height:2;}

變數 #{} 的使用形式

一般我們定義的變數都為屬性值，可直接使用，但是如果變數作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

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

多值變數 list

簡單來說list類型有點像js中的數組。list資料可通過空格，逗號或小括弧分隔多個值，可用nth($var,$index)取值。

關於list資料操作還有很多其他函數如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

定義：

//一維資料$px: 5px 10px 20px 30px;//二維資料，相當於js中的二維數組$px: 5px 10px, 20px 30px;$px: (5px 10px) (20px 30px);

使用方法：

//sass style//-------------------------------$linkColor:  #08c #333 !default;//第一個值為預設值，第二個滑鼠滑過值a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}//css style//-------------------------------a{  color:#08c;}a:hover{  color:#333;}

多值變數 map

簡單來說map類型有點像es6文法中的map資料結構。map資料以key和value成對出現，其中value又可以是list。

格式為：$map: (key1: value1, key2: value2, key3: value3);可通過map-get($map,$key)取值。關於map資料還有很多其他函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

定義：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用方法：

//sass style//-------------------------------$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }}//css style//-------------------------------h1 {  font-size: 2em; }h2 {  font-size: 1.5em; }h3 {  font-size: 1.2em; }

變數範圍

Sass和Less中的變數範圍分別類似與javascript中的兩種變數申明方式，下面一段代碼可以對比出變數聲明時的不同處理方式。

Sass中的變數賦值直接修改全域變數，Less中的變數賦值可只在局部生效。

//Sass style$color:red; p{   $color:blue;   color:$color;//blue } a{   color:$color;//blue }//Less style@color:red; p{   @color:blue;   color:@color;//blue } a{   color:@color;//red }

3.5 混合(mixin)

sass中使用@mixin聲明混合，可以傳遞參數，也可以給參數設定預設值。聲明的@mixin通過@include來調用；在less中只需要將定義好的class用類似函數的方式直接引用。

無參數 mixin

//sass style@mixin center-block {    margin-left:auto;    margin-right:auto;}.demo{    @include center-block;}//less style.center-block {    margin-left:auto;    margin-right:auto;}.demo{    .center-block;}//css style.demo{    margin-left:auto;    margin-right:auto;}

有參數 mixin

//sass style@mixin opacity($opacity:50) {  opacity: $opacity / 100;  filter: alpha(opacity=$opacity);}.opacity-80{  @include opacity(80); //傳遞參數}//less style.opacity(@opacity:50) {  opacity: @opacity / 100;  filter: alpha(opacity=@opacity);}.opacity-80{  .opacity(80); //傳遞參數}//css style.opacity-80{  opacity: .8;  filter: alpha(opacity=80);}

多個參數 mixin

Sass調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，後面不足的使用預設值，如不足的沒有預設值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入；Less中使用方法類似。

//sass style   @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){    border-bottom:$border;    padding-top:$padding;    padding-bottom:$padding;  }.imgtext-h li{    @include horizontal-line(1px solid #ccc);}//less style.horizontal-line(@border:1px dashed #ccc, @padding:10px){    border-bottom:@border;    padding-top:@padding;    padding-bottom:@padding;  }.imgtext-h li{    .horizontal-line(1px solid #ccc);}//css style.imgtext-h li {    border-bottom: 1px solid #cccccc;    padding-top: 10px;    padding-bottom: 10px;}

多組值參數 mixin

Sass中如果一個參數可以有多組值，如box-shadow、transition等，那麼參數則需要在變數後加三個點表示，如$variables…；Less表示不定參數時可以直接使用 … 表示，並用@arguments表示所有參數

//sass style   //box-shadow可以有多組值，所以在變數參數後面添加...@mixin box-shadow($shadow...) {  -webkit-box-shadow:$shadow;  box-shadow:$shadow;}.box{  border:1px solid #ccc;  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}//less style.box-shadow(...) {  -webkit-box-shadow:@arguments;  box-shadow:@arguments;}.box{  border:1px solid #ccc;  .box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}//css style.box{  border:1px solid #ccc;  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);}

3.6 運算

sass具有運算的特性，可以對數值型的Value(如：數字、顏色、變數、字串等)進行加減乘除四則運算。請注意運算子前後請留一個空格，不然會出錯。

//計算數值、變數$baseFontSize:          14px !default;$baseLineHeight:        2 !default;$baseGap:               $baseFontSize * $baseLineHeight !default; // => 28px$halfBaseGap:           $baseGap / 4  !default; // => 7px$samllFontSize:         $baseFontSize - 2px  !default; // => 12px$_columns:              12 !default;  $_column-width:         60px !default;  $_gutter:               20px !default;     $_gridsystem-width:     $_columns * ($_column-width + $_gutter); // => 960px//計算顏色p {  color: #010203 + #040506; // => #050709}//計算字串p:before {  content: "Foo " + Bar; // => "Foo Bar"  font-family: sans- + "serif"; // => sans-serif}

3.7 控制指令

SassScript 提供了一些基礎的控制指令，比如在滿足一定條件時引用樣式，或者定義範圍重複輸出格式。控制指令是一種進階功能，日常編寫過程中並不常用到，主要與混合指令 (mixin) 配合使用。

@if

//sass stylep {  @if 1 + 1 == 2 { border: 1px solid; }  @if 5 < 3 { border: 2px dotted; }  @if null  { border: 3px double; }}//css stylep {border: 1px solid; }//sass style$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}//less style@type: monster;p (@type) when (@type = ocean){color: blue;}p (@type) when (@type = matador){color: red;}p (@type) when (@type = monster){color: green;}p (@type) when (@type = dark){color: black;}//css stylep {color: green; }

@for

@for 指令包含兩種格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何變數，比如 $i；<start> 和 <end> 必須是整數值。

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

@each

文法為：@each $var in <list or map>。其中$var表示變數，而list和map表示list類型資料和map類型資料。

單個欄位list資料迴圈：

//sass style$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');  }}//css style.puma-icon {  background-image: url('/images/puma.png'); }.sea-slug-icon {  background-image: url('/images/sea-slug.png'); }.egret-icon {  background-image: url('/images/egret.png'); }.salamander-icon {  background-image: url('/images/salamander.png'); }

多個欄位list資料迴圈：

//sass style//-------------------------------$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);@each $animal, $color, $cursor in $animal-data {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');    border: 2px solid $color;    cursor: $cursor;  }}//css style//-------------------------------.puma-icon {  background-image: url('/images/puma.png');  border: 2px solid black;  cursor: default; }.sea-slug-icon {  background-image: url('/images/sea-slug.png');  border: 2px solid blue;  cursor: pointer; }.egret-icon {  background-image: url('/images/egret.png');  border: 2px solid white;  cursor: move; }

多個欄位map資料迴圈：

//sass style//-------------------------------$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }}//css style//-------------------------------h1 {  font-size: 2em; }h2 {  font-size: 1.5em; }h3 {  font-size: 1.2em; }

@extend

@extend 的作用是將重複使用的樣式 (.error) 延伸 (extend) 給需要包含這個樣式的特殊樣式（.seriousError），例子：

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

3.8 函數指令

Sass 支援自訂函數，並能在任何屬性值或 Sass script 中使用：

//sass style//-------------------------------$grid-width: 40px;$gutter-width: 10px;@function grid-width($n) {  @return $n * $grid-width + ($n - 1) * $gutter-width;}#sidebar { width: grid-width(5); }//css style//-------------------------------#sidebar {  width: 240px; }

與 mixin 相同，也可以傳遞若干個全域變數給函數作為參數。一個函數可以含有多條語句，需要調用 @return 輸出結果。

Sass 函數允許使用關鍵詞參數，上面的例子也可以寫成：

//關鍵詞參數調用形式#sidebar { width: grid-width($n: 5); }

雖然不夠簡明，但是閱讀起來會更方便。關鍵詞參數給函數提供了更靈活的介面，以及容易調用的參數。關鍵詞參數可以打亂順序使用，如果使用預設值也可以省缺，另外，參數名被視為變數名，底線、虛線可以互換使用。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

毛毛蟲爬行動畫怎樣實現

重繪與重排如何使用

Canvas製作旋轉太極的動畫