SCSS的一些小笔记

chaitong0 2019-11-03

  1. 嵌套选择器:&

    .row {
      flex-wrap: wrap;
      border: 1px solid red;
      display: flex;
      &.align-left {
      }
    }
  2. 注释:以!为首会保留输出到CSS
  3. 变量:$width:5em;(有作用域,其中$m-width和$_width代表同一个变量)
  4. 插值:#{}
  5. @mixin:支持参数

    //声明
    @minxin name{
    //重复代码
    }
    //使用
    @include name{
    }
  6. %placeholder:不支持参数

    //声明
    % name{
    //重复代码
    }
    //使用
    @extwnd %name{
    }
    @mixin 和 %placeholder 区别:除了是否支持参数外,@mixin 是把重复的代码抄到选择器内,而%placeholder 则是把选择器抄到代码头上。
  7. @Function

    //声明
    @function x2($value){
        @return $value*2
    }
    //使用
    width:x2(80px);//使属性可复用

相关推荐