sass lint guidance

一、安装：npm intsall -g stylelint

二、配置：http://stylelint.io/user-guide/rules/ (以下规则文件配置一个即可，置于项目根目录下)

1. “.stylelintrc”
   {
   "rules": {
   "declaration-block-trailing-semicolon": null
   }
   }

2. “stylelint.config.js”
   module.exports = {
   "rules": {
   "declaration-block-trailing-semicolon": null
   }
   }

3. “package.json”
   {
   ......
   "stylelint": {
   "rules": {
   "color-hex-case": "lower"
   }
   }
   }

三、官网给出的标准配置：

1. 本地安装： npm install stylelint-config-standard
2. 在配置文件“.stylelintrc”中配置
   {
   "extends": "stylelint-config-standard"
   }
3. 添加或修改标准配置中的内容
   {
   "extends": "stylelint-config-standard",
   "rules": {
   "declaration-block-trailing-semicolon": null
   }
   }

四、使用命令行：stylelint doc/text.css

五、使用gulp自动监听检查 https://github.com/olegskl/gulp-stylelint

1. 本地安装gulp： npm install gulp
2. 创建package.json文件：npm init
3. 本地安装gulp-stylelint： npm install gulp-stylelint --save-dev

4. 创建gulpfile.js
   var gulp = require("gulp");
   var gulpStyleLint = require("gulp-stylelint");

    gulp.task('lint-css', function lintCssTask() {
        gulp.watch("css/*.css", ["lint-css"]);
        return gulp
            .src("css/*.css")
            .pipe(gulpStyleLint({
                reporters: [
                    {formatter: 'string', console: true}
                ]
        }));
    });
   
    gulp.task("default", ["lint-css"]);

六、其他

1. 在样式之前标注“/* stylelint-disable */”，可忽略配置的规则；标注“/* stylelint-enable */“，开启配置的规则
2. “/* stylelint-enable */“必须在“/* stylelint-disable */”之后使用
3. 忽略指定的内容：
   （1）.stylelintrc
   {
   "rules": {
   "unit-no-unknown": [true, ignoreUnits:["xxx"]]
   }
   }
   （2）package.json && stylelint.config.js
   {
   "rules": {
   "at-rule-no-unknown": [true, {"ignoreAtRules": ["function", "if", "return", "include", "extend", "mixin", "else", "while", "for", "each"]}]
   }
   }

七、配置文件

