Sass總結筆記 基礎入門（超級直觀細節）

一.什么是sass：

1. Sass 擴展了 CSS3，增加了規則、變數、混入、選擇器、繼承等等特性，Sass 生成良好格式化的 CSS 代碼，易于組織和維護，
2. SASS是對CSS3(層疊樣式表)的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet，Sass最后還是會編譯出合法的CSS讓瀏覽可以使用，也就是說它本身的語法并不太容易讓瀏覽器識別(雖然它和CSS的語法非常的像，幾乎一樣)，因為它不是標準的CSS格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言，
3. 工程越大，css檔案越大，重復代碼越來越多，會變得難以維護，借助Sass可以提高寫css的效率，

二. 安裝：

cmd打開本地命令控制視窗，輸入下面字串然后回車就裝好了，

npm install -g sass

更多安裝方法可以點我Sass去官網，

三.編譯.scss檔案為.css檔案：

Sass使用.scss作為檔案后綴名，不能直接在< link >標簽里使用，需要編譯為 .css檔案，
演示：

1. 建一個html檔案，隨便寫個h1標簽：
   
2. 建一個.scss后綴的檔案，如input.scss，寫點基本樣式sass的語法：
   
3. 在html檔案所在的路徑下打開cmd命令控制符，輸入：

sass input.scss ouput.css

表示把名字為 input.scss 轉換成名字為 ouput.css 的檔案（名字自己隨意起），

回車后，接下來發現就得到了css的檔案，

css檔案內容如下，可以看出轉換好了：

接下來就是老操作了，在HTML里用 < link >標簽把css檔案引入就行，

4. 但是不可能說寫一句.scss陳述句就轉換一次，太麻煩，所以可以自動轉換，當我在.scss里寫一句，.css就自動生成一句，在cmd輸入以下：

sass --watch input.scss:ouput.css

表示監視變化，當input.scss一變化，output.css就變化:

5. 如果一個html檔案里有多個css檔案呢？那么可以直接監視檔案夾變化：
如：

sass  --watch  yuan:bian

表示：當名字為yuan這個檔案夾里任意一個.scss后綴的檔案變化時，就將其編譯到名字bian這個檔案夾里面（會自動生成相應的.css檔案）

四.基礎用法與功能：

目錄：

1.變數；
2.嵌套；
3.mixin；
4.繼承；
5. import；
6. 計算；
7. 顏色函式；
8. Interpolation；
9. if 判斷；
10. for回圈；
11. 串列回圈；
12. while回圈；
13.function自定義函式；
…待更新…

詳細用法：

1. 變數（定義變數后，在選擇器里可以直接參考）：
   如：我定義一個變數名為 $yanse，值為顏色rgb(223, 148, 148)

$yanse: rgb(223, 148, 148);

直接在選擇器參考：

h1{
        color: $yanse；
    }

當然變數也可以套娃，比如我定義一個變數名為 $kuang，里面參考了 $yanse

$yanse: rgb(223, 148, 148);
$kuang: 1px solid $yanse;

然后也直接用：

 h1{
        border: $kuang;
    }

2. 嵌套（父選擇器里可以嵌套子選擇器）
   如：有以下標簽

 <div>
        <ul>
            <li></li>
        </ul>     
    </div>

可以直接這樣寫：

div{
    height: 100px;
    ul{
        height: 80px;
        li{
           height: 50px;
        }
    }
}

相當于：

div {
  height: 100px;
}
div ul {
  height: 80px;
}
div ul li {
  height: 50px;
}

若 li 有偽類選擇器：hover可以這樣寫（里面添加&：hover{}）：

div{
    height: 100px;
    ul{ 
        height: 80px;
        li{
           height: 50px;
           &:hover {
             color: #000;
           }
        }
    }
}

相當于又寫了：

div ul li:hover {
  color: #000;
}

不止選擇器，屬性里也可以嵌套，如這樣寫：

div{
    height: 100px;

    font: {
        family: 'fangsong';
        size: 20px;
        weight: 700;
    }
    border: 1px solid red {
       left: 0;
       top: 0;
    }
}

相當于：

div {
  height: 100px;
  font-family: "fangsong";
  font-size: 20px;
  font-weight: 700;
  border: 1px solid red;
  border-left: 0;
  border-top: 0;
}

3. mixin 混合 （相當于預先寫好了一組樣式，其它地方直接參考）：
   基本語法：

@mixin 名字（引數1，引數2，...）
{
........樣式.......

}

如（無引數的，里面也可以嵌套，下面定義了一個名字為hunhe的mixin，然后在div這個選擇器里通過（@include 名字）呼叫 ）：

@mixin hunhe {
     color: red;
     a {
         font-size: 12px;
     }
}

div{
    @include hunhe;  
}

相當于：

div {
  color: red;
}
div a {
  font-size: 12px;
}

有引數的（更靈活，引數相當于你要的數值，引數名前面要寫$，呼叫時值的位置要對）：

如：

@mixin hunhe($one,$two) {
     color: $one;
     a {
         color: $one;
         font-size: $two;
     }
}

