What is Csscomb
The official website has only one sentence description:
Makes your code beautiful (make your codes more beautiful)
The popular point says:
Csscomb is used to typeset CSS code ... Can be said to be a format plug-in, relying on Nodejs
get csscomb– This isn't the topic of today.
Official website: Csscomb
- Supports many editors, such as sublime/atom/brackets, etc.
Third party csscomb-This is the topic of today.
Yesterday wrote a CSS3 article ... Find the code a little confusing. Human typesetting a bit ... so run to the Atom plugin library looking for Csscomb
- Csscomb, install, settings, Atom
I go, several Csscomb plugin packages .... Look at the figure (three blue circle functions are basically the same, the first one is the official,,, the protagonist is yellow today)
Atom-css-comb
features
- Support for formatting of Css/less/sass
- Support for custom formats
- Built-in three typesetting styles (Yandex/csscomb/zen)
- CSS specification for Yandex: Went to the engine to search the next. It seems very powerful ... But not for me.
- Csscomb typesetting style
- Zen (the predecessor of Emmet)
Basic Use
There are two default shortcut keys [You can also use the mouse to click the plugin call]
ctrl + alt + c[冲突]
ctrl + alt + shift + c[冲突]
Toggle typesetting style (ready-made configs), see description and look at the picture
- Packages, Css Comb-settings
Default Shortcut key parameters
‘atom-text-editor‘: ‘ctrl-alt-c‘:‘css-comb:comb‘
Advanced Use
For user groups: Like toss, have their own style of small partners, here is just show, specific small partners themselves can refer to the official documentation for customization
See the one common config
above, custom config [Edit config file]
Select,
Go to the custom Parameters page, and the format is written using JSON.
{ " 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}
Custom Parameters Daquan: Dot Me dot me dot me
Atom Editor Toss _ (csscomb) enhanced [Css/less/sass]