1.  {
        "rules": {
            "color-hex-case": "lower",
            "color-no-invalid-hex": true,
            "at-rule-name-space-after": "always",
            "at-rule-semicolon-newline-after": "always",
            "at-rule-no-unknown": [true, ignoreAtRules: ["function", "if", "return", "include", "extend", "mixin", "else", "while", "for", "each"]],
            "function-comma-space-after": "always",
            "function-linear-gradient-no-nonstandard-direction": true,
            "function-url-quotes": "always",
            "function-whitespace-after": "always",
            "number-leading-zero": "never",
            "number-no-trailing-zeros": true,
            "string-no-newline": true,
            "string-quotes": "double",
            "unit-case": "lower", 
            "unit-no-unknown": true,
            "value-keyword-case": "lower",
            "value-list-comma-newline-after": "always-multi-line",
            "value-list-comma-space-after": "always",
            "shorthand-property-no-redundant-values": true,
            "declaration-bang-space-after": "never",
            "declaration-bang-space-before": "always",
            "declaration-colon-space-after": "always",
            "declaration-colon-space-before": "never",
            "declaration-block-no-ignored-properties": true,
            "declaration-block-no-shorthand-property-overrides": true,
            "declaration-block-semicolon-newline-after": "always-multi-line",
            "declaration-block-semicolon-newline-before": "never-multi-line",
            "declaration-block-semicolon-space-after": "always-single-line",
            "declaration-block-semicolon-space-before": "never",
            "declaration-block-trailing-semicolon": "always",
            "block-no-empty": true,
            "block-opening-brace-space-after": "always-single-line",
            "block-opening-brace-space-before": "always",
            "block-closing-brace-space-before": "always-single-line",
            "selector-attribute-brackets-space-inside": "always",
            "selector-attribute-operator-space-after": "always",
            "selector-attribute-operator-space-before": "always",
            "selector-combinator-space-after": "always",
            "selector-combinator-space-before": "always",
            "selector-max-compound-selectors": 4,
            "selector-no-universal": true,
            "selector-pseudo-class-case": "lower",
            "selector-pseudo-class-no-unknown": true,
            "selector-pseudo-element-case": "lower",
            "selector-pseudo-element-no-unknown": true,
            "selector-type-case": "lower",
            "selector-max-empty-lines": 0,
            "selector-list-comma-newline-before": "never-multi-line",
            "selector-list-comma-space-after": "always-single-line",
            "rule-nested-empty-line-before": "never",
            "media-query-list-comma-newline-after": "always-multi-line",
            "media-query-list-comma-space-after": "always-single-line",
            "comment-whitespace-inside": "always",
            "max-empty-lines": 1,
            "max-nesting-depth": 4,
            "no-descending-specificity": true,
            "no-duplicate-selectors": true,
            "no-empty-source": true,
            "no-eol-whitespace": true,
            "no-extra-semicolons": true,
            "no-invalid-double-slash-comments": true,
            "no-unknown-animations": true
        }
    }

   八、配置文件说明
   

   属性名	属性值	描述
   color-hex-case	lower	颜色值为小写字母
   color-no-invalid-hex	true	颜色值不能为无效值
   at-rule-name-space-after	always	@xx 后需空格
   at-rule-semicolon-new-new-line	alway	@xx 分号后要换行
   function-calc-no-unspaced-operator	true	方法中的计算符号左右需空格
   function-comma-space-after	always	方法中逗号后需空格
   function-linear-gradient-no-nonstandard-direction	true	linear-gradient()内参数严格按照css规范
   function-max-line-lines	0	方法中参数允许0行空行
   function-parentheses-newline-inside	never-multi-line	方法中参数允许逗号后换行
   function-url-quotes	always	地址一定要写引号
   function-whitespace-after	always	方法之间一定要空格
   number-leading-zero	never	数字不以0开头。错误：0.5；正确：.5
   number-no-trailing-zeros	true	不能有数字末尾多余的0。错误：1.000；正确：1
   string-no-newline	true	字符串之前不能有“\n"
   string-quotes	double	字符串最外层用双引号，而不是单引号
   unit-case	lower	单位小写
   unit-no-unknown	true	不允许未知的单位
   value-keyword-case	lower	属性值小写
   value-list-comma-newline-after	always-multi-line	属性值列不允许逗号前换行
   value-list-comma-space-after	always	属性值列表逗号后需空格
   shorthand-properyu-no-redundat-values	true	可简写的属性不重复写，错误：margin: 1px 1px;
   declaration-bang-space-after	never	!important中！后不空格
   declatation-bang-space-before	always	!important中！前空一格
   declatation-colon-space-after	always	属性名冒号后空一格
   declatation-colon-space-before	never	属性名冒号前不空格
   declatation-block-no-ignored-properties	true	禁止那些由于在同一规则的另一个属性值忽略的属性值。
   declaration-block-no-shorthand-property-overrides	true	错误：border-top-width: 1px; border: 2px solid blue;
   declaration-block-semicolon-newline-after	always-multi-line	一个模块要么整个模块一行显示，要么分号后分行显示
   declaration-block-semicolon-space-after	always-single-line	属性之间分号后空一格或换行
   declaration-block-semicolon-newline-before	never-multi-line	分号前不允许换行
   [declaration-block-semicolon-space-before](http://stylelint.io/user-guide/rules/declaration-block-semicolon-space-before）	never	分号前不允许空格
   declaration-block-trailing-semicolon	always	模块内最后一个属性必须有分号
   block-no-empty	true	不允许模块内为空
   block-opening-brace-space-after	always-single-line	模块单行时“{”后空一格
   block-opening-brace-space-before	always	“{”前空一格
   block-closing-brace-space-before	always-single-line	模块单行时“}”前空一格
   selector-attribute-brackets-space-inside	always	“[”后空一格，“]”前空一格
   selector-attribute-operator-space-after	always	“[]”内的“=”后空一格
   selector-attribute-operator-space-before	always	“[]”内的“=”前空一格
   [selector-combinator-space-after](http://stylelint.io/user-guide/rules/selector-combinator-space-after）	always	选择器后空一格，例如：ul> li
   selector-combinator-space-before	always	选择器前空一格，例如：ul >li
   selector-max-compound-selectors	4	最多4层选择器
   selector-no-universal	true	不允许通用选择器
   selector-pseudo-class-case	lower	伪类选择器小写（：hover之类）
   selector-pseudo-class-no-unknown	true	不允许css规范外的伪类选择器（：hover之类）
   selector-pseudo-element-case	lower	伪类选择器小写（：: before之类）
   selector-pseudo-element-no-unknown	true	不允许css规范外的伪类选择器（：: before之类）
   [selector-type-case](http://stylelint.io/user-guide/rules/selector-type-case	lower	标签选择器小写
   selector-max-empty-lines	0	选择器共用一个模块，选择器之间允许0行空白
   selector-list-comma-newline-before	never-multi-line	选择器共用一个模块，选择器之间要么一行，要么逗号后换行
   selector-list-comma-space-after	always-single-line	选择器共用一个模块，选择器一行时，逗号后空一格
   rule-nested-empty-line-before	never	嵌套规则前不空行
   media-query-list-comma-newline-before	always-single-line	媒体查询列表中不允许逗号之前换行
   media-query-list-comma-space-after	always-single-line	媒体查询列表中单行逗号之后空一格
   comment-whitespace-inside	always	注释符之间空格。错误：/* haha */；正确：/* haha */
   max-empty-lines	1	内容之间最多允许1行空白行
   max-nesting-depth	4	sass中允许嵌套的深度为4
   no-descending-specificity	true	选择的同一元素，不允许权重较轻的选择器出现在权重较重的之后
   no-duplicate-selectors	true	一个样式表不允许相同的选择器出现
   no-empty-source	true	样式表不允许为空
   no-eol-whitespace	true	样式表末尾不允许空行
   no-extra-semicolons	true	不允许多余的分号
   no-invalid-double-slash-comments	true	不允许//注释
   no-unknown-animations	true>	animation的name不能是keyframes没有定义的