Atom CSScomb Enhancement

CSScomb Enhanced

What is CSScomb?

The official website has only one description: Make your code beautiful (make your code more beautiful), popularly speaking: CSScomb is used to type CSS code, can be said to format plug-ins, rely on nodejs.

Get CSScomb

Official website: CSScomb

Supports many editors, such as Sublime/Atom/brackets

Third-party CSScomb

Yesterday I wrote a CSS3 article and found that the code was a bit confusing and the human layout was a bit, so I ran to the Atom plug-in library looking for csscomb.

Atom -> settings -> install -> csscomb

The functions of the three blue circles in the figure below are basically the same, the first is official, and today's main character is yellow.

atom-css-comb

Characteristics

• Formatting CSS/LESS/SASS is supported
• Custom formats are supported
• Three built-in typography styles (Yandex/CSScomb/zen)
  • Yandex's CSS specification, go engine search, seems very powerful... But it's not for me
  • CSScomb typography style
  • Zen (Emmet's predecessor)

Basic use

• The default shortcut has two (can also be called with a mouse click plug-in)

  • ctrl, alt, c, conflict,
  • ctrl, alt, shift, c, conflict.

• Switch typography styles (Ready-made configs), see descriptions and see pictures

  • Packages -> Css comb -> settings

The default shortcut parameters

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

Advanced use

For the user base: like toss, have their own style of small partners, here is just to show, specific small partners themselves can refer to the official documentation for customization. See the common config above, select custom config (Edit config file) and go to the custom parameters page 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
}