SCSS速学

• 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%;
}