Home > Web Front-end > HTML Tutorial > Atom editor tossing notes_(10)CSScomb enhanced version [CSS/LESS/SASS]_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:43:49
Original
1556 people have browsed it

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'
    Copy after login

    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 }
    Copy after login

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

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template