CSScaffold - 帮助创建复杂CSS的框架 - 简单生活 - 日常生活及工作中的点点滴滴

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

baoling , 2009/12/28 14:56 , 技术知识 , 评论(1) , 阅读(498) , Via 本站原创

今天在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属性的一致性，以这个例子来说，如果以常数的方式撰写，当需要更改文字颜色时，只需要更改常数的定义即可

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

body
{
  color:!normal_color;
}

结果会变成:

body
{
color:#eee;
}

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

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

其中~表示当前Css的目录

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

#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; }
  }

}

结果会是如下:

#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)
混合器相当于函数，可以到处调用

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

结果会是：

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

混合器的巢状用法：

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

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

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

结果会是：

.test1
{
    color: #555;
}
#content
{
    padding: 10px;
    border: 1px solid #eee;
}
#content .test1
{
    color: #555;
}

表达式(Expressions)

#id
{
padding:#[10 * !constant]px;
}

迭代(Iteration)

@for !i from 1 to 12
{
.columns-!i { +span(!i); }
}

插件(Plugin)
官方提供了多个插件，如Image Replace，XML Constants等。详情可以参考官网。

官网：http://github.com/anthonyshort/csscaffold
安装和使用向导：http://anthonyshort.com.au/scaffold/