SCSS使用方法，教程

下载模块

npm i node-sass@4.14.1 -S
npm i sass-loader@7.3.1 -S

使用

<style lang="scss"></style>

单值变量 $

定义变量

$c:red;
.box{
	color:$c;	//color:red;
}

多值变量 nth()

单个同类样式不同选择时使用（颜色、字体）

$c:red green #fff;
.box{
	color:nth($c,1);	//color:red;
}

复杂变量 @each

• list变量

  多个类、多个同类样式不同属性时使用

  $list:(box 100px red)(view 10px #fff);
  @each $a,$b,$c in $list{
      .#{$a}{
  		width:$b;
          color:$c;
      }
  }
  // .box{width:100px;color:red}
  //.view{width:10px;color:#fff}
  

• map 变量

  多个类、仅一个同类样式不同属性时使用

  $map:(h1:30px,h2:25px,h3:20px);
  @each $key,$val in $map{
      #{$key}{
  		font-size:$val;
      }
  }
  //h1{font-size:30px}
  //h2{font-size:25px}
  //h3{font-size:20px}
  

嵌套 {}

• 结构嵌套

  ul{
  	color:red;
  	li{
  		color:black;
  	}
      &:hover{
          color:#fff;
      }
      &:before{
  		content:'';
      }
      & > div{
          float:left;
      }
  }
  

• 样式嵌套

  .box{
  	border:{
  		left:{width:1px}
          right:{width:2px}
  	}
  }
  

继承 @extend

.box{color:red}
.view{
    width:100px;
    @extend .box;
}
//.view{width:100px;color:red}

混入器 @mixin

方便设置基础样式

@mixin fn($a,$b){	//定义混入器
	width:$a;
    height:$b; 
}
.box{
    @include fn(100px,200px);//调用混入器
    background:#fff;
}
//.box{width:100px;height:200px;background:#eee}

@mixin class{
    &.box{
		@content;
    }
}
.abc{
    @include class{
		color:#000;
    }
}
//.abc.box{color:#000}

运算

.box{
    width:100px/16px*1rem;
}

转义 #{}

将变量(属性值)转换为字符使用

循环 @for

@for $i from 0 through 10 {
    .item:nth-child(#{$i}){
        transform : rotate((#{$i}-1)*6deg);
    }
}

函数 @function

方便px-rem转换

@function rem($px){
	@return $px/16px*rem;
}
.box{
    width:rem(100px);
}

导入外部文件 @import

@import "./style.scss";