何為CSScomb

官方網(wǎng)站只有一句描述:Makes your code beautiful(讓你的代碼更漂亮)，通俗點(diǎn)講:CSScomb 是用來(lái)排版 CSS 代碼的，可以說(shuō)是格式化插件,依賴(lài) nodejs。

獲取 CSScomb

官方網(wǎng)站: CSScomb

支持許多編輯器,比如 Sublime/Atom/brackets 等

第三方 CSScomb

昨天寫(xiě)了篇 CSS3 的文章，發(fā)現(xiàn)代碼有點(diǎn)混亂，人力排版有點(diǎn)，所以跑去 Atom 插件庫(kù)尋找 csscomb。

Atom -> settings -> install -> csscomb

下圖三個(gè)藍(lán)色圈圈的功能基本一致，第一個(gè)是官方的，今天的主角是黃色的。

http://wiki.jikexueyuan.com/project/atom/images/c1.jpg" alt="" />

atom-css-comb

特點(diǎn)

• 支持格式化CSS/LESS/SASS
• 支持自定義格式
• 內(nèi)置三種排版風(fēng)格(Yandex/CSScomb/zen)
  • Yandex 的 CSS規(guī)范，去引擎搜索了下，好像很強(qiáng)大…不過(guò)不適合我
  • CSScomb 排版樣式
  • zen(Emmet 的前身)

基礎(chǔ)使用

• 默認(rèn)快捷鍵有兩個(gè) [還可以使用鼠標(biāo)點(diǎn)擊插件調(diào)用]

  • ctrl + alt + c[沖突]
  • ctrl + alt + shift + c[沖突]

• 切換排版風(fēng)格(Ready-made configs),看描述和看圖

  • Packages -> Css comb -> settings

http://wiki.jikexueyuan.com/project/atom/images/s3.jpg" alt="" />

默認(rèn)快捷鍵參數(shù)

'atom-text-editor':
  'ctrl-alt-c':'css-comb:comb'

進(jìn)階使用

針對(duì)用戶(hù)群：喜歡折騰，有自己風(fēng)格的小伙伴，這里只是展示，具體小伙伴自己可以參考官方提供的文檔進(jìn)行定制。 看到上面那個(gè) common config，選中 custom config [Edit config file]，進(jìn)入到定制參數(shù)頁(yè)面，格式是使用 JSON 寫(xiě)的。

{
    "help": "About options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md",

    "exclude": ["node_modules/**"],
    "verbose": true,

    "always-semicolon": true,
    "block-indent": "    ",
    "colon-space": ["", " "],
    "color-case": "lower",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "single",
    "remove-empty-rulesets": true,
    "rule-indent": "    ",
    "stick-brace": "\n",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}