sass在css的基础上增加了变量、嵌套、混合、导入等高级功能，使用sass以及sass的样式库有助于更好的组织管理样式文件，以及高效的开发项目

www.bilibili.com/video/BV17W…

变量

$primary-color:#1269e5;
$primary-color1:#cccccc;
$primary-border:10px solid $primary-color1;
div.box{
    background-color: $primary-color;
    height: 20px;
    border:$primary-border
}

嵌套

<div class="box">
  <ul>
    <li>111</li>
  </ul>
</div>

$primary-color:#1269e5;
$primary-color1:#cccccc;
$primary-border:10px solid $primary-color1;
div.box{
    background-color: $primary-color;
    height: 50px;
    border:$primary-border;
    ul{
        background-color: yellow;
        li{
            list-style: none;
        }
    }
}

• 嵌套时调用父选择器

<div class="box">
  <ul>
    <li>111</li>
    <a href="">111</a>
  </ul>
  <div class="box-text">222</div>
</div>

$primary-color:#1269e5;
$primary-color1:#cccccc;
$primary-border:10px solid $primary-color1;
.box{
    background-color: $primary-color;
    height: 50px;
    border:$primary-border;
    ul{
        background-color: yellow;
        li{
            list-style: none;
        }
        a{
            color:pink;
            &:hover{
                color:red;
            }
        }
    }
 &-text{
    color:green;
    font-size:14px;
  }
}

• 嵌套属性

<div class="box">
  <div class="box-text">222</div>
</div>

.box{
    font: {
        family:Arial;
        size:14px;
        weight:400
    }
    &-text{
    border: 1px solid yellow {
    left: 100px;
    right: 0
};
    }
}

混合Mixin

<div class="box">
  <div class="box-text">222</div>
</div>

@mixin alert {
    background-color: green;
    .box-text {
        color:white;
    }
}

.box{
   @include alert
}

• 参数

<div class="box">
  <div class="box-text">222</div>
</div>
<div class="info">
  <div class="box-text">222</div>
</div>

@mixin alert($text-color,$background-color) {
    background-color: $background-color;
    .box-text {
        color:$text-color;
    }
}

.box{
   @include alert(white,green)
}
.info{
    @include alert($background-color:yellow,$text-color:pink)
 }

继承/扩展

<div class="box">
  <div class="box-text">222</div>
  <a href="">333</a>
</div>
<div class="info">
  <div class="box-text">222</div>
  <a href="">444</a>
</div>

.box {
    background-color: pink;
}

.box a{
    color: red;
}

.info{
    @extend .box;
    color: aqua;
}

导入

在base.scss中

div {
    padding: 20px;
}

在app.scss中

@import "base";

.box {
    background-color: pink;
}

.box a{
    color: red;
}

.info{
    @extend .box;
    color: aqua;
}

数字函数