SCSS是什么
回答这个之前, 我们先来看看这个例子:
<html>
<head>
<style>
.parent{
width: 100%;
background: pink;
}
.parent .child{
width: 80%;
background: goldenrod;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
this is a test
</div>
</div>
</body>
</html>
这个带css的html很简单, 它输出如下结果:
image.png
现在我们用SCSS语法来改进这个程序. 首先要安装SCSS, 官方的安装文档在这里: (https://www.sass.hk/install/)
然后, 建议把文件夹改造成我这个样子:
image.png
然后, 在static的目录里打开命令行, 运行这句命令:
sass --watch scss/:css/
然后, 在html目录里随便加个html, 输入如下内容:
<html>
<head>
<link rel="stylesheet" type="text/css" href='../static/css/demo1_1.css'></link>
</head>
<body>
<div class="parent">
<div class="child">
this is a test
</div>
</div>
</body>
</html>
然后在scss目录下新建demo1_1.scss, 输入如下内容:
.parent{
width: 100%;
background: pink;
.child{
width: 80%;
background: goldenrod;
}
}
通过上面的文件, 很容易就看出scss是做什么用了:
- 它是对css的一个增强工具集,方便你写出更容易模块化的css代码
- 只要你按照scss语法写出代码, 并运行scss命令监控文件. 它就会自动检查出文件更新, 并将新的css代码生成到你指定的目录. (在我们的例子里是从 static/scss --> static/css)
- html文件里, 实际引用的文件还是css
这个简单的例子暂时不能看出scss有多么强大, 但其实, 比如程序员熟知的bootstrap, 它的源码就是用scss来组织css代码的. 如果你写过几千行的css代码, 你肯定会写过这样的代码:
.a{
//
}
.a .b{
//
}
.a .b .c{
}
.a .b .c .d{
}
而在scss里, bcd都可以嵌套到a 里面实现, 极大节省了代码量.
结论
这篇文章的目的是让你先建立起scss的感性认识, 安装好环境, 随着这个系列文章的深入, 你会慢慢了解用scss来写css代码的好处.
