sass语法

发表于 | 分类于

1. 变量

sass通过$声明变量，例如：

1
2
3
4
5
$headline-ff:Arial;
$main-sec-ff:Tahoma;
h1{
	font-family: $headline-ff;
}

2. @import

利用sass的@import能力，创建变量文件，并引入宿主文件：
宿主文件screen.scss代码：

1
2
3
4
@import "variables" 
h1{
   font-family: $headline-ff;
}

@import时前置下划线 和 后缀.scss或者.sass可以省略，所以统一目录下 有了_variables文件就不能再有variables文件
变量文件_variables.scss代码：（利用compass watch 时，如果创建的scss文件名前加入了下划线_,则不会被编译对应的css文件）

1
2
$headline-ff:Arial;
$main-sec-ff:Tahoma;

经过编译后的screen.css代码：

1
2
3
h1 {
  font-family: Arial;
}

原生css中@import与scss中@import的区别：
原生css@import的缺点：
1、需要放到代码最前端才生效
2、当浏览器读到这条@import指令时才会加载对应的@import的文件。性能差
scss中@import特点：
1、可以放到scss文件的任意位置，scss在编译后会将 宿主文件和 变量文件 合并到一个css文件
2、宿主文件中可以任意引用变量文件中的 变量和mixin函数。
3、可以一次@import多个文件，利用逗号分隔:
@import “_variables.scss”,”compass/reset”;

3. 注释：

1、支持//和/**/
2、在编译后的css文件中，以//注释的内容不会被输出，以/**/注释的内容会被输出。
3、编译后的css文件中会有自动生成的注释信息，方便我们定位相应的.scss文件，方便样式调试。

4. 嵌套语法：

选择器嵌套：

1
2
3
4
5
6
7
8
$headline-ff:Arial;
$main-sec-ff:Tahoma;
div{
	font-family: $main-sec-ff;
	h1{
		font-family: $headline-ff;
	}
}

编译后的css文件：

1
2
3
4
5
6
div {
  font-family: Tahoma;
}
div h1 {
  font-family: Arial;
}

属性嵌套：

1
2
3
4
5
6
div{
	font:{  //不要丢掉冒号":"
		family: Tahoma;
		size: 16px;
	}
}

编译后的css文件：

1
2
3
4
div {
  font-family: Tahoma;
  font-size: 16px;
}

区别下面两种写法：

1
2
3
4
5
6
7
8
9
10
a{
	:hover{
		color: #c50000
	}
}
a{
	&:hover{   //”&“为父类选择器。
		color: #c50000
	}
}

编译后的css文件：

1
2
3
4
5
6
a :hover {
  color: #c50000;
}
a:hover {
  color: #c50000;
}

两者区别见https://xieshuangting.github.io/2018/07/02/a-hover-和a-hover-区别/

sass的使用见https://xieshuangting.github.io/2018/07/01/sass的使用/