css 预处理语言 -- Scss篇

基础语法

一、变量

$mainColor:#0aacae;

.header {
  color : $mainColor;
}

二、继承

.prev {
  font-size: 16px;
  color: #606266;
  cursor: pointer;
}

.prev {
  &--inactive {
    @extend .prev;
    color: #c0c4cc;
  }
}

三、混合@mixin

/* 使用方法： @include */

@mixin demo{
  font-size: 16px;
  color: #606266;
}
/* 使用@include命令，调用@mixin demo*/
.one-box {
  @include demo;
}

/* 传参 */
@mixin width($width) {
  widths: $width;
  height: 100px;
}
.box {
  @include width(100px);
}

/* 传递多个参数 */
@mixin setMargin($value1,$value2){
  display:flex;
  margin-left:$value1;
  margin-right:$value2;
}
.margin-demo{
  font-size:12px;
  @include setMargin(12px,13px);
}

SassScript语法
一、@if

@mixin isOpacity($bool: true){
	@if $bool {
	  opacity: 1;
	}
	@else {
	  opacity: 0;
	}
}

.opacity {
  @include isOpacity(false);
}

二、@ for

@for $i from 1 through 4 {
  .item-#{$i} {
    height: 20px * $i;
  }
}

/* 生成的代码 */
.item-1 {
  height: 20px;
}

.item-2 {
  height: 40px;
}
...

三、@ each

@each $color in red, green, yellow, blue {
  .p-#{$color} {
    background-color: #{$color};
    height: 20px;
    width: 20px;
  }
}