sass基本使用

发表于 分类于

注意：sass有两种文件格式，同时也是两种不同的语法体系，默认使用.scss的语法！

基本操作

变量声明

形式为：$ + 变量名: value;，值可以是css的任意属性值（包括各种颜色）；如：

1
2
3
4
5
$blue: #3399ff;

body{
    backgrond-color: $blue;
}

需要注意的是属性值不必加引号！值还可以定义为列表（list）或映射（map）的形式，形成多值，可以按照索引进行取用，如：

1
2
3
4
5
6
7
8
9
$color: #ff3366 #66ff99 #6699ff;

.div1{
    color: nth($color, 1);
}

.div2{
    color: nth($color, 3);
}

利用nth函数对变量进行指定索引的取值，索引从1开始；（当一些css属性值本身就是多个值用空格断开的时候，是否也可以把其当做列表？）

注释

sass中有两种注释风格，一种就是css中使用的那种/* */，另一种就是单行注释//（单行注释不会编译到css文件中）；

导入

在scss文件中可以导入工程内的其它scss文件（包括带_的文件），语法为：

1
@import ('someFile');

导入文件时不需要添加scss文件的后缀，也不需要添加_（若是以下划线_开头的文件）；导入后，就相当于把导入的文件中所有内容都添加到当前文件中！

嵌套

在sass中代码可以嵌套，即在一个选择器内部再嵌入子选择器（最后并非一定是父子关系，但通常是这么做的）；如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

编译成正常css为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

&符号

在嵌套的时候，有一个特殊符号&代表该级选择器的父选择器（即嵌套的上一层选择器），如：

1
2
3
4
5
6
7
8
a{
  text-decoration: none;
  color: #333333;

  &:hover{
    color: #3366ff;
  }
}

编译后的代码为：

1
2
3
4
5
6
7
a {
  text-decoration: none;
  color: #333333;
}
a:hover {
  color: #3366ff;
}

扩展/继承

通过@extend继承任何已定义的选择器样式（貌似与先后顺序无关，即前面定义的样式可以继承后面定义的样式），如：

1
2
3
4
5
6
7
8
9
10
11
#div1{
  background-color: #00ffdd;
  width: 100px;
  height: 100px;
}

#div2{
  @extend #div1;
  font-size: 14px;
  color: #000;
}

占位符

可以通过占位符%的形式来定义一个专门用来被继承的基础样式选择器，如：

1
2
3
4
5
6
7
8
9
10
%box{
    border: 1px solid #3399ff;
    border-radius: 5px;
    padding: 5px;
}

.box1{
    @extend: %box;
    color: #333;
}

通过%定义的占位符选择器，只会在被继承使用的地方进行编译，本身并不会单独的编译成css代码！即如果没有一个选择器继承使用该占位符选择器的样式，该占位符选择器的内容是不会被编译的。

混合宏（mixin）

混合宏有点类似于函数，可接受一组参数（当然也可以定义无参数的），然后返回一段css代码，如：

1
2
3
4
5
@mixin box($style){
  -webkit-box-sizing: $style;
  -moz-box-sizing: $style;
  box-sizing: $style;
}

然后可以通过@include命令来引用定义的混合宏：

1
2
3
#box{
  @include box(border-box);
}

编译后为：

1
2
3
4
5
#box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

参考文档

  1. sass入门 - sass教程（w3plus）
  2. sass语法（w3plus）