- scss/sass区别之一，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%;
}
