Sass

Sass(css)预处理器的特性

1、变量

使用变量来存储需要再css中复用的信息，使用$去声明一个变量

<style lang='scss' scoped>
$bg_color:red;
.container{
    width: 20px;
    height: 20px;
    background-color: $bg_color;
}
</style>

2、嵌套

以嵌套的方式使用css，父级元素包子级元素

3、引入

@import '位置/文件名' ： 引入.scss文件，将多个.scss文件合并成一个

可以引入代码片段，也可以引入某个变量

(1) 引入代码片段 ( b中引入a)

可以看出a是可以使用中b的变量。当引入.css时不允许存在变量

​ a.scss

.inter{
    width: 10px;
    height: 10px;
    background-color:$inter_color1;
}

​ b.scss

$bg_color:red;
$inter_color:green;
$inter_color1:blue;
.container{
    width: 20px;
    height: 20px;
    background-color: $bg_color;
}

.inter1{
    width: 10px;
    height: 10px;
    background-color:$inter_color;
}

@import 'a';

(2) 引入变量 此时显示颜色为blue

​ a.scss

$inter_color:blue;

​ b.scss

$bg_color:red;
$inter_color:green;
.container{
    width: 20px;
    height: 20px;
    background-color: $bg_color;
}

@import 'a';

.inter{
    width: 10px;
    height: 10px;
    background-color:$inter_color;
}

备注：与css3中的引入不同，@import url('a')需要加载；而sass的@import则不需要加载

我们可以将公共变量放在一个.scss中，使样式代码更加清晰

4、混合(Mixin)

用于分组需要在页面中复用的css声明，通过向Mixin传递变量参数让代码更加灵活

声明：@mixin 名字(变量)

调用：@include 名字(数值)

页面：

<div class="divView">123</div>

声明

@mixin divStyle($divWidth, $divHeight, $divColor) {
    width: $divWidth;
    height: $divHeight;
    background-color: $divColor
}

调用

.divView {
    @include divStyle(80px, 50px, blue)
}

思考：可以用于多浏览器适配，例如

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

5、继承

使用@extend在选择器之间复用css属性，避免产生冗余代码

公用代码片段使用 % 声明，使用 @extend 继承

// 该代码没有被继承，不会输出到最终的css中
%box-other {
    border: 1px solid #000;
}
// 该代码被继承，会输出到最终的css中
%box-common {
    border: 1px solid green
}
.box1 {
    @extend %box-common ;
    width:50px;
    height: 50px;
}
.box2 {
    @extend %box-common ;
    width: 100px;
    height: 200px;
}

6、操作符

sass提供了标准的算术运算符，例如 +、-、*、/、%,可以让开发人员更容易将像素转换成百分比

$width:600px;
.box1 {
    width: $width / 1000px * 100%;
    height: 200px;
    background-color: $inter_color;
}

转换代码 ==》

.box1 {
    width: 60%;
    height: 200px;
    background-color: green;
}

7、引用父级 &

“&” 会使用父级选择器替换全部出现的位置

伪类选择器使用场景：

.container {
    width: $width;
    height: $height;
    background-color: $bg_color;

    &:hover {
        background-color: $inter_color
    }
}

当子类元素class的开头是父元素时也可以使用

<div class="container">
    <div class="container_divView">123</div>
</div>
.container {
    width: $width;
    height: $height;
    background-color: $bg_color;

    &_divView {
        font-size:20px
    }
}

8、嵌套属性

css许多属性都有相同的命名空间，比如font-family,font-size,font-weight等，

scss中只需要编写命名空间一次，后续嵌套的子属性都将位于该命名空间之下

/*===== SCSS =====*/
.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*===== CSS =====*/
.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
  }