代码是给人看的,计算机只是负责执行一下 为css属性排序, 让我们的代码更加简洁优雅
1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等)
// csscomb为css排序
// csscomb 保存时,为css排序
"csscomb.formatOnSave": true,
// 使用自定义排序风格, 官方推荐的三个: csscomb、yandex、zen
"csscomb.preset": {
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"sort-order-fallback": "abc",
"space-before-colon": " ",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": " ",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"tab-size": true
}
csscomb.preset
的配置可以从官方给出的选项任选其一csscomb
, zen
, yandex
,"csscomb.preset" : "yandex"
{}
进行配置(上方示例就是这种方法), 官方提供了一个工具, 只需回答相关问题, 就可以自动生成配置代码, 工具地址http://csscomb.com/config "csscomb.preset": {
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"sort-order-fallback": "abc",
"space-before-colon": " ",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": " ",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"tab-size": true
}