上篇文章给大家讲解了一下sass的配置,那么接下来,就让我们一起体验一下sass这个有趣的东西。
在上篇博客中,我们安装了一个叫compass的东西,这个东西是基于sass的一个库。相当于jQuery和js的关系。
现在呢,我们先开始编写sass的准备工作。
创建compass工程
compass create [dir-name]
生成如下目录
我们记下来要书写的.scss文件放在sass目录下
接下来给大家介绍compass的基本操作指令
compass compile
// 该指令会默认监视上述sass stylesheets 两个目录,只有当.scss文件内容改变时,才会自动编译生成相对应css文件,其他未改变的.scss不会被编译
compass compile --force
// 效果如上相同,但是这个命令执行时,会强制把sass目录下的.scss文件全部先编译成css文件,并保存在stylesheets目录下。
//通过compass监听文件并且控制生成格式(四种)
compass watch --force -s compact/expanded(正常开发中格式)/compressed(压缩)/nested
sass基础语法 beginning
1. sass的注释:
单行注释: // …… 静默注释,不会被编译到css文件中
多行注释: /……. / 会被编译到css文件中(!compressed)
多行注释: /!…../ 即使编译成css的格式为compressed,依旧会被编译到css中
2. sass变量
这里先讲个部分文件的概念
编译成css后
3. 选择器、属性 的嵌套
编译成css后
4. 父选择器 &
编译成css后
5. 跳出嵌套
编译成css后
6. 继承
编译成css之后
7. 链式继承
编译成css后
8. 继承的作用域
这个我还得去仔细文档
9. 交叉继承。
说实话,刚接触sass,这里遇到瓶颈,没理解透。以后理解了再更新吧。QAQ
10. 占位符%
编译成css后
(这篇博文是以实例讲解,希望大家能看得懂)
好啦。sass的基础入门差不多就这样,由于是根据个人理解所编写的,所以有的地方可能用词不当,求指正,我以后也会常常查看我写的这些博文。发现问题我会及时修改,以免对初学者造成误导。
后续我会更新sass的进阶博文。
欢迎大家评论区评论,不吝赐教,有啥问题我也会尽我所能为你们讲解。谢谢大家的查看。