接上篇筆記，安裝好依賴(lài)，配好開(kāi)發(fā)環(huán)境之后， 我們便可以在項(xiàng)目中編寫(xiě)sass樣式了。

1、變量

在sass中，允許我們使用變量，所有變量用$開(kāi)頭，使用非常方便，直接看例子：

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

當(dāng)然變量也可以做插值使用,需要用#{}包裹變量：

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

那有同學(xué)問(wèn)了：為什么要用變量呢？我直接寫(xiě)進(jìn)去不是一樣嘛？
為什么用sass寫(xiě)樣式塊呢？不光是開(kāi)發(fā)，在修改的時(shí)候同樣便捷，比如一套系統(tǒng)，有一套顏色風(fēng)格，在很多地方都會(huì)用到同種顏色，那么把這個(gè)顏色定義為變量，在調(diào)試的時(shí)候只要修改這個(gè)變量的值，所有引用變量的地方都會(huì)自動(dòng)變化，是不是很便捷~

2、計(jì)算功能

$ten: 10px
body{
  margin: (18px / 2);
  top: 150px + 100px;
  left: $ten * 10%
}

3、嵌套

這是我認(rèn)為比較舒服的地方，大大簡(jiǎn)化了我的css代碼量

// 普通css中：
div{
  background: #fff
}
div p {
  background: #000;
  //balabala···
}
a{
  color: #fff;
}
a:hover {
  color: red
}
// sass中
div{
 background: #fff;
  p{
    background: #000;
    //balabala
  } 
}
a{
  color: #fff;
// 在嵌套中，可以用&來(lái)引用父元素
  &:hover{
    color: red
  }
}

基本用法會(huì)了，我們?cè)倏葱└叽笊系?/h2>

1、繼承

sass允許我們某個(gè)選擇器的樣式繼承另一個(gè)選擇器的樣式：

.aclass{
  background: red
}
//假設(shè)我們有個(gè)bclass類(lèi)，要繼承aclass的樣式，那我們就用@entend
.bclass{
  @extend .aclass;
  color: #fff
}

2、mixin

可以把它理解為宏，可以復(fù)用的代碼塊，我們先用@mixin指令，定義一個(gè)代碼塊：

@mixin left {
  float: left;
  margin-left: 10px;
}

接著，我們用@include指令調(diào)用這個(gè)mixin:

div{
  @include left;
}

既然能夠成為宏，那必須得能傳參：

@mixin left($value: 10px){
  float: left;
  margin-left: $value;
}

這個(gè)10px呢就是默認(rèn)缺省值，根據(jù)我們的需要，使用時(shí)可加入?yún)?shù)：

div{
  @include left(20px);
}

3、插入文件

Sass的@import和CSS的不一樣。CSS的@import，只有在執(zhí)行到的時(shí)候才去下載其他CSS文件，這就影響了頁(yè)面加載；而Sass的@import在生成CSS文件的時(shí)候就把相關(guān)文件導(dǎo)入進(jìn)來(lái)了。
我們用@import命令來(lái)插入外部文件：

@import 'path/abc.scss'

4、占位符

（以%開(kāi)頭）:

%left{
  float: left;
  margin-left: 10px
}
div{
  @extend %left
}

那這個(gè)占位符和直接繼承有啥區(qū)別呢？主要區(qū)別在于編譯后的css上面，占位繼承使css更簡(jiǎn)潔，我這里不做過(guò)多解釋。

還不夠給力嗎？我們?cè)趤?lái)看看sass的高級(jí)用法

1、條件語(yǔ)句

我們用@if指令

p{
  @if 1+1 == 2 {border: 1px solid;}
  @if 5<3 {border: 2px dotted;}
}
//當(dāng)然有配套的`@else`指令
@if lightness($color) > 30% {
  background: #000;
} @else {
  background: #fff
}

2、循環(huán)語(yǔ)句

for循環(huán)必須支持滴：

@for $i from 1 to 10 {
  .border- #{$i} {
    border: #{$i}px solid blue;
  }
}

也支持while循環(huán)：

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

自定義函數(shù)

@function double($n){
  @return $n * 2
}

#slidebar{
  width: double(10px);
}

看完這篇文章，那么恭喜你你已經(jīng)入門(mén)sass了，其實(shí)還有很多更好玩的，可以去看官方文檔，現(xiàn)在我把天空還給你，你自己去點(diǎn)綴你的藍(lán)天吧～