sass系列之 - sass 从脚开始(入门,多图)

上篇文章给大家讲解了一下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变量

这里先讲个部分文件的概念
部分文件
sass变量
编译成css后
sass变量编译后

3. 选择器、属性 的嵌套

选择器嵌套
编译成css后
这里写图片描述

4. 父选择器 &

父选择器
编译成css后
这里写图片描述

5. 跳出嵌套

这里写图片描述
编译成css后
这里写图片描述

6. 继承

这里写图片描述
编译成css之后
继承

7. 链式继承

链式继承
编译成css后
链式继承

8. 继承的作用域

这里写图片描述
这个我还得去仔细文档

9. 交叉继承。

说实话,刚接触sass,这里遇到瓶颈,没理解透。以后理解了再更新吧。QAQ

10. 占位符%

占位符
编译成css后
占位符

(这篇博文是以实例讲解,希望大家能看得懂)
好啦。sass的基础入门差不多就这样,由于是根据个人理解所编写的,所以有的地方可能用词不当,求指正,我以后也会常常查看我写的这些博文。发现问题我会及时修改,以免对初学者造成误导。
后续我会更新sass的进阶博文。
欢迎大家评论区评论,不吝赐教,有啥问题我也会尽我所能为你们讲解。谢谢大家的查看。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值