CSScaffold是一個css的framework，但有別以往的css framework，它必須依靠php來輔助開發，但卻更為強大。
P.S.其環境必須要有的－PHP 5+、Apache Mod_rewrite。
Simple, but powerful
因為寫作的方式不同，所以開發的速度大幅提升，以下為其特色：
- Constants
- Mixins
- Nested Selectors
- Expressions
- Includes
- Iteration
讓我們看一下官方的簡介影片，就可以了解它有多神奇。
CSScaffold syntax
接下來讓我們研究一下官方的例子：
Constants
我們可以定義好一些常數，比如常用的顏色、間距等。
@constants
{
normal_color:#eee;
other_constant:10px;
}
body
{
color:!normal_color;
}
那麼，它輸出的結果將會是：
body
{
color:#eee;
}
日後要修改時，只需要更改常數裡的值，全部都會更新，是不是相當方便呢。
Expressions
#id
{
padding:#[10 * !constant]px;
}
如果我們將!constant給予一個數字10代入，那麼結果輸出：
#id
{
padding:#100px;
}
Includes
我們可以將定義的常數或者css獨立出來，再以include的方式載入，方便我們日後修改，如下：
@include '/css/sections/layout.css';
Nested Selectors
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; }
如此，在css的編寫上將會更彈性，維護上也會輕鬆許多。
Mixins
感覺很像程式撰寫function一般，也可以傳入參數改變輸出的結果，非常的強大，給予我們再利用的空間，例如：
=mixin-name(!param, !param2 = 10px)
{
color:!param;
border:!param2 solid !param;
}
這裡有二個變數－!param及!param2，其中!param2有預設值10px。
接著，我們將其運用在css selector上面。
#id
{
+mixin-name(#eee);
padding:10px;
}
#eee的值將會傳給!param，而!param2因為沒有傳值給它，它將會代入預設指定的值10px，所以輸出結果為：
#id
{
color:#eee;
border:10px solid #eee;
padding:10px;
}
Iteration
迴圈，語法和PHP差不多，如下：
@for !i from 1 to 12
{
.columns-!i { +span(!i); }
}
其它
想了解更多語法可以參考官方的文件。
CSScaffold資源
相關文章：