Atom editor tossing notes_(10)CSScomb enhanced version [CSS/LESS/SASS]_html/css_WEB-ITnose

What is CSScomb

The official website has only one description:

Makes your code beautiful(make your code more beautiful)

To be more simple Talk:

CSScomb is used to typeset CSS code... It can be said to be a formatting plug-in, relying on nodejs

to obtain CSScomb? This is not today’s topic

Official Website: CSScomb

Supports many editors, such as Sublime/Atom/brackets, etc.

Third-party CSScomb? This is today’s topic

Yesterday I wrote an article about CSS3...I found that the code was a bit confusing...the manual typesetting was a bit...so I went to the atom plug-in library to look for csscomb

Atom -> settings -> install -> csscomb

Let me go, there are several CSScomb plug-in packages... Look at the pictures (the functions of the three blue circles are basically the same, the first one is official,,, today’s protagonist is yellow)

atom-css-comb

Features

Support formatting CSS/LESS/SASS

Support Custom format

Built-in three typeset styles (Yandex/CSScomb/zen)

Yandex’s CSS specification... I searched the engine... It seems very powerful... but it’s not suitable I

CSScomb layout style

zen (predecessor of Emmet)

Basic use

There are two default shortcut keys [You can also use the mouse to click the plug-in call]

ctrl alt c[conflict]

ctrl alt shift c[conflict]

Switch the layout style (Ready-made configs), see description and picture

Packages -> Css comb -> settings

Default shortcut key parameters

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

Advanced use

Aimed at the user group: Friends who like to toss and have their own style, This is just for display. You can refer to the official documents for customization

See the above common config and select custom config [Edit config file],
Enter the custom parameter page, the format is written in 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 }

Full list of custom parameters: Click me click me click me