PHP: 將 CSS 檔 做排版的程式(inline, formatter)

有某人說要將 css selector "{}" 包住的值, 依照字母排列順序的排列(註), 所以先寫了 css_formatter.php, 後來發現某人寫程式的時後, 有時後會做其另一類的排版方式, 所以就再寫一個 css_inline.php(將格式先變成 一個 selector {} 一行), 這樣子(inline)的格式才能給 css_formatter.php 正常吃下來, 並做排版的動作.

註: 依照字母順序來寫 css, 維護起來比較容易, 看起來也蠻漂亮的.(PS: IE hack 要特別處理一下, *, _ 要排在最後面, 所以順序會是 Global -> IE -> IE6)

先來看 css_inline.php, 主要功能是將很多行的 selector { .... } 都變成一個 selector { } 一行, 範例如下:

#lo .row p {
text-align:center;
font-size:123.1%;
margin:50px;
}
#mb .bd .badge th,
#mb .bd .badge td {padding:5px;}

會轉換成: (程式 裡面可以控制 /* 註解 */ 要不要拿掉, 或在註解前面加換一行, 程式內找 option 註解, 打開即可)

#mb .bd .badge th,#mb .bd .badge td {padding:5px;}
#lo .row p {text-align:center;font-size:123.1%;margin:50px;}

• 執行方式: php css_inline.php style.css > style_inline.css

然後再來 css_formatter.php 就是吃一個 selector(或多個 selector, 用 "," 隔開)一行的檔案, 再去做 排序/格式化 的動作, 範例如下:

#mb .bd .badge th,#mb .bd .badge td {padding:5px;}
#lo .row p {text-align:center;font-size:123.1%;margin:50px;}

會轉換成 (程式 裡面可以控制 /* 註解 */ 要不要拿掉, 或在註解前面加換一行, 程式內找 option 註解, 打開即可)

#mb .bd .badge th,#mb .bd .badge td {
padding:5px;
}
#lo .row p {
font-size:123.1%;
margin:50px;
text-align:center;
}

• 執行方式: php css_formatter.php style_inline.css > style_format.css

這樣子就會是排版的很漂亮的 css 囉~

下面是 css_inline.php 和 css_formatter.php 的 source code, 一樣採 MIT License.

• css_inline.php 原始碼
• css_formatter.php 原始碼

所以要做 css 排版 要如下步驟:

1. php css_inline.php style.css > style_inline.css
2. php css_formatter.php style_inline.css > style_format.css
3. style_format.css 就是排版完成的檔案囉~

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章