糟糕的CSS预处理器
项目描述
CleverCSS 是一种受Python启发的CSS标记语言,它可以以干净和结构化的方式构建样式表。在许多方面,它比CSS2更简洁、更强大。
与CSS最明显的区别是语法:它是基于缩进的,而不是平面的。虽然这显然违反了Python禅宗,但对于结构化样式来说,这仍然是一个好主意。
概述
要了解CleverCSS是如何工作的,您可以在下面看到一个小的示例。注意基于缩进的语法以及您如何嵌套规则
ul#comments, ol#comments: margin: 0 padding: 0 li: padding: 0.4em margin: 0.8em 0 0.8em h3: font-size: 1.2em p: padding: 0.3em p.meta: text-align: right color: #ddd
当然,您也可以在CSS中做到这一点,但由于其平面特性,代码会显得更冗长。以下代码是上述文件的CleverCSS输出
ul#comments, ol#comments { margin: 0; padding: 0; } ul#comments li, ol#comments li { padding: 0.4em; margin: 0.8em 0 0.8em; } ul#comments li h3, ol#comments li h3 { font-size: 1.2em; } ul#comments li p, ol#comments li p { padding: 0.3em; } ul#comments li p.meta, ol#comments li p.meta { text-align: right; color: #dddddd; }
但这只是CleverCSS可以做什么的极小示例。请查看以下CleverCSS的文档以获取更多详细信息。