简介
sass是世界上最好的css扩展语言。在正常的编写css的基础上,增加了很多变量,函数,循环,判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数(如颜色加深,颜色淡化)用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。
- css编写时权重难以控制,嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。
- sass不能直接被浏览器识别,所以需要进行编译成正常的css文件才能被浏览器使用。
初体验
- html 结构
<div id="wrap">
<div class="content">
<div class="article">
<p>
<span>文字</span>
</p>
</div>
</div>
</div>
- 使用css编写样式:
#wrap .content{
}
#wrap .content .article{
}
#wrap .content .article p{
}
#wrap .content .article p span{
}
- 使用sass编写样式:
#wrap{
.content{
.article{
p{
span{
}
}
}
}
}
安装
- 以前的 sass 需要依赖一个 ruby 的环境
- 现在的 sass 需要依赖一个 python 的环境
- 但是我们的 node 强大了以后,我们只需要依赖 node 环境也可以
- 需要我们使用 npm 安装一个全局的 sass 环境就可以了
- 安装全局 sass 环境:
npm install sass -g
- 检查是否安装成功:
sass --version
编译
- 有了全局的 sass 环境以后,我们就可以对 sass 的文件进行编译了
- sass 的文件后缀有两种,一种是
.sass
一种是.scss
- 他们两个的区别就是有没有
{}
和;
.scss
文件
h1 {
width: 100px;
height: 200px;
}
.sass
文件
h1
width: 100px
height: 200px
单次编译
- 我们比较常用的还是 .scss 文件,因为 .sass 我们写不习惯,当然,如果你能写习惯也比较好用
- 我们先不管里面的的什么内容,至少这个 .scss 或者 .sass 文件浏览器就不认识
- 我们就要用指令把 这两种 文件变成 css 文件
- 编译命令:
sass 被编译的文件 编译后的文件名
- 例如:
sass index.scss index.css
- 这样我们就能得到一个 css 文件,在页面里面也是引入一个 css 文件就可以了
实时编译
- 上面的编译方式只能编译一次
- 当你修改了文件以后要从新执行一遍指令才可以
- 实时编译就是随着你文件的修改,自动从新编译成 css 文件
- 监视文件变化的命令:
sass --watch 被编译的文件:编译后的文件
- 例如:
sass --watch index.scss:index.css
- 然后你只要修改 index.scss 文件的内容,index.css 文件中的内容会自动更新
实时监控目录
- 之前的实时监控只能监控一个文件
- 但是我们有可能要写很多的文件
- 所以我们要准备 2 个文件夹,一个放 sass 文件 ,一个放 sass 编译后的 css 文件。文件夹名称就叫 sass 和 css
- 监视文件夹变化的命令:
sass --watch 被编译的文件所在文件夹:编译后文件所在文件夹
- 例如:
sass --watch sass:css
- 这样,只要你修改 sass 文件夹下的内容,就会实时的相应在 css 文件夹中
- 你新添加一个文件也会实时响应
- 但是你删除一个文件,css 文件夹中不会自动删除,需要我们自己手动删除