乐趣区

关于sass:sass常用方法

jiezi

一、什么是 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);  
  }
退出移动版