sass的多種用法
主要歸納總結sass的常見用法，作為個人筆記使用，部分知識點並不仔細講解。具體可參考文檔：sass官網
一、嵌套
.svg{
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
path{
transition: all 500ms ease;
}
}
注意嵌套中常用的&符號。
除了選擇器的嵌套，還有屬性的嵌套：
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
二、變量的使用
sass使用$符號來標識變量。
注意變量是有作用域的，與js變量作用域類似。
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
三、混合器@mixin
可以通過sass的混合器實現大段樣式的重用。(例如固定的樣式：清楚浮動，文字超出使用省略號等，或者是網站統一的按鈕樣式等。)
比如清除浮動：
@mixin clearfix(){
&:after{
display: block;
content: "";
clear: both;
}
}
然后就可以在你的樣式表中通過@include來使用這個混合器.
.box{
@include clearfix;
}
1、混合器傳參
當@include混合器時，參數其實就是可以賦值給css屬性值的變量。
@mixin multi-text($width, $row) {
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
}
p{
@include multi-text(350px,2);
}
當使用@include混合器時，有時候可能會很難區分每個參數是什么意思，參數之間是一個什么樣的順序。為了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值。這種形式的傳參，參數順序就不必再在乎了，只需要保證沒有漏掉參數即可。
p{
@include multi-text(
$width:350px,
$row:2
)
}
2、默認參數值
為了在@include混合器時不必傳入所有的參數，我們可以給參數指定一個默認值。參數默認值使用$name: default-value的聲明形式，默認值可以是任何有效的css屬性值，甚至是其他參數的引用。
@mixin btn($width:100px,$height:36px){
width: $width;
height: $height;
line-height: $height;
text-align: center;
border-radius: 8px;
cursor: pointer;
}
button-1{
@include btn;
}
button-2{
@include btn(120px,40px);
}
四、選擇器繼承
選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現。
//通過選擇器繼承繼承樣式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
在上邊的代碼中，.seriousError將會繼承樣式表中任何位置處為.error定義的所有樣式。以class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"
五、函數指令
@function getBg($name){
@return '../../../../images/' + $name;
}
.box{
background-image:url(getBg('bg.png'));
}
與 mixin 相同，也可以傳遞若干個全局變量給函數作為參數。一個函數可以含有多條語句，需要調用 @return 輸出結果。
六、控制指令
1、@if
當
@if的表達式返回值不是false或者null時，條件成立，輸出{}內的代碼。@if聲明后面可以跟多個@else if聲明，或者一個@else聲明。如果@if聲明失敗，Sass 將逐條執行@else if聲明，如果全部失敗，最后執行@else聲明。
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
2、@for
@for指令可以在限制的范圍內重復輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：@for $var from <start> through <end>，或者@for $var from <start> to <end>，區別在於through與to的含義：當使用 through 時，條件范圍包含與 。另外，的值，而使用 to 時條件范圍只包含 的值不包含 的值 $var可以是任何變量，比如$i；<start>和<end>必須是整數值。
常用於相同元素不同的(背景)圖片：
.item{
@for $i from 1 through 7 {
>div:nth-child(#{$i}) {
.item {
background-image: url('../../../images/us/service-#{$i}.png');
}
@if $i == 7 {
margin: 0 auto;
}
}
}
}
插值語句#{}
通過
#{}插值語句可以在選擇器或屬性名中使用變量。$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } //編譯為： p.foo { border-color: blue; }
3、@each
@each指令的格式是$var in <list>,$var可以是任何變量名，比如$length或者$name，而<list>是一連串的值，也就是值列表。
（1）簡單循環
@each $animal in puma, sea-slug {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//編譯為：
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
（2）復雜循環
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move){
// $animal => (puma, black, default)
// $color => (sea-slug, blue, pointer)
// $cursor => (egret, white, move)
}
另一種寫法：（ 一一對應）
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em){
// $header => h1,h2,h3
// $size => 2em,1.5em,1.2em
}
4、@while
@while 指令重復輸出格式直到表達式返回結果為 false。這樣可以實現比 @for 更復雜的循環，只是很少會用到。
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
//編譯為：
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}
5、if()
if()是 Sass 的一個內建函數，與之相似的@if則是一個內建指令。if()用來做條件判斷並返回特定值.
@mixin test($condition) {
$color: if($condition, blue, red);
color:$color
}
.firstClass {
@include test(true);
}
.secondClass {
@include test(false);
}
//編譯結果
.firstClass {
color: blue;
}
.secondClass {
color: red;
}
在上例中，if() 函數內的三個參數分別代表：測試條件，測試成功返回值，測試失敗返回值（除了 false 和 null 之外的所有測試條件都被視為測試成功）。
七、導入sass文件
sass也有一個@import規則，sass的@import規則在生成css文件時就把相關文件導入進來。
（開發過程中通常將比較常用的sass按照功能單獨放在某個文件中，在使用的時候導入）
官方文檔是這樣說的：
當通過
@import把sass樣式分散到多個文件時，你通常只想生成少數幾個css文件。那些專門為@import命令而編寫的sass文件，並不需要生成對應的獨立css文件，這樣的sass文件稱為局部文件。對此，sass有一個特殊的約定來命名這些文件。此約定即，
sass局部文件的文件名以下划線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。當你@import一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下划線。舉例來說，你想導入themes/_night-sky.scss這個局部文件里的變量，你只需在樣式表中寫@import"themes/night-sky";。
@import '../../part/variable';
.light{
color:$base-color;
}
這里就是在_variable.scss文件中定義了網站主題色—變量$base-color，導入之后就可以在當前scss文件直接使用變量。
1、默認變量值：
!default標簽含義是：如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。
$fancybox-width: 400px !default; .fancybox { width: $fancybox-width; }如果用戶在導入你的
sass局部文件之前聲明了一個$fancybox-width變量，那么你的局部文件中對$fancybox-width賦值400px的操作就無效。2、靜默注釋
body { color: #333; // 這種注釋內容不會出現在生成的css文件中 padding: 0; /* 這種注釋內容會出現在生成的css文件中 */ }
八、數據類型
1、空值null
盡管null表示什么都沒有，但當使用length(..)還是會返回length為1。這是因為null仍然表示的是一個真實存在的實體。
2、布爾型
這個數據類型只有兩個值：true和false。在Sass中，只有自身是false和null才會返回false，其他一切都將返回true
3、數字
數字在CSS中使用很廣泛，大部分都是結合CSS的單位一起使用，但在技術上而言它依然算是數字。只要操作數字和兼容的單位，這樣都是有效的。
$size: 18; // A number
$px-unit: $size * 1px; // A pixel measurement
$px-string: $size + px; // A string
$px-number: $px-unit / 1px; // A number
4、字符串
在Sass中，使用單引號('')或雙引號("")包裹的都是字符串，就是他們包裹的是一個空格，那也是字符串.
如果你想在一個字符串是使用一個變量，而你又不想讓這個變量直接變成了字符串，那就得使用到一個被稱為變量插值，簡單點說，就是使用#{}來包裹這個變量。
$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'
$author: 'Author : #{$name}';
5、顏色
Sass主要是給你提供一些額外的功能，這樣你就可以更有效的使用顏色。
用的比較多的函數方法：
rgba($red, $green, $blue, $alpha) : Creates a Color from red, green, blue, and alpha values.
6、數組
用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
數組方法：
7、maps
相當於 JavaScript 的 object，(key1: value1, key2: value2)
Sass中的Map其實就是類似於關聯數組，常常以
key/value對鍵值出現。Map必須用括號(())括起來，每對鍵值之間使用逗號分隔。在Map中，一個給定的key只能有一個相關的value，但一個給定的value可以被映射到許多不同的key上。另外，在Map中映射給key的值value可以是任何數據類型，包括Map.
$styling: (
'font-family': 'Lato',
'font-size': 1.5em,
'color': tomato,
'background': black
);
Map方法：
map-get($map, $key) : Returns the value in a map associated with a given key.
map-merge($map1, $map2) : Merges two maps together into a new map.
map-remove($map, $keys…) : Returns a new map with keys removed.
map-keys($map) : Returns a list of all keys in a map.
map-values($map) : Returns a list of all values in a map.
map-has-key($map, $key) : Returns whether a map has a value associated with a given key.
keywords($args) : Returns the keywords passed to a function that takes variable arguments.
幾篇不錯的sass技巧文章