CSScaffold – 帮助创建复杂CSS的框架

By baoling On 2009 年 12 月 28 日 · 1 Comment

今天在JavaEye上面看到一篇关于CSScaffold框架的介绍，果然很好很强大。正如官网上所说的：「Simple, but powerful」。目前最新版本为：v1.5.0b6。
它是一款帮助撰写CSS的快速开发框架，不同于许多CSS框架，它必须依靠PHP来执行，正是PHP让CSScaffold变得很神奇、很方便，写起CSS来又快又轻松！

CSScaffold 的神奇之处：
强化标准CSS语法
* 让CSS语法可以有常数(Constant)。
* 让CSS语法可以有函数(Function)，当然也可以传参数(Parameter)，官方称之为Mixins。
* 让CSS语法可以巢状结构(Nested Structure)。
* 让CSS语法可以有插件(Plugin)。
* 让CSS属性可以用表达式(Expressions)指派其值。
* 让CSS属性可以用条件式(Conditionals)指派其值。

重复利用
CSS本身有一个可加强网页撰写时重复利用的特性，而CSScaffold让这个特性更加明显。

CSS结构化
标准的CSS语法常常会让我们的CSS内容杂乱不堪难以维护，而CSScaffold可以降低这个困扰。

以下是CSScaffold官方的概念图：

CSScaffold 如何让CSS变神奇的？

其实技术上它一点都不神奇…，说穿了他与PHP中的Smarty等等样板引擎很像，但真正令人激赏的是他的概念。

它的运作原理就是在开发时原本直接写CSS，变成写CSS 的样板，然后在执行阶段透过CSScaffold来编译及抓取已经编译好的CSS内容回传给浏览器，有快取(Cache)的功能，因此整个执行的流程很像PHP中许多有Cache功能的样板引擎。

因为透过CSScaffold这层的解析编译，所以当然就会如同样板引擎一样，它订制出自己的CSS样板语法，而这它的语法基本上跟CSS 没什么两样，只是多了一些原本CSS 不提供的语法，使用上只需了解多出来的部分而不是重新学习CSS语法，因此也可以简单的把它看做是CSS语法的改良版。

CSScaffold语法
来看几个官方提供的语法介绍，了解一下CSScaffold的好用之处

常数(Constants)
大部分的程式语言都有常数这种东西，因此很容易理解，下面的例子body的color属性会被替换成#555，常数最大的功能就是在于重复利用，也保持CSS属性的一致性，以这个例子来说，如果以常数的方式撰写，当需要更改文字颜色时，只需要更改常数的定义即可

1
2
3
4
5
6
7
8
9
10
11

/* 定义常量 */
@constants
{
normal_color:#eee;
other_constant:10px;
}

body
{
color:!normal_color;
}

结果会变成:

1
2
3
4

body
{
color:#eee;
}

引入(include)
直接引入其他CSS文件，增加重复利用的特性

1	@include '~/sections/layout.css';

其中~表示当前Css的目录

巢状结构(Nested Structure)
HTML本来就是巢状的东西，而这东西更可以让CSS结构化，编写时不再混乱不堪，除了方便撰写也有利于日后维护

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#id
{
color:#000;
padding:10px;

a
{
color:#ff0;

&:hover { text-decoration:underline; }
}

h1,h2,h3,h4,h5,h6
{
border-bottom:1px solid #eee;
padding-bottom:10px;

&:first-child { margin-top:0; }
}

}

结果会是如下:

1
2
3
4
5

#id { color:#000; padding:10px;}
#id a { color:#ff0; }
#id a:hover { text-decoration:underline; }
#id h1, #id h2, #id h3 { border-bottom:1px solid #eee; padding-bottom:10px; }
#id h1:first-child, #id h2:first-child ... { margin-top:0; }

混合器(Mixins)
混合器相当于函数，可以到处调用

1
2
3
4
5
6
7
8
9
10

=mixin-name(!param, !param2 = 10)
{
color:!param;
border:!param2 solid !param;
}
#id
{
+mixin-name(#eee);
padding:10px;
}

结果会是：

1
2
3
4
5
6

#id
{
color:#eee;
border:10 solid #eee;
padding:10px;
}

混合器的巢状用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* 定义混合器 */
=mixin-name(!param)
{
.test!param{
color:#555;
}
}

/* 使用混合器 */
+mixin-name(1);

#content
{
/* 使用混合器 */
+mixin-name(1);
padding:10px;
border:1px solid #eee;
}

结果会是：

1
2
3
4
5
6
7
8
9
10
11
12
13