一、什么是sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的根底上减少了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级性能，提供了许多便当的写法，大大提高的开发效率。上面总结了SASS的次要用法，想要理解更多能够查阅文档

二、装置

1、因为sass依赖于Ruby，因而须要先装置Ruby，而后执行gem install sass
2、若在vue-cli或react-create-app中应用，在我的项目中装置依赖：

npm install node-sass --save-devnpm install sass-loader --save-dev

三、根底用法

3.1 变量

SASS容许应用变量，所有变量以$结尾

$color: #ccc;div {  color: $color;}

如果变量须要镶嵌在属性中之中，就必须须要写在#{}之中

$side: right;div {    border-#{$side}-radius: 10px;}

3.2 计算能力

SASS容许在代码中应用算式

$var: 10px;div {  width：(20px/2);  top: 10px + 20px;  left: $var * 2}

3.3 嵌套能力

个别咱们写多个选择器时，个别这样：

div h2 {  border:1px solid #ccc;}

应用sass能够写成：

div {  h2 {    border:1px solid #ccc;  }}

属性也能够嵌套,比方font-size属性，能够写成

div {  font：{    size：18px;  }}

能够应用&援用父元素

div { &::after { }}

四、代码重用

4.1 继承

SASS容许一个选择器，继承另一个选择器

.class1 {   color: #ccc;}

如果要继承class1，须要应用@extend命令

.class2 {  @extend .class1;  font-size: 18px;}

4.2 Mixin(混合)

应用@mixin申明代码块，达到重用代码块的作用，在须要用的中央应用@include调用

@mixin right { margin-right: 20px;}div {  @include right;}

@minxin能够设置参数以及参数默认值

@mixin left($value: 20px) {  margin-left: $value;}div {  @include left(10px)}

4.3 色彩函数

 lighten(#cc3, 10%) // #d6d65c   darken(#cc3, 10%) // #a3a329   grayscale(#cc3) // #808080   complement(#cc3) // #33c

4.4 引入文件

应用@import命令，用来引入内部文件
@import 文件门路

五、进阶用法

5.1 条件语句

div {  @if computed($width) > 10 { width: 10% }  @if computed($height) > 10 {    height: 10px;  } @else {    height: 20px;  }}

5.2 循环语句

for循环:

@for $i from 1 to 10 {   .content-#{$i} {      width: #{$i}px;   }  }

while循环:

　$x: 6;　　@while $x > 0 {  　　　　.item-#{$x} { width: $x + 10px; }  　　　　$x: $x - 1;  　　}z

each:

@each $member in a, b, c, d {   .#{$member} {      background-image: url("/image/#{$member}.jpg");   }  }

自定义函数

　@function count($n) {  　　　　@return $n + 1;  　　}　　div {  　　　　width: count(5px);  　　}