Sass是一个将脚本解析成css的脚本语言,即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”,与类似,使用缩进来区分代码块,并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开
大致就是scss可以实时转换成css文件
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。
如下我们嵌套一个导航栏的样式:
header {
width: 100%;
height: 40px;
background-color: black;
nav {
width: 1200px;
height: 40px;
margin: 0 auto;
background-color: red;
ul {
display: flex;
justify-content: space-between;
li {
list-style: none;
a {
display: inline-block;
text-decoration: none;
color: white;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
&:hover a {
border-bottom: 5px solid green;
color: black;
background-color: white;
}
}
}
}
}
css代码
header {
width: 100%;
height: 40px;
background-color: black;
}
header nav {
width: 1200px;
height: 40px;
margin: 0 auto;
background-color: red;
}
header nav ul {
display: flex;
justify-content: space-between;
}
header nav ul li {
list-style: none;
}
header nav ul li a {
display: inline-block;
text-decoration: none;
color: white;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
header nav ul li:hover a {
border-bottom: 5px solid green;
color: black;
background-color: white;
}
可以给属性设置变量
//定义变量与值
$bgcolor: lightblue;
$color: darkblue;
$fontsize: 18px;
//使用变量
body {
background-color: $bgcolor;
color: $color;
font-size: $fontsize;
}
效果依然存在
继承
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。
.btn {
width: 100px;
height: 40px;
border-radius: 10px;
}
.btn1 {
@extend .btn;
background-color: gainsboro;
border: 1px solid gray;
color: red;
}
css代码如下:
btn1{
width:100px;
height:40px;
border-radius:10px;
background-color:gainsboro;
border:1px solid gray;
color:red;
}