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时注释会被去掉，如果想要保留某个注释可加个！（/*！...*/）

​