- scss/sass區(qū)別之一澈缺，scss有花括號伐厌、sass沒有
- scss的嵌套旗国，相當于css的后代選擇器
- scss變量名定嗓，以$開頭蜕琴，例如：
$primary-color: #33
body {
color: $primary-color
}
// 相當于
body {
color: #33
}
-
scss使用其他.scss文件
- 被使用文件名，以下劃線開頭宵溅，例如：_base.scss
- 需要使用的文件中凌简，@use 'base'
-
混入（@mixin、@include）寫法
- 定義恃逻，@mixin
// 定義混入方法 transform @mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; }- 引入雏搂，@include
.box { @include transform(rotate(30deg)); } // 相當于 .box { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } -
繼承，@extend
- 使用場景寇损，多個類之間凸郑，相同屬性過多，只有個別屬性差異矛市。
.style{ font-size: 30px; font-style: italic; } h2{ color: #787878; @extend .style } .container{ @extend h2 } 可以使用運算符
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
