CSS 预处理理论

265 阅读2分钟

变量,mixin,函数,继承,都是复用啊!

计算功能和界面样式都会有结构

与JS负责的「计算功能」不同,CSS负责是交互界面的样式(风格、布局和动画)的定义;而与JS相似,当 程序变得复杂后,计算功能出现结构,界面样式也现结构,界面样式(静态风格布局等)也会有逻辑结构,和重复的内容,这些都需要进行结构分层,来提高来维护性(适应人的推理特性)

CSS“程序”与工作流的改变

CSS传统是手动写的,写的「样式定义」直接在浏览器上运行; 通过 preprocessor 是怎样的情景?preprocessor是个什么性质的工具,针对的任务是什么? 第一, 通过 preprocessor,「样式制作」流程肯定改变; 第二,所以任务,都是样式「程序」的制作; 第三,通过 preprocessor,样式定义 更像 一个「程序」,就是JS通过编译器 更像一个「程序」,而不是手动编写机器指令; 第四,

随着项目规模增大,CSS 样式表(定义数据)变得复杂,不好维护

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. CSS 样式 不好 维护 具体指什么?预处理技术又是如何提高可维护性?

这个问题,得先了解CSS 样式数据完成什么样的任务?

项目规模增大表现

第一,为了支持浏览器多样性,需要维护兼容性,例如添加前缀(vendor prefixes) 第二,模块化的需要,样式大量重复(solved code repetitions and maintainability problems)

用抽象 解决规模增大

Sass, as Dan will teach you in this book, has all the tools of abstraction we need. • Repetitive values become variables. • Repetitive groups of styles become extends. • Complex rulesets and tedious vendor prefixing become mixins. With those translations comes CSS that is manageable and maintainable at any scale.