scss的基本用法

一、定义变量

<style lang='scss' scoped>
  // scss 定义变量 基本用法
  $fontSizeColor: #468dcc;
  $mainBackgroundColor: #eeeeee;
  // scss 变量作为字符串拼接
  $direction: left;
  .login {
      color: $fontSizeColor;
      background-color: $mainBackgroundColor;
      margin-#{$direction}: 10px;
  }
</style>

二、简单的计算 加减乘除

<style>
    $var: 10;
    div {padding-top: $var * 10px;}
</style>

三、选择器嵌套

<style>
    $bgColor: #468dcc;
    $ftColor: red;
    div {
        background-color: $bgColor;
        p {
            color: $ftColor;
            span {display: block;}
         }
     }
 </style>
        

四、继承样式 @extend

<style>
    .commonClass {
        width: 200px;
        height: 200px;
        margin: 10px;
        padding: 10px;
        border: 1px solid #468dcc;
    }
    .myDiv {
        @extend .commonClass;
        overflow: hidden;
     }
</style>

五、@mixin @include 使用，强大之处在于可以传递参数

<style>
    $fontSizeColor: #468dcc;
    // 不传参
    @mixin myModel {
          width: 200px;
          height: 200px;
          background: $fontSizeColor;
      }
      .test {@include myModel()
      }
      // 传参, 初始化默认值
      @mixin myModelParams($value: 200px) {
          width: $value;
          height: $value;
          background: $fontSizeColor;
      }
      .test {@include myModelParams(200px);
      }
</style>

六、导入外部 scss、css @import

<style lang="scss">
    @import "./assets/global.scss"
</style>

七、 高级用法，循环语句和自定义函数的使用

@for $i from 1 to 10 {
  // .myLi1 .myLi2 .myLi3 ...... .myLi10
  .myLi#{$i} {border: #{$i}px solid #468dcc;
  }
}

// 自定义函数
@function myScssFun($p) {
  @if $p > 10 {@return $p;} @else {@return $p * 2;}
}
div {font-size: myScssFun(10px);
}