json CSS属性书写顺序与参数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json CSS属性书写顺序与参数相关的知识,希望对你有一定的参考价值。

{
  "exclude": [
    ".git/**",
    "node_modules/**",
    "bower_components/**"
  ],
  "remove-empty-rulesets": true,
  "always-semicolon": true,
  "color-case": "lower",
  "block-indent": "  ",
  "color-shorthand": true,
  "element-case": "lower",
  "eof-newline": true,
  "leading-zero": false,
  "quotes": "single",
  "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": "\n",
  "space-before-selector-delimiter": "",
  "space-before-closing-brace": "\n",
  "strip-spaces": true,
  "tab-size": true,
  "unitless-zero": true,
  "vendor-prefix-align": true,
  "sort-order": [
    [
      "$variable"
    ],
    [
      "$include"
    ],
    [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "float",
      "clear"
    ],
    [
      "display",
      "-webkit-box-flex",
      "-ms-flex",
      "flex",
      "-ms-flex-positive",
      "flex-grow",
      "-ms-flex-negative",
      "flex-shrink",
      "-ms-flex-preferred-size",
      "flex-basis",
      "-webkit-box-ordinal-group",
      "-ms-flex-order",
      "order",
      "-webkit-box-orient",
      "-webkit-box-direction",
      "-webkit-box-direction",
      "-ms-flex-direction",
      "flex-direction",
      "-ms-flex-flow",
      "flex-flow",
      "-webkit-box-pack",
      "-ms-flex-pack",
      "justify-content",
      "-ms-flex-line-pack",
      "align-content",
      "-webkit-box-align",
      "-ms-flex-align",
      "align-items",
      "-ms-flex-item-align",
      "-ms-grid-row-align",
      "align-self",
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-collapse",
      "border-spacing",
      "list-style",
      "list-style-type",
      "list-style-position",
      "list-style-image"
    ],
    [
      "box-sizing",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "border",
      "border-width",
      "border-top-width",
      "border-right-width",
      "border-bottom-width",
      "border-left-width",
      "border-style",
      "border-top-style",
      "border-right-style",
      "border-bottom-style",
      "border-left-style",
      "border-color",
      "border-top-color",
      "border-right-color",
      "border-bottom-color",
      "border-left-color",
      "border-image",
      "border-image-source",
      "border-image-slice",
      "border-image-width",
      "border-image-outset",
      "border-image-repeat",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "border-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "border-top-left-radius",
      "outline",
      "outline-width",
      "outline-color",
      "outline-style",
      "outline-offset",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "background",
      "background-image",
      "background-position",
      "background-size",
      "background-repeat",
      "background-origin",
      "background-clip",
      "background-attachment",
      "background-color",
      "background-blend-mode",
      "box-shadow",
      "opacity",
      "-webkit-filter",
      "filter"
    ],
    [
      "-webkit-columns",
      "-moz-columns",
      "columns",
      "-webkit-column-width",
      "-moz-column-width",
      "column-width",
      "-webkit-column-count",
      "-moz-column-count",
      "column-count",
      "-webkit-column-gap",
      "-moz-column-gap",
      "column-gap",
      "-webkit-column-rule",
      "-moz-column-rule",
      "column-rule",
      "-webkit-column-rule-width",
      "-moz-column-rule-width",
      "column-rule-width",
      "-webkit-column-rule-style",
      "-moz-column-rule-style",
      "column-rule-style",
      "-webkit-column-rule-color",
      "-moz-column-rule-color",
      "column-rule-color",
      "-webkit-column-span",
      "-moz-column-span",
      "column-span",
      "orphans",
      "overflow",
      "overflow-x",
      "overflow-y",
      "vertical-align",
      "text-rendering",
      "-webkit-writing-mode",
      "-ms-writing-mode",
      "writing-mode",
      "text-combine-upright",
      "text-orientation",
      "direction",
      "unicode-bidi",
      "font",
      "font-style",
      "font-variant",
      "font-weight",
      "font-stretch",
      "font-size",
      "font-family",
      "line-height",
      "color",
      "-webkit-font-feature-settings",
      "font-feature-settings",
      "white-space",
      "text-overflow",
      "letter-spacing",
      "-webkit-font-kerning",
      "font-kerning",
      "word-spacing",
      "text-transform",
      "overflow-wrap",
      "word-wrap",
      "word-break",
      "-webkit-hyphens",
      "-ms-hyphens",
      "hyphens",
      "text-align",
      "-moz-text-align-last",
      "text-align-last",
      "quotes",
      "-moz-tab-size",
      "tab-size",
      "text-indent",
      "-webkit-text-emphasis",
      "text-emphasis",
      "-webkit-text-emphasis-color",
      "text-emphasis-color",
      "-webkit-text-emphasis-position",
      "text-emphasis-position",
      "-webkit-text-emphasis-style",
      "text-emphasis-style",
      "text-decoration",
      "-webkit-text-decoration-color",
      "text-decoration-color",
      "-webkit-text-decoration-style",
      "text-decoration-style",
      "-webkit-text-decoration-line",
      "text-decoration-line",
      "text-underline-position",
      "text-shadow"
    ],
    [
      "image-rendering",
      "image-orientation"
    ],
    [
      "object-fit",
      "object-position",
      "z-index",
      "zoom",
      "clip",
      "resize",
      "cursor",
      "visibility",
      "counter-reset",
      "counter-increment",
      "content",
      "will-change",
      "pointer-events",
      "appearance",
      "all"
    ],
    [
      "-webkit-transform-style",
      "transform-style",
      "-webkit-transform",
      "-ms-transform",
      "transform",
      "transform-box",
      "-webkit-transform-origin",
      "-ms-transform-origin",
      "transform-origin",
      "-webkit-perspective",
      "perspective",
      "-webkit-perspective-origin",
      "perspective-origin",
      "-webkit-backface-visibility",
      "backface-visibility"
    ],
    [
      "-webkit-transition",
      "transition",
      "-webkit-transition-delay",
      "transition-delay",
      "-webkit-transition-duration",
      "transition-duration",
      "-webkit-transition-property",
      "transition-property",
      "-webkit-transition-timing-function",
      "transition-timing-function",
      "-webkit-animation",
      "animation",
      "-webkit-animation-name",
      "animation-name",
      "-webkit-animation-duration",
      "animation-duration",
      "-webkit-animation-timing-function",
      "animation-timing-function",
      "-webkit-animation-delay",
      "animation-delay",
      "-webkit-animation-iteration-count",
      "animation-iteration-count",
      "-webkit-animation-direction",
      "animation-direction",
      "-webkit-animation-fill-mode",
      "animation-fill-mode",
      "-webkit-animation-play-state",
      "animation-play-state"
    ],
    [
      "$include media"
    ]
  ],
  "syntax": {
    ".css": "scss",
    ".lss": "less"
  }
}

以上是关于json CSS属性书写顺序与参数的主要内容,如果未能解决你的问题,请参考以下文章

CSS学习20-CSS属性书写顺序

分享一些CSS使用的书写规范顺序与偏门又实用的 CSS 样式

实力分享CSS 使用的书写规范顺序与偏门又实用的样式

CSS样式书写顺序以及规范

推荐大家使用的CSS书写规范顺序

书写高效css文件时会都有哪些问题需要考虑