css预编语言sass使用语法详解

1. 变量

• 声明 ： $变量名：变量值
• 引用： 属性： $变量名

示例代码

$bgColor : #aaaaff;
$borderColor : #ee15caee;
$paddingStyle : 10px;
$shadowSmall: 0px 0px 20px $borderColor;

.box{
	width: 100px;
	height: 200px;
	background-color: $bgColor;
	border:  1px solid $borderColor;
	padding: $paddingStyle;
	box-shadow: $shadowSmall;
}	

//编译后
.box{
	width: 100px;
	height: 200px;
	background-color: #aaaaff;
	border:  1px solid #ee15caee;
	box-shadow: 0px 0px 20px #ee15caee;
}	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 嵌套css规则

sass的嵌套规则块可以使css规则一层层嵌套起来，看嵌套规则的位置就可以知道html标签的层次关系，使得css样式的可读性更高。

示例代码

<div class="box2">
	<p>
		<span>你好</span>				
	</p>
	<div>
		<span>hello</span>
		<p> learning sass</p>
	</div>
</div>
1
2
3
4
5
6
7
8
9

.box2{
	p span{
		color: red;
		font-size: 28px;
	}	
	div{
		span{
			color:gold;
		}
		p{
			background-color: #ffaaff;
			padding: 20px;
		}			
	}	
}

//编译后
.box2 p span{
	color: red;
	font-size: 28px;
}
.box2 div span{
	color:gold;
}
.box2 div p{
	background-color: #ffaaff;
	padding: 20px;
}
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
26
27
28

2.1 标识符&

当我们需要在某个父元素加上伪类时，由于解析规则的原因直接写嵌套里显示将会有问题，这时我们需要加标志符&，这样在解析时才能正确的解析。

示例代码

<div class="box2">
	<p class="title">你好</p>						
	<div class="content">		
		<p> learning sass</p>	
	</div>
</div>
1
2
3
4
5
6

.box2{
	p {
		color: red;		
	}	
	div{	
		p{
			background-color: #ffaaff;
			padding: 20px;
		}		
		&:hover{
			border: 1px solid red;
		}
		&::after{
			content: '追加内容';
		}
	}	
}

//编译后
.box2 p {
	color: red;
}
.box2 div p{
	background-color: #ffaaff;
	padding: 20px;
}
.box2 div:hover{
	border: 1px solid red;
}
.box2 div::after{
	content: '追加内容';
}
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
26
27
28
29
30
31
32

2.2 群组选择器的嵌套

• 选中某元素下的两个元素，设置一样的属性

.content .item1,.content .item2 { }
//sass嵌套写法
.content{
	.item1,.item2{ }
}
1
2
3
4
5

• 选中不同元素下的相同元素或相同id/class，设置一样的属性

.title1 h1,.content h1{ }
//sass嵌套写法
.title1 ,.content{
	h1{ }
 }
1
2
3
4
5

示例代码

<div class="box2">
	<p class="title1">
		<h1>你好</h1>	
	</p>	
	<div class="content">
		<h1>学习</h1>		
		<div class="item1">变量</div>
		<div class="item2">嵌套</div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10

.box2{
	p h1{
		color: red;
		font-size: 28px;
	}	
	div{
		h1{
			color:gold;
		}
		.item1,.item2{
			font-size: 20px;
			font-weight: 600;
		}
		
	}
	.title1,.content{
		h1 {
			border: 2px solid black;
		}			
	}	
}

//编译后
.box2 p h1{
	color: red;
	font-size: 28px;
}
.box2 div h1{
	color:gold;
}
.content .item1,.content .item2{
	font-size: 20px;
	font-weight: 600;
}
.title1 h1,.content h1{
	border: 2px solid black;
}
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
26
27
28
29
30
31
32
33
34
35
36
37

2.3 >、+和~

sass嵌套的写法，使得 子选择器>，同层相邻选择器+，同层全体选择器~ 的应用将更加便利

示例代码

<div >
	<h1>标题123</h1>
	<span>一二三</span>
	<p>123</p>	
	<span>四五六</span>
</div>
<p>box1下的div同层第一个p标签</p>
<section>我是第一个section元素的内容</section>
<section>我是第二个section元素的内容</section>
<p>div同层第二个p标签</p>
1
2
3
4
5
6
7
8
9
10

div{
	h1{
		background-color: #03A9F4;
	}			
	~ p{
		background-color: #E6A23C;
	}
	> span{
		color: red;
	}
	+ section{
		background-color: red;
	}
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.4 嵌套属性

对于类似这样的属性 box-sha，可以进行嵌套写，将更精简代码

.myDiv{
	width: 120px;
	height: 120px;
	box-shadow: 0 6px 8px  red;
	border:{
		radius:50%;
		color: green;
		style: solid;
	}
}
//编译后
.myDiv{
	width: 120px;
	height: 120px;
	box-shadow: 0 6px 8px  red;
	border-radius: 50%;
	border-color: green;
	border-style: solid;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 导入SASS文件

Sass 支持 @import 指令。Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。
语法：
@import scssfilename;
注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。也可以导入 CSS 文件。
eg： @import “mainStyle”

4. 混合器的使用(@mixin 与 @include)

@mixin 指令用于定义一个可以在整个样式表中重复使用的样式。
@include 指令用于将混入（mixin）引入到文档中。
语法：
@mixin minxinName{}
@include minxinName；

@mixin main-Title{
	font-size: 25px;
	color: #00557f;
	font-weight: bold;
}
.title{
	text-align: center;
	@include main-Title;
}

//编译后
.title{
	text-align: center;
	font-size: 25px;
	color: #00557f;
	font-weight: bold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

给混合器传参

可以给minxin可以像函数一样接收传参，从而实现定制化，形参采用sass变量名的写法，可设置默认值。
语法：
@mixin minxinName（$ name1，$ name2，$name3：defaultValue）{}
@include minxinName（name1Value1，name2Value2）；

@mixin main-Title($fontColor,$fontSize){
	font-size: $fontSize;
	color: $fontColor;
	font-weight: bold;
	
}
.title{
	text-align: center;
	@include main-Title(#aaaaff,20px);
}

//编译后
.title{
	text-align: center;
	font-size: 20px;
	color: #aaaaff;
	font-weight: bold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5. @extend 与 继承

继承某个选择器的样式（从而实现代码复用）
语法：
@extend 选择器

.tips{
	font-size: 13px;
	text-align: center;		
}
.errTips{
	color: red;
	@extend .tips
}
1
2
3
4
5
6
7
8