67 |
68 |
69 |
79 |
80 |
81 |
82 |
83 |
84 |
86 |
87 |
88 |
90 |
91 |
92 |
95 |
108 |
110 |
111 |
112 |
119 |
120 |
121 |
123 |
128 |
134 |
135 |
136 |
160 |
161 |
162 |
170 |
171 |
172 |
182 | 重要？不重要？
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
195 |
196 |
197 |
204 |
205 |
206 |
215 |
216 |
217 | eg. 嵌套语法 (WHATWG 的
218 |
219 |
239 |
240 |
241 |
242 |
243 |
245 | 
246 |
247 |
250 |
251 |
252 |
254 |
275 |
276 |
277 |
278 |
285 |
286 |
287 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
299 |
300 |
301 |
303 |
310 |
312 |
313 |
314 |
316 | 输入 (标准 CSS)
317 |
321 |
339 |
340 |
341 |
348 |
349 |
350 |
357 |
358 |
359 |
369 |
370 |
371 |
378 |
379 |
380 |
383 |
384 |
385 |
393 | 397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
406 |
407 |
408 |
415 |
416 |
417 |
420 |
421 |
422 |
424 |
430 | via bootstrap/less/mixins/vendor-prefixes.less
431 |
432 |
433 |
434 |
436 |
449 |
450 |
451 |
452 |
458 |
459 |
460 |
468 |
469 |
470 |
479 |
480 |
481 |
487 |
496 |
497 |
498 |
499 |
501 |
502 |
503 | Processing CSS
70 | 71 |顾轶灵 @ Baidu EFE
72 | 77 | 78 |Why process CSS?
85 |CSS 的痛点
89 |语法限制
93 |Too simple
(some times naïve)
.post {
96 | background-color: white;
97 | color: rebeccapurple;
98 | }
99 |
100 | .post h1, .post h2, .post h3,
101 | .post h4, .post h5, .post h6 {
102 | /* reversed colors */
103 | background-color: rebeccapurple;
104 | color: white;
105 | }
106 | DRY? No.
109 |复用机制
113 |不理想
太不理想了
-
115 |
- 继承 116 |
- 共享声明块 117 |
继承
122 |button {
124 | font-family: inherit;
125 | }
126 | -
129 |
- 仅针对单条声明 130 |
- 继承关系来自文档结构而非 CSS 131 |
- 不是纯粹样式层的继承 132 |
共享声明块
137 |-
138 |
-
139 |
选择器组
140 |141 | 147 |
146 |.title, 142 | .comment { 143 | color: #333; 144 | } 145 |
148 | -
149 |
在文档中添加用来复用样式的内容
150 |151 |
157 |<h1 class="post-title block">...<h1> 152 | ... 153 | <article class="post clearfix">...<article> 154 | ... 155 | <article class="comment clearfix">...<article> 156 |
158 |
「样式类」
163 |-
164 |
clearfix, cf
165 | float-right,fr,pull-right, ...
166 | red,mr10, ...
167 | ...
168 |
设计缺陷？
173 |
174 |
180 | What is CSS:
175 |
176 | Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
177 |
178 |
179 | 不是传统意义上的编程语言
181 |a {
183 | color: #69c !important;
184 | }预处理器的崛起
194 |预处理器 / DSL
198 |
199 |
203 | 
预处理器能做什么？
207 |-
208 |
- 增强语法，提供语法糖 209 |
- 将重复的值抽象为变量 210 |
- 将重复的样式抽象出来混入或继承 211 |
- ... 212 |
提高代码的可维护性
214 |eg. 嵌套语法 (WHATWG 的 <h1> 推荐样式)
218 | /* heading.less */
220 | article, aside, nav, section {
221 | h1 {
222 | margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em;
223 | }
224 | & & h1 {
225 | margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em;
226 | }
227 | & & & h1 {
228 | margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em;
229 | }
230 | & & & & h1 {
231 | margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em;
232 | }
233 | & & & & & h1 {
234 | margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em;
235 | }
236 | }
237 | 编译后
244 |
246 | See compiled code.
248 |47KB? Are you serious?
eg. 抽象样式
253 |.border-radius(@radius) {
255 | -webkit-border-radius: @radius;
256 | -moz-border-radius: @radius;
257 | border-radius: @radius;
258 | }
259 |
260 | .badge(@color, @radius: 5px) {
261 | .border-radius(@radius);
262 | background-color: lighten(@color, 20%)
263 | color: @color;
264 | }
265 |
266 | @color-alert: red;
267 | @color-warning: yellow;
268 | @color-success: lightgreen;
269 |
270 | .alert { .badge(@color-alert); }
271 | .warning { .badge(@color-warning); }
272 | .success { .badge(@color-success); }
273 | 预处理器工作流程
279 |-
280 |
- DSL 源码 → 动态 AST 281 |
- 动态 AST → 静态 AST 282 |
- 静态 AST → CSS 283 |
开发者工作流程
288 |DSL → 未压缩 CSS → 生产环境 CSS
289 |预处理 + 压缩
290 |预处理器拯救世界？
298 |Vendor-prefix 的尴尬
302 |/* Bootstrap's mixin */
304 | .border-radius(@radius) {
305 | -webkit-border-radius: @radius;
306 | -moz-border-radius: @radius;
307 | border-radius: @radius;
308 | }不同项目需要用的前缀不同怎么办？
311 |Autoprefixer (2013)
315 |.badge {
318 | border-radius: 5px;
319 | }
322 |
324 | 配置条件
325 |
331 |
332 | 配置条件
333 |
337 |
338 | ↓
323 |> 0% (尽可能兼容).badge {
326 | -webkit-border-radius: 5px;
327 | -moz-border-radius: 5px;
328 | border-radius: 5px;
329 | }> 1% (市场占有率大于 1%).badge {
334 | border-radius: 5px;
335 | }Autoprefixer
342 | 347 |预处理器的局限
351 |-
352 |
- 提供整套方案，模块化能力不足 353 |
- DSL 决定了功能范围，用户自定义能力有限 354 |
- 功能缺失怎么办？——feature request 355 |
「后处理器」 (非官方)
360 |-
361 |
- 直接处理标准的 CSS 代码 362 |
- 模块化，一次只做一件事 363 |
- 按需自由组合模块，灵活调用 364 |
- 逻辑通过编程语言描述，不借助 DSL 365 |
适合处理兼容性问题、进行 polyfill、优化输出
367 |广义上「后处理」也属于预处理的范畴，其实 CSS 压缩等已经是其中之一
368 |后处理器工作流程
372 |-
373 |
- 标准 CSS → CSS AST 374 |
- 对 CSS AST 进行后处理 (不同后处理模块的核心功能) 375 |
- CSS AST → CSS 代码 376 |
开发者工作流程
381 |标准 CSS (甚至草案) → 生产环境 CSS
382 |「后处理框架」
386 |后处理器离不开：
387 |-
388 |
- 将 CSS 解析为 AST 389 |
- 操作 AST 390 |
- 将 AST 格式化输出 391 |
393 | 397 |
如何选择？
405 |前后结合的方案
409 |解决兼容性问题不是样式本身的复用
410 |-
411 |
- 预处理器处理样式层的抽象，减少冗余 412 |
- 后处理器处理兼容、优化 413 |
前后结合的工作流
418 |DSL → 标准 CSS → 生产环境 CSS
419 |Bootstrap
423 |// Vendor Prefixes
425 | //
426 | // All vendor mixins are deprecated as of v3.2.0 due to the introduction of
427 | // Autoprefixer in our Gruntfile. They will be removed in v4.
428 | est 2.0 (EFE Less mixin library)
435 |.border-radius(@radius: @default-border-radius) when not (@use-autoprefixer) {
437 | -webkit-border-radius: @radius;
438 | -moz-border-radius: @radius;
439 | border-radius: @radius;
440 | }
441 | .border-radius(@radius: @default-border-radius) when (@use-autoprefixer) {
442 | border-radius: @radius;
443 | }
444 | .border-radius(@radius-x, @radius-y) {
445 | .border-radius(@radius-x ~"/" @radius-y);
446 | }
447 | 有趣的现象
453 |-
454 |
- 预处理器越来越「后」 455 |
- 「后处理器」越来越「前」 456 |
eg. Less 插件
461 |-
462 |
- 可以调用「后处理器」：Autoprefixer、clean-css、... 463 |
- 可以操作 DSL 的 AST 464 |
- ... 465 |
用来增强 DSL 的表达能力受限的不足
467 |eg. postcss 模块
471 |-
472 |
- postcss-mixins 473 |
- postcss-nested 474 |
- postcss-simple-extend 475 |
- ... 476 |
用来增强原生 CSS 抽象能力的不足、弥补语法缺陷
478 |结果
482 |-
483 |
- 「后处理器」不再提「后处理」 - postcss 484 |
- 大家都叫「预处理」 - rework、Myth 485 |