前端开发中scss 常用的特性

前言

此文章介绍一下常用的scss在开发中经常用到的一些特性

scss

什么是scss

    世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

scss 和 sass 区别

scss 是 sass 的升级版,完全兼容sass的特性，又增加了其他特性。

特性

变量

!default 声明默认变量，重新定义可以覆盖默认变量：$color = pink

    $color: red !default

局部变量可以覆盖全局变量；局部变量加上：!global 可以变成全局变量

$height: 200px // 全局变量
 body {
     $height: 300px; //局部变量
     height:$height
   }

嵌套引用

$left: left
 .box {
     border-#{$left}:1px solid #333
   }

继承@extend

.box {
  color: pink;
  border: 1px dashed purple;
}
.box1 {
	@extend .box 
}

@mixin

/*无默认值*/
@mixin normalStyle {
	width: 300px;
  height: 200px;
}
/*有默认值*/
@mixin normalStyle2 ($width,$height){
	width: $width;
  height: $height;
}
.box {
  @include normalStyle
}
.box2 {
  @include normalStyle(300px,200px)
}

条件语句

$type: list
.box {
   p {
    @if $type == list{
      color: pink;
    } @else {
      color: purple;
    }
  }
}

@function

@function double($sn) {
  @return $sn*2
}
.box {
  width: double(200px)
}

循环

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 200px * $i;
    height: 100px;
    border: solid 1px #333;
  }
}

后记

这些只是开发中用到的，还有其他的不常用的特性，没有记录了。