sass
是一个 css
的预编译工具css
sass
写出来的东西 浏览器不认识css
在浏览器中运行$
来定义变量// 定义一个 $c 作为变量,值是 红色
$c: red;
h1 {
// 在使用 $c 这个变量
color: $c;
}
h1 {
// 这个 $w 变量只能在 h1 这个规则块中使用
$w: 100px;
width: $w;
}
sass
里面我们最长用到的就是嵌套了h1 {
width: 100px;
div {
width: 200px;
}
}
// 编译结果
h1 {
width: 100px;
}
h1 div {
width: 200px;
}
ul {
width: 100px;
li {
width: 90px;
div {
width: 80px;
p {
width: 70px;
span: {
color: red;
}
}
}
}
}
&
我们可以使用div {
width: 100px;
height: 100px;
:hover {
width: 200px;
}
}
// 我想的是 div 被鼠标悬停的时候 width 变成 200
// 但是编译结果却是
div {
width: 100px;
height: 100px;
}
div :hover {
width: 200px;
}
&
来连接了div {
width: 100px;
height: 100px;
&:hover {
width: 200px;
}
}
// 编译结果
div {
width: 100px;
height: 100px;
}
div:hover {
width: 200px;
}
div {
width: 100px;
.box1, .box2, .box3 {
color: red;
}
}
// 编译结果
div {
width: 100px;
}
div .box1, div .box2, div .box3 {
color: red;
}
h1, h2, h3 {
width: 100px;
.box {
color: red;
}
}
// 编译结果
h1, h2, h3 {
width: 100px;
}
h1 .box, h2 .box, h3 .box {
color: red;
}