码迷,mamicode.com
首页 > Web开发 > 详细

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]

时间:2015-05-26 12:41:48      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:csscomb   csscomb增强   atom编辑插件   atom插件   

何为CSScomb

官方网站只有一句描述:

Makes your code beautiful(让你的代码更漂亮)

通俗点讲:

CSScomb是用来排版CSS代码的…可以说是格式化插件,依赖nodejs


获取CSScomb–这不是今天的话题

官方网站: CSScomb

  • 支持许多编辑器,比如Sublime/Atom/brackets等

第三方CSScomb—这才是今天的话题

昨天写了篇CSS3的文章…发现代码有点混乱..人力排版有点…….所以跑去atom插件库寻找csscomb

  • Atom -> settings -> install -> csscomb

我去,,好几个CSScomb插件包….看图(三个蓝色圈圈的功能基本一致,第一个是官方的,,,今天的主角是黄色的)
技术分享


atom-css-comb

特点

  • 支持格式化CSS/LESS/SASS
  • 支持自定义格式
  • 内置三种排版风格(Yandex/CSScomb/zen)
    • Yandex的CSS规范..去引擎搜索了下..好像很强大…不过不适合我
    • CSScomb排版样式
    • zen(Emmet的前身)

基础使用

  • 默认快捷键有两个 [还可以使用鼠标点击插件调用]

    • ctrl + alt + c[冲突]
    • ctrl + alt + shift + c[冲突]
  • 切换排版风格(Ready-made configs),看描述和看图

    • Packages -> Css comb -> settings

    技术分享

  • 默认快捷键参数

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

进阶使用

针对用户群:喜欢折腾,有自己风格的小伙伴,这里只是展示,具体小伙伴自己可以参考官方提供的文档进行定制

看到上面那个common config,选中custom config [Edit config file],
进入到定制参数页面,格式是使用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
}

定制参数大全:点我点我点我

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]

标签:csscomb   csscomb增强   atom编辑插件   atom插件   

原文地址:http://blog.csdn.net/crper/article/details/46006187

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!