关于sass: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中应用，在我的项目中装置依赖：

npm install node-sass --save-dev
npm 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);  
　　}