糟糕的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的文档以获取更多详细信息。