变量

在scss当中定义变量的语法如下


$变量名 : 变量值;

代码块外部定义的变量可以在全局范围内使用

在代码块内部定义的变量是局部变量
例如
1
2
3
4
5
6
.box {
  $color:red;
  a{
    color:$color;
  }
}

如果该变量的值需要嵌入到字符串当中 , 需要加#{ }

1
2
3
4
$side : left;
.box {
  border-#{$side}-radius:5px;
}

默认变量

sass的默认变量一般用来设置默认值 , 然后根据需求来进行覆盖
例如

1
2
$a_padding : 20px !default;
$a_padding : 6px;

如果对默认变量的值进行了覆盖 , 那么实际输出的就是覆盖之后的值 , 否则输出的就是默认值

如果是在一个单文件当中 , 并没有必要这样做
默认变量在组件化开发的时候会非常有用

什么时候需要声明变量

  • 该值至少重复出现了两次
  • 该值至少可能会被更新一次
  • 该值所有的表现都与变量有关

嵌套

使用嵌套的方式来编写css代码 , 可以使元素之间的层级关系更清晰 , 代码的可读性更强

选择器嵌套

1
2
3
4
5
div {
  h1 {
    color :red;
  }
}

编译后的结果为

1
2
3
div h1 {
  color : red;
}

前面如果加上 >可以作为父子选择器

在嵌套的代码块内 , 可以使用&引用父元素
比如

1
2
3
4
a {
  &:hover{color:red;}
  &:visited{color:gray;}
}

属性嵌套

有一些复合属性可以使用嵌套的方式来写
比如border

1
2
3
4
5
6
p {
  border : {
    color:red;
    width:2px;
  }
}

注意 : border的后面必须要加上冒号

注释

SCSS可以有两种风格的注释
一种是标准的css注释 /* */
编译会保留
另一种是单行注释 // , 编译过程不保留

Mixin

Mixin有点像C语言的宏定义 , 是可以重用的代码块

1
2
3
4
5
6
7
8
9
//使用@mixin命令,定义一个代码块
@mixin left {
  float : left;
  margin-left : 10px;
}
//使用@include调用这个mixin
.box {
  @include left;
}

mixin的强大之处 , 在于可以去指定参数和缺省值

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

如果引入的时候不传参数 , 则使用缺省值
实例 : 生成浏览器前缀

1
2
3
4
5
6
7
8
9
10
11
12
@mixin rounded($vert, $horz, $radius: 10px) {
　border-#{$vert}-#{$horz}-radius: $radius;
　-moz-border-radius-#{$vert}#{$horz}: $radius;
　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li {
  @include rounded(top,left);
}
#footer {
  @include rounded(top,left,5px);
}

颜色函数

颜色函数是基于某个颜色进行的色彩调整
利用这些函数 , 可以很方便完成界面上风格统一的色彩搭配
涉及色彩的部分 , 可以很方便修改 , 完成主题风格的切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$base_color : chocolate;

@mixin size {
  width:200px;
  height:100px;
}

.div1 {
  @include size;
  background:{
    color: darken($base_color, 10%);
  }
}
.div2 {
  @include size;
  background:{
    color: $base_color;
  }
}
.div3 {
  @include size;
  background:{
    color: lighten($base_color, 10%);
  }
}

效果图
color_function

常用的颜色函数

  • darken , lighten - 调整亮度 , 变暗/变亮
  • sturate , desaturate - 增加/减小 饱和度
  • adjust-hue - 调整 色相
  • grayscale - 灰度处理
  • complement - 色彩反相

文件引入

使用@import 引入另一个样式文件 , 可以是scss文件 , 也可以是css文件

1
2
@import "path/filename.scss"
@import "path/base.css"

继承

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

1
2
3
4
5
6
7
.class1 {
  border : 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size : 120%;
}

在编译过后 , 会生成

1
2
3
4
5
6
.class1, .class2 {
  border : 1px solid #ddd;
}
.class2 {
  font-size:120%;
}

相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率

流程控制

条件语句

使用@if和@else可以进行判断

1
2
3
4
5
@if lightness($color) > 30% {
　background-color: #000;
} @else {
　background-color: #fff;
}

循环语句

for循环

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

while循环

1
2
3
4
5
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

each循环 , 类似于迭代器

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

each循环

自定义函数

使用@function可以自定义一个函数

1
2
3
4
5
6
@function double($n) {
  @return $n * 2;
}
#sidebar {
  width : double(5px);
}

附 : 知识结构梳理
Sass知识结构梳理