- 入门教程可以参考相关网站
- 内容部分来自互联网，部分原创。
- 本文整理自上周五的SCSS经验分享PPT。
- 仅分享几点使用感受，有问题可以联系我 wangyan@weixinhai.com
1. 先安利几个有关scss的网站
- scss中文官网
http://sass.bootcss.com- 阮一峰的scss用法指南
http://www.ruanyifeng.com/blog/2012/06/sass.html- 阮一峰的compass用法指南
http://www.ruanyifeng.com/blog/2012/11/compass.html- w3cplus有关scss的首页
http://www.w3cplus.com/blog/tags/302.html- 一个在线scss编译网站
http://www.sassmeister.com
2.然后贴几张图
scss文件之间如何相互 import
- 4.1.png 中 _reset.scss文件在 4.2.png 中 base.scss 中被 @import "reset"，生成了 4.3.png 的css文件。 _reset保证不会再单独生成一份 reset.css文件，如果有需求，同样可以生成reset.css，只需要将 _reset.scss改名为 reset.scss 即可。
4.1.png
4.2.png
4.3.png
2.这是我们项目的scss文件目录结构和import顺序。清晰的scss结构和某种程度的模块化也是项目健壮的评判标准之一。
8.1.png
8.2.png
废话不多说，直接scss源码和生成的css文件对比图。
1.这里是用变量，mixin 生成了三个 .btn的类，使用了变量。
1.1.png
1.2.png
2.这里是使用了变量，％，&，mixin生成了 .btn的类
2.1.png
2.2.png
3.和上一个例子很像，对比来看可以看出当 @extend 时，如果@extend .btnHover ，会生成多余的代码，而使用 @extend %btnHover则不会。
3.1.png
3.2.png
4.这里使用了计算，从而得到我们希望的宽度单位。
6.1.png
6.2.png
5.这里是我们项目中的实际代码通用的组件样式放在 _component.scss文件中，各个不同组件样式之间是并列关系，不相互嵌套，可全局应用。
7.1.png
6.下面两图为页面元素较为简单的页面：适当使用嵌套和条件函数，以编译出来的css代码最精简和scss代码量较小且易维护为目标。
7.3.png
7.4.png
7.下面两图为页面较为复杂的页面：根据类名的命名规则和页面结构适当嵌套，有些时候类名起的语义化很好则不必过多层次嵌套。由于每一个文件里的代码都被一个大类包裹起来，所以写在该文件中的代码不会影响到其他页面的元素，某中程度上实现了css modules。
7.2.png
7.5.png
3. 总结
新技术的出现都是为了提高生产效率，前端已经不是那个无需配置，直接上手，所见即所得的时代。希望更多的经验交流，相互学习，共同进步。技术在不断发展和创新，我们也要迎头赶上，终身学习应该成为一种习惯。对知识的追求和想要改造世界的渴望，十分努力加上如果运气好，下一个颠覆性的产品或许就会诞生在极欧。
网友评论