sass与css，sass有什么优势

嵌套

 .title {
        position: relative;
        height: 40px;
        line-height: 40px;
        width: 96%;
        padding: 0 2%;
        background: #F3F3F3;
        display: flex;
        //纯CSS实现垂直居中的几种方法
        justify-content: flex-start;
        flex-direction: row;
        align-items: center;
        #box {
            display: inline-block;
            width: 5px;
            height: 20px;
            background: #1ABC9C;
            margin-right: 5px;
        }
    }

变量

(可用于切换主题颜色)如果你的网站想 换个颜色只要改变变量后面说赋予的值就可以轻松改变掉整个网站的基色调。
$grey: #E3E3E3;
body{
color: $grey;
}

mixin

用mixin定义一些代码片段，还可以传参数，方便日后根据需求调用。特备是想要兼容各大浏览器的时候，可以
@mixin box-sizing (KaTeX parse error: Expected '}', got 'EOF' at end of input: …kit-box-sizing:sizing;
-moz-box-sizing: $sizing; box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
编译成css后就是如下：
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

扩展/继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
//编译成css后如下
.message, .success {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}

运算

sass可进行简单的加减乘除运算等