scss的基本使用

1、变量 $
$xx:100px;
.class{
    width:$xx;
}

2、嵌套 &:
a{
    &:hover{
        color:red;
    }
}

3、继承 @extend
.class{
    font-size:16px;
    color:red;
}
.main{
    @extend .class
}

4、混入 @mixin 、@include
@mixin class{
    font-size:16px;
    color:red;
}
.main{
    @include class
}

5、引入外部文件 @import
@import '@/scss/index.scss'

6、优先级 !default，!global
!default 默认值，变量无值的时候使用
!global 可以将变量提升为全局变量

7、条件语句 @if,@else if,@else
8、循环语句 @for ,@while

9、自定义函数 　@function @return
@function pxToVw($num){
  @return 100vw / 375 * $num;
}
.class{
    width:pxToVw(100); 
}

10、颜色函数
color: lighten(green, 10%);表示绿色变浅10%
color: darken(green, 10%); 表示绿色加深10%

移动端自适应屏幕宽度：
@function pxToVw($num){
  //100vw:当前屏幕宽度
  //375:以屏幕宽度为375px为准
  //$num:需要设定的px值
  //计算：屏幕宽度100vw为375 $num:1 转换为1px（转换精度会有细微误差）
  @return 100vw / 375 * $num;
}
.class{
    width:pxToVw(100); 
}
scss的基本使用

悦读
