CSS是基礎簡單的語句組合，避免不了重復和冗長。沒有傳統編程語言的變量，控制語句等高級特性。所以css編寫低效，往往通過查找替換，大量復制來修改或者編寫。

　　sass為css提供額外的高級功能，使開發更加方便快捷，更易管理。通過sass來編寫代碼，通過sass編譯成具體的css代碼，然后使用。

　　sass語法按照一定規則進行縮進，然后編寫有關css的屬性。可以在scss中直接編寫css，即使不會sass語法特性，css代碼也能通過編譯，只需保存.scss后綴名即可。

　　使用SASS：

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

　　　　　　1.nested：嵌套縮進的CSS代碼，它是默認值；

　　　　　　2.expanded：沒有縮進的擴展的CSS代碼；

　　　　　　3.compact：簡潔格式的CSS代碼；

　　　　　　4.compressed：壓縮后的CSS代碼；

　　　　設置項目：

　　　　　　進入項目，命令行輸入：sass-style compressed style.scss style.css 設置編碼風格，輸入sass-watch sass:css監聽某個文件或目錄，一旦文件改動，就自動生成編譯后的版本；html文件只需簡單引入css文件即可。

　　sass變量：

　　　　定義方法：$name:value

　　　　使用方法：

　　　　　　1.作為字符串：#{$name}

　　　　　　2.作為屬性值：$name

$width:45px; $i:1; .main{color: greenyellow;&.side{font-size: $width;}.side-#{$i}{font-size: 50px;} }

　　sass宏：@mixin

　　　　功能：使用宏，可以避免編寫重復的代碼，依次編寫，多次使用

　　　　不帶參數宏定義：@mixin name{}

　　　　帶參數宏定義：@mixin name($param1,[...]){}

@mixin raius($radius) {-webkit-broder-radius:$radius;-moz-broder-radius:$radius;border-radius: $radius; }.main{a{display: block;height: 10px;width: 10px;background: red;font-size: 12px;@include raius(5px);} }

　　sass樣式嵌套控制：

　　

$width:45px; $i:1; $color:#000000;@mixin raius($radius) {-webkit-broder-radius:$radius;-moz-broder-radius:$radius;border-radius: $radius; }.main{color: greenyellow;&.side{font-size: $width;}.side-#{$i}{font-size: 50px;}a{display: block;height: 10px;width: 10px;background: red;font-size: 12px;@include raius(5px);color: darken($color, 10%)} }

sass進階：

　　sass數據類型：　　

　　sass主要有六種數據類型:數字型(1,2,10px);文本型：單引號，雙引號或者不加都可以(”footer“，‘footer’，footer);顏色值類型(red,#000,rgba(255,255,255,0.2));布爾值類型(true,false);值列表:通過空格或者逗號分隔值(1.5em 1em ; 2em Arial );值映射：一個關鍵詞對應一個值(key1:value1,key2:value2)

　　sass變量的作用域：

　　變量聲明必須在調用變量的語句上面，這樣才能正確的調用變量

　　sass變量沒有塊級作用域，而是隨執行，隨覆蓋，隨調用。調用的前面沒有變量的聲明，就會報錯；有很多變量聲明，就會調用離它最近的那個變量值；

$i:1; .main{$i:2;.side-#{$i}{font-size: 50px;} }

　　sass引用父級：&

　　在嵌套結構中引用父級選擇器，這時候可以用&符號代替父級選擇器

　　讓一切變成字符串：#{}

　　變量能作為屬性值來使用，也能用在選擇器或者屬性上面；需要用#{}將變量變成字符串，這樣就可以用在選擇器或者屬性上面了；

　　sass中的四則運算：暫略

　　深入了解@extend

　　@extend可擴展的選擇器：只能擴展單個選擇器，可以將多個選擇器寫進一條@extend中，用逗號間隔

　　

@mixin raius($radius) {-webkit-broder-radius:$radius;-moz-broder-radius:$radius;border-radius: $radius; } .font-color{color: #fff; } .font-s{font-size: 24px; } .main{color: greenyellow;&.side{font-size: $width;}.side-#{$i}{font-size: 50px;}a{display: block;height: 10px;width: 10px;background: red;@include raius(5px);@extend .font-color , .font-s;} }

　　　@mixin和@extend的區別：

　　　　@mixin定義的是一個片段，這個片段可以是類似變量的一段文字一條屬性，也可以是一整個選擇器和內容，也可以是一個選擇器的一部分代碼。此外還可以傳遞參數，通過參數生成不容的代碼。需要配合@include來配合使用，類似復制的效果，@mixin的內容不會編譯輸出。@mixin可以帶默認參數。

　　　　@extend就是簡單的擴展，基于某個選擇器，已提高復用程度。

@mixin font($color,$font-size:14px){color: $color;font-size: $font-size } p{@include font(red,20px)}

　　@mixin傳遞多值參數：需要在后面加...　　表示這個參數可能包含多條屬性

　　多值參數還可以用在@include中傳值的時候，還可以分解某個變量值

@mixin color($color,$background,$border-c) {color:$color;background: $background;border-color: $border-c } $value:red,blue,yellow; $value-map:(color:red,background:blue,border-c:yellow); p{@include color($value...)}; a{@include color($value-map...)}

　　向@mixin傳遞內容

@mixin wrap-nav {.wrap{@content;} } @include wrap-nav{#nav{background: red;} }

　　sass for循環：簡單的循環，只能使用數字，每次固定一個步長

@for $i from 5 through 1 {.item-#{$i} {width:2em*$i;} }

　　sass while循環：while循環可以自定義步長

$i:6; @while $i>0 {.item-#{$i} {width:2em*$i;}$i:$i-2; }

　　sass each循環遍歷：遍歷一個列表或者映射型的變量，然后循環輸出

$list:a,b,c; @each $anim in list {#{$anim}-icon{background: url('./images/#{$anim}.png')} }

　　sass map被稱為數據地圖，以key:value成對的出現，像一個json數據

　　sass map函數提供了多種方法：

　　　　map-get($map,$key):根據給定的key值返回value

　　　　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判斷map中是否存在對應的value，有返回true，否則false

　　　　keywords($args):返回一個函數參數，這個參數可以動態設置key和value

　　webpack配置sass模塊化處理：

　　　　sass loader模塊加modules: true,開啟css模塊化處理

轉載于:https://www.cnblogs.com/xuxiaoqiangAndHM/p/10952495.html

總結

以上是生活随笔為你收集整理的SASS概念解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。