今天發現一個好用的CSS的開發框架 – CSScaffold，瞭解完這個東西之後，我的感覺就如同官方提到的一句話「Simple, but powerful」，它是一款幫助撰寫CSS的快速開發框架，不同於許多CSS框架，它必須依靠PHP與Apache的mod_rewrite來執行，但也因為需要這兩種東西，讓CSScaffold變得很神奇、很方便，寫起CSS來又快又輕鬆！
ps. Apache的mod_rewrite不一定需要。
CSScaffold 的神奇之處：
強化標準CSS語法
- 讓CSS語法可以有常數(Constant)。
- 讓CSS語法可以有函數(Function)，當然也可以傳參數(Parameter)，官方稱之為Mixins。
- 讓CSS語法可以巢狀結構(Nested Structure)。
- 讓CSS語法可以有插件(Plugin)。
- 讓CSS屬性可以用表達式(Expressions)指派其值。
- 讓CSS屬性可以用條件式(Conditionals)指派其值。
重複利用
CSS本身有一個可加強網頁撰寫時重複利用的特性，而CSScaffold讓這個特性更加明顯。
CSS結構化
標準的CSS語法常常會讓我們的CSS內容雜亂不堪難以維護，而CSScaffold可以降低這個困擾。
CSScaffold 如何讓CSS變神奇的？
其實技術上它一點都不神奇…XD，說穿了他與PHP中的Smarty等等樣板引擎很像，但真正令人激賞的是他的概念。
它的運作原理就是在開發時原本直接寫CSS，變成寫 CSS 的樣板，然後在執行階段透過CSScaffold來編譯及抓取已經編譯好的CSS內容回傳給瀏覽器，有快取(Cache)的功能，因此整個執行的流程很像PHP中許多有Cache功能的樣板引擎。
因為透過CSScaffold這層的解析編譯，所以當然就會如同樣板引擎一樣，它訂製出自己的CSS樣板語法，而這它的語法基本上跟CSS 沒什麼兩樣，只是多了一些原本CSS 不提供的語法，使用上只需瞭解多出來的部分而不是重新學習CSS語法，因此也可以簡單的把它看做是CSS語法的改良進階版。
以下是CSScaffold官方的概念圖：
直接看官方教學介紹，簡單又明瞭
CSScaffold語法
來看幾個官方提供的語法介紹，瞭解一下CSScaffold的好用之處
常數(Constants)
大部分的程式語言都有常數這種東西，因此很容易理解，下面的例子body的color屬性會被替換成#555，常數最大的功能就是在於重複利用，也保持CSS屬性的一致性，以這個例子來說，如果以常數的方式撰寫，當需要更改文字顏色時，只需要更改常數的定義即可
/* 定義常數 */
@constants
{
text_color:#555;
color_1:#999;
}
body
{
/* 把color屬性設定為text_color常數 */
color:!text_color;
}
因此結果會是：
body
{
color: #555;
}
引入(include)
直接引入其他CSS檔案，增加重複利用的特性
/* 例如：引入常數定義檔 */ @include '/scaffold/snippets/constants.css';
巢狀結構(Nested Structure)
HTML本來就是巢狀的東西，而這東西更可以讓CSS結構化，編寫時不再混亂不堪，除了方便撰寫也有利於日後維護
#id
{
border:1px;
h1,h2,h3
{
color:red;
a div, blockquote, mark
{
margin:10px;
}
&.span
{
padding:10px;
}
}
}
結果：
如果手工寫這些東西是很煩很累的…
#id
{
border: 1px;
}
#id h1,
#id h2,
#id h3
{
color: red;
}
#id h1 a div,
#id h1 blockquote,
#id h1 mark,
#id h2 a div,
#id h2 blockquote,
#id h2 mark,
#id h3 a div,
#id h3 blockquote,
#id h3 mark
{
margin: 10px;
}
#id h1.span,
#id h2.span,
#id h3.span
{
padding: 10px;
}
混合器(Mixins)
這東西的概念有點像函數，又有點像樣板，可以傳入變數替換值
/* 定義混合器 */
=mixin-name(!param)
{
color:!param;
border: !param2 solid #eee;
}
#content
{
/* 使用混合器 */
+mixin-name(#eee);
padding:10px;
border:1px solid #eee;
}
因此結果會是：
#content
{
color: #eee;
border: #eee2 solid #eee;
padding: 10px;
border: 1px solid #eee;
}
混合器的巢狀用法：
/* 定義混合器 */
=mixin-name(!param)
{
.test!param{
color:#555;
}
}
/* 使用混合器 */
+mixin-name(1);
#content
{
/* 使用混合器 */
+mixin-name(1);
padding:10px;
border:1px solid #eee;
}
巢狀Mixins結果：
.test1
{
color: #555;
}
#content
{
padding: 10px;
border: 1px solid #eee;
}
#content .test1
{
color: #555;
}
表達式(Expressions)：
#id
{
padding:#[10*4]px;
}
結果：
#id
{
padding: 40px;
}
條件式(Conditionals)：
=column(!n, !last = false)
{
width:#[!n * 10]px;
/* 依據參數的不同設定不同的值 */
@if(!last === false)
{
margin-right:0;
}
@else
{
margin-right:10px;
}
}
.box
{
+column(2, true);
}
結果：
.box
{
width: 20px;
margin-right: 10px;
}
目前條件式的解析似乎有些Bug
插件(Plugin)
官方預設提供了多個插件，並提供了排版插件(Layout Plugin)使用教學，如果使用網格設計(Grid Design)的方式來編排CSS網頁，這個插件可以很方便快速的產出所需的CSS，當然除了官方提供的插件之外，也可以自行設計插件。
至此，應該可以了解到這個東西真的是Simple, but powerful，更多語法介紹及教學請至 CSScaffold 觀看