div{
    @include hunhe(red,15px);  
}

*div也可以這樣寫,指定引數名，引數位置就可以隨意變換：

div{
    @include hunhe($two:15px,$one:red);  
}

上面相當于：

div {
  color: red;
}
div a {
  color: red;
  font-size: 15px;
}

4. 繼承/擴展（一個選擇器可以繼承另一個選擇器的全部樣式）
   如: .two類里繼承了.one類的全部樣式 （@extend 名字）； 還不止.one的，跟.one相關的都繼承了 ，具體如下：

.one{
    color: #000;
}
.one a{
    font-size: 10px;
}
.two{
    @extend .one;
    background-color: #fff;
}

相當于：

.one, .two {
  color: #000;
}

.one a, .two a {
  font-size: 10px;
}

.two {
  background-color: #fff;
}

5. @import 引入一個.scss后綴的檔案作為自己的一部分，被引入的那個檔案并不會轉換成.css格式的，所以此檔案命名要注意以下劃線開頭，如：_base.scss ，引入它的時候不用寫下劃線，
   語法：@import: “…路徑”;
   如：
   建立一個檔案叫 _base.scss，里面寫上一些選擇器和樣式，然后在一個正常的如one.scss檔案里引入它,假如目錄是同等級的：

@import: "base.scss";

這樣.one.scss就有了_base.scss里的全部內容，

6. 計算功能 （SASS允許在代碼中使用算式）如：

  $chang: 20px;
body{   
    margin: (10px*2);
    left: 20px + $chang;
} 

相當于：

body {
  margin: 20px;
  left: 40px;
}

7. 顏色函式（SASS提供了一些內置的顏色函式，以便生成系列顏色，）

hsl（色相，飽和度，明度）;

body{   
   background-color: hsl(5, 20%, 20%);
} 

相當于：

body {
  background-color: #3d2b29;
}

hsl（色相，飽和度，明度，不透明度）;

body{   
   background-color: hsl(5, 20%, 20%,0.5);
} 

相當于：

body {
  background-color: rgba(61, 43, 41, 0.5);
}

用來調整色相： adjust-hue(顏色，調整的度數)；

body{   
   background-color: adjust-hue(hsl(0,100,50%), 100deg);
} 

相當于：

body {
  background-color: #55ff00;
}

用來調整顏色明度：lighten讓顏色更亮，darken讓顏色更暗
如：lighten（顏色，增加亮度的百分比）；

body{   
   background-color: lighten(rgb(228, 145, 145),50%);
   color: darken(rgb(228, 145, 145),50%);
} 

相當于：

body {
  background-color: white;
  color: #5f1717;
}

用來調整顏色純度 saturate讓顏色更純 ，desaturate讓顏色不純
saturate（顏色，百分比）；

8. Interpolation 把一個值插入到另一個值，具體用法如下 #{變數} 如：

$yanse: color;
body{   

   #{$yanse}:red;
   
}  

相當于：

body {
  color: red;
}

9. if 判斷（邏輯跟C語言差不多）：
   語法：

@if 判斷條件 {
.......執行陳述句...
} @else {
  ...else有就寫沒就不寫....
}
 

如：

$jia: false;
body{   

   @if false{
       color: red;
   }
   @if 2>3 {
       background-color: white;
   }@else{
       background-color: black;
   }
   
}  

相當于：

body {
  background-color: black;
}

10. for回圈
    語法：

結束值不執行：
@for 變數 from 開始值 through 結束值 {
     ......
}
結束值也執行：
@for 變數 from 開始值 to 結束值 {
     ......
}

例子：

@for $i from 1 to 3 {
    
    .div#{$i}{
       height: $i*20px;
    }

}

相當于：

.div1 {
  height: 20px;
}

.div2 {
  height: 40px;
}

11. 串列回圈，能回圈一遍一個串列的值，串列相當于陣列；
    語法：

@each 變數 in 串列{
...
}

例子：

$yanse: red blue black;
@each $i in $yanse {
    
    .div#{$i}{
      color: $i;
    }

}

相當于：

.divred {
  color: red;
}

.divblue {
  color: blue;
}

.divblack {
  color: black;
}

12. while回圈，有判斷條件更靈活，
    語法：

@while 條件 {
   ...
}

例子：

$gao: 1;
@while $gao<4 {
    .div#{$gao}{
        height: $gao*10px;
    }
   $gao : $gao+1;
}

相當于：

.div1 {
  height: 10px;
}

.div2 {
  height: 20px;
}

.div3 {
  height: 30px;
}

13.自定義函式 function,自己定義的函式可以呼叫；
語法：

@function 名字(引數1，引數2，..){
....
}

例子：

@function ziji ($bian)
{
    @return $bian+10px;
}

div{
    width: ziji(5px);
}

相當于：

div {
  width: 15px;
}

總結：

注意：這篇文章我還會一直補充和更新內容~

有幫助的話就點個贊吧~

其它文章：
回應式卡片懸停效果 html+css
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
炫彩流光按鈕 html+css
等等等…