2021-05-29

sass语法介绍

1.变量声明

sass中的变量声明是用$符来开头的,比如我们的项目名称和定义的主体颜色,我们就可以定义为变量

$primary:#f15922;
$namespace:'pcms';
//调用
    .#{ $namespace } {
    .color {
        color: $primary
    }
}

#{}为sass语言的插值应用,类似于vue中的{{}}

2.嵌套语法

css不支持层级,而sass中却可以实现层级嵌套,SASS用缩进来简写嵌套结构,比如 选择器嵌套:
div里面嵌套有一个p标签

div {
  height: 100px;
  p {
    width: 50px;
  }
}

编译成css文件以后是这样的

div {
  height: 100px;
}
div p {
  width: 50px;
}

当然还有属性嵌套

.Attribute {
    font : {
        size : 20px;
        family : "宋体";
        weight : bold;
    }
}

3.父选择器引用&

在sass中我们用&符来代替父选择器

a {
    font-size:12px;
    &:hover {color: red;}  //生成a:hover
}

4.@at-root 跳出嵌套

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

//没有跳出循环
.parent-1{
  color:red;
  .child-1{
    border:1px solid red;
  }
}

//编译后的css
.parent-1{
  color:red;
}
.parent-1 .child-1 {
  border: 1px solid red;
}
//普通跳出嵌套
.parent-2{
  color:red;
  @at-root .child-2{
    border:1px solid red;
  }
}

//编译后的css
.parent-1{
  color:red;
}
.child-2 {
  border: 1px solid red;
}

5.SASS的模块化(Mixins)

在我们平时写CSS的时候，很多时候都是一模一样的属性，我们希望能够让他们独立起来，然后多次进行调用。而现在SASS能够让大家实现这么强大的功能。SASS的模块化(Mixins)是可以把一部分样式单独出来，作为单独定义的模块，然后可以被很多选择器重复使用。具体的实现方法如下。

@mixin setBorder($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { 
	@include setBorder(blue, 1px);
}

我们用@mixin 来定义公共样式,用@include来引用

6.SASS的继承(extend)

sass允许一个选择器继承另一个选择器@extend

.link {
	font-size:18px;
}

.inherit {
	@extend .link;
}

编译以后就是

.link, .inherit {
  font-size: 18px;
}

相当于inherit继承了link的样式,但是这样我们就相当于多声明了一个link的样式,所以%占位符选择器就出现了,我们可以把.换为%,大家看下面

%link {
	font-size:18px;
}

.inherit {
	@extend %link;
}

编译为css文件以后为

.inherit {
  font-size: 18px;
}

我们可以看到link样式并不存在,不会被编译,这样就避免了出现多余的样式.

7.计算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$content: 720px;
$header : 220px;
$search: 20px;
.container {
    width: $content + $header - $search;
}
.box{
   width: 50px + 100;
}

编译后

.container {
  width: 920px;
}
 
.box {
  width: 150px;
}

8.自定义函数

@function sum($n,$m){

@return $n+$m;

}

.double{

　　width:sum(100px,200px);

}

编译以后

.double{
width:300px;
}

9.scss-@each指令

@each指令类似于咱们js中的循环遍历

@each $color in red, green, yellow, blue {
  .p_#{$color} {
    background-color: #{$color};
  }
}

编译以后为

.p_red {
  background-color: red; }

.p_green {
  background-color: green; }

.p_yellow {
  background-color: yellow; }

.p_blue {
  background-color: blue; }

10.scss-@for循环

方式1：@for $i from {开始值} through {结束值}
方式2：@for $i from {开始值} to {结束值}
（through 包含结束值，to不包含结束值）