SCSS使用方法詳解

SCSS (Sassy CSS)，它是一款css預處理語言，是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能

並且Sass可以幫助我們減少css重複的代碼，減少開發時間。那麼Sass有什麼強大並且高級的功能呢？例如：變量、嵌套、導入import、混合mixin、繼承extend

那就從簡單一點的開始入手啦！舉個🌰

下面這個小🌰是 ’&‘關鍵字，意義是引用父級選擇器，在這裏’&‘代指.container

.container{
  &:hover{
    background: #b084eb;
  }
}

轉化爲css爲

.container:hover{
   background: #b084eb;
}

嵌套多個會怎樣呢？此時’&‘代指.container .a 

.container{
  a{
    &:hover{
      background: #b084eb;
    }
  }
}

接下來我們談一下變量！

變量是使用’$‘符號開頭的，用來存儲想要複用的信息，例如顏色、字符串、數值等等

$ 變量名: 變量值

$btn-1: #A4C82B;
$btn-2: #499DC8;
$imgPath: '../assets';

來康康怎麼使用

.btn{
    background:$btn-1
}

嵌入字符串時需要使用#{ imgPath } 

.con{
    background: url('#{$imgPath}/logo.png'); 
}

嵌套

選擇器使用的嵌套規則，要注意的是最好不要過度的嵌套 這樣會比較難維護

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  
}

 很多 CSS 屬性都有同樣的前綴，例如：font-family, font-size 和 font-weight，這樣我們就可以使用嵌套屬性來寫！

.btn{
    font: {
        size: 16px;
        weight: normal;
        family: Hei;
    };
}

下面說一下混合

通過@mixin 指令來定義，下面創建一個名爲flex-con和div-size的混入

// 無參數型
@mixin flex-con{
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 有參數型
@mixin div-size($width,$height){
  width: $width;
  height: $height;
}

直接看如何用吧！

.container{
  @include flex-con;
  @include div-size(200px,200px);
}

接下來就是引入啦

通過@import引入文件，可以根據顏色相關文件、字體相關文件進行拆分，這樣會更結構化哦！

另外，CSS @import 指令在每次調用時，都會創建一個額外的 HTTP 請求。但是Sass @import 指令將文件包含在 CSS 中，不需要額外的 HTTP 請求。

// common.scss文件
$btn-1: #A4C82B;
$btn-2: #499DC8;
$btn-3: #933CC8;

@import 'common' // 根據自己的文件路徑進行引入

// 引入後使用
.btn{
    background:$btn-1
}

繼承

@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。如果一個樣式與另外一個樣式幾乎相同，只有少量的區別,則使用 @extend 就比較有用

.btn-1{
  display: inline-block;
  padding: 3px;
}
.btn-2{
  background: #b084eb;
  color: #ffffff;
}
.btn-3{
  @extend .btn-1,.btn-2
}

轉化爲css

.btn-1,.btn-3{
  display: inline-block;
  padding: 3px;
}
.btn-2,.btn-3{
  background: #b084eb;
  color: #ffffff;
}

最後來說一下scss中的循環以及條件語句

下面代碼中包含了循環和條件的使用

@each遍歷數據，下面是對$btn-types進行遍歷

@if @else條件語句，與js中的類似，是不是一下就能看懂！

$btn-1: #A4C82B;
$btn-2: #499DC8;
$btn-3: #933CC8;
$btn-4: #2DC1C8;
$name: 'normal';
$btn-types: (
  "one": $btn-1,
  "two": $btn-2,
  "three": $btn-3,
  "four": $btn-4
);
@each $bu,$color in $btn-types{
  .btn-#{$bu}{
    @if($bu == one){
      color: #fff;
    } @else {
      color: #000000;
    }
    background: $color;
    border: 1px solid $color;
    &:hover {
      background: #00BAF1;
    }
  }
}

那就先到這裏啦！