Atom Editor Toss _ (csscomb) enhanced [Css/less/sass]

Source: Internet
Author: User

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]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.