首先，用一句話說明 sass、scss的關係：sass就是css的預處理器，scss是sass3版本中引入的新語法特性。
然後，我們來看怎麼使用呢？像日常一樣，需要安裝npm 包再使用哦：cnpm i -s node-sass sass-loader，當然這裡你是用npm 、yarn 安裝都是可以的！
我們一般在元件中這樣使用，在 style 標籤上加 lang="scss" 這樣就style 裡需要支援 scss 語法。
好啦，到這裡我們就可以開始使用 scss 的魔法啦~
變數 ：sass允許使用變數，所有變數以$開頭
$global-bg:#7a7a7a;a}
如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中。
$side : left;.rounded -radius: 5px;
}
繼承：sass允許乙個選擇器，繼承另乙個選擇器，class2要繼承class1，就要使用@extend命令：
.class1 .class2
混入 @mixin @include
引入 @import 、partials
+、-、*、/、%：sass允許在**中使用算式
body
! default !global
條件語句 @if @if else @else
p @if 5 < 3 }@if lightness($color) > 30% @else
迴圈語句 @for @while @each
@for 的使用方法：
$i 表示變數
start 表示起始值
end 表示結束值
Scss基本用法
scss使用 符號來標識變數。變數有作用域，外部不能引用內部變數。在宣告變數時可以引用其他變數。變數名可以與css中的屬性名和選擇器名稱相同，推薦使用中劃線分隔。border width 1px border width solid black div 編譯後 div如果變數需要鑲嵌在字串之中，就必...
scss基本用法
color red border style 1px solid green box1編譯後得到得css如下 box1 1 father 編譯的css如下 father father son 2 引用父級選擇器 father 編譯的css father father hover 1 基本用法 mix...
scss基本用法總結
工作的時候天天用，面試的時候卻沒了思路，這就是懶得下場。多總結，多整理，才是成長得王道啊。最近換工作，把以前該整理得工作梳理一遍。color f00 a color ff0 b color 009 btn 子元素 同層全體組合選擇器 div a h2,h3,h4 這個注釋不會出現在css中，這是注釋...