sass常用方法

一、什么是sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，提供了许多便利的写法，大大提高的开发效率。下面总结了SASS的主要用法，想要了解更多可以查阅文档

二、安装

1、由于sass依赖于Ruby，因此需要先安装Ruby，然后执行gem install sass
2、若在vue-cli或react-create-app中使用，在项目中安装依赖：

1
2
npm install node-sass --save-dev
npm install sass-loader --save-dev

三、基础用法

3.1 变量

SASS允许使用变量，所有变量以$开头

1
2
3
4
$color: #ccc;
div {
  color: $color;
}

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

1
2
3
4
$side: right;
div {
    border-#{$side}-radius: 10px;
}

3.2 计算能力

SASS允许在代码中使用算式

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

3.3 嵌套能力

一般我们写多个选择器时，一般这样：

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

使用sass可以写成：

1
2
3
4
5
div {
  h2 {
    border:1px solid #ccc;
  }
}

属性也可以嵌套,比如font-size属性，可以写成

1
2
3
4
5
div {
  font：{
    size：18px;
  }
}

可以使用&引用父元素

1
2
3
4
div {
 &::after {
 }
}

四、代码重用

4.1 继承

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

1
2
3
.class1 {
   color: #ccc;
}

如果要继承class1，需要使用@extend命令

1
2
3
4
.class2 {
  @extend .class1;
  font-size: 18px;
}

4.2 Mixin(混合)

使用@mixin声明代码块，达到重用代码块的作用，在需要用的地方使用@include调用

1
2
3
4
5
6
@mixin right {
 margin-right: 20px;
}
div {
  @include right;
}

@minxin可以设置参数以及参数默认值

1
2
3
4
5
6
@mixin left($value: 20px) {
  margin-left: $value;
}
div {
  @include left(10px)
}

4.3 颜色函数

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

4.4 引入文件

使用@import命令，用来引入外部文件
@import 文件路径

五、进阶用法

5.1 条件语句

1
2
3
4
5
6
7
8
div {
  @if computed($width) > 10 { width: 10% }
  @if computed($height) > 10 {
    height: 10px;
  } @else {
    height: 20px;
  }
}

5.2 循环语句

for循环:

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

while循环:

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

each:

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

自定义函数

1
2
3
4
5
6
7
　@function count($n) {  
　　　　@return $n + 1;  
　　}

　　div {  
　　　　width: count(5px);  
　　}