sass和compass学习笔记

sass和compass学习笔记

学习sass和compass做成的思维导图:

以下是补充:

1、对比起混合器,使用继承生成的css代码体积会更小,因为只是重复了选择器

2、.scss(使用大括号)和.sass(使用缩进)可以在同一个项目中使用,但不能在同个文件使用

3、原生css@import会降低性能,必须先把引用文件下载才能渲染

4、sass是css的超集,支持css的所有用法,compass是sass的工具库

5、类名一定要有语义化作用,而不是视觉化的表现,比如错误提示,类名应该使用.error而不是.red

6、可以使用%用来构建只用来继承的选择器

7、sass中@media query可以内嵌在css规则中,在生成css的时候,media query才会被提升到样式最高层次,避免了重复书写选择器以及打乱样式表

8、浏览器解析css是将从右到左解析的,嵌套使样式渲染低效,增加了样式修饰的权重,制造了样式位置依赖。sass中使用at-root指明输出位置

9、sass中具备@each,@if,@for等循环控制器,可实现校验等功能

10、在config.rb中修改output_style指定编译方式

11、当output_style=:compressed时注释会被去掉,如果想要保留某个注释可加个!(/*!...*/)

猜你喜欢

转载自blog.csdn.net/Anerror/article/details/81808161