css预编语言sass使用语法详解
目录
-
- 1. 变量
- 2. 嵌套css规则
-
-
- 2.1 标识符&
- 2.2 群组选择器的嵌套
- 2.3 >、+和~
- 2.4 嵌套属性
-
- 3. 导入SASS文件
- 4. 混合器的使用(@mixin 与 @include)
-
-
- 给混合器传参
-
- 5. @extend 与 继承
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;
}
2. 嵌套css规则
sass的嵌套规则块可以使css规则一层层嵌套起来，看嵌套规则的位置就可以知道html标签的层次关系，使得css样式的可读性更高。
示例代码
<div class="box2">
<p>
<span>你好</span>
</p>
<div>
<span>hello</span>
<p> learning sass</p>
</div>
</div>
.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;
}
2.1 标识符&
当我们需要在某个父元素加上伪类时，由于解析规则的原因直接写嵌套里显示将会有问题，这时我们需要加标志符&，这样在解析时才能正确的解析。
示例代码
<div class="box2">
<p class="title">你好</p>
<div class="content">
<p> learning sass</p>
</div>
</div>
.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: '追加内容';
}
2.2 群组选择器的嵌套
- 选中某元素下的两个元素，设置一样的属性
.content .item1,.content .item2 { }
//sass嵌套写法
.content{
.item1,.item2{ }
}
- 选中不同元素下的相同元素或相同id/class，设置一样的属性
.title1 h1,.content h1{ }
//sass嵌套写法
.title1 ,.content{
h1{ }
}
示例代码
<div class="box2">
<p class="title1">
<h1>你好</h1>
</p>
<div class="content">
<h1>学习</h1>
<div class="item1">变量</div>
<div class="item2">嵌套</div>
</div>
</div>
.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;
}
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>
div{
h1{
background-color: #03A9F4;
}
~ p{
background-color: #E6A23C;
}
> span{
color: red;
}
+ section{
background-color: red;
}
}
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;
}
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;
}
给混合器传参
可以给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;
}
5. @extend 与 继承
继承某个选择器的样式（从而实现代码复用）
语法：
@extend 选择器
.tips{
font-size: 13px;
text-align: center;
}
.errTips{
color: red;
@extend .tips
}