less补档

Posted on Edited on

除了基本的嵌套.还有一些常用的.

变量

1
2
3
4
5
6
@width: 10px;
@height: @width + 20px;
#header {
  width: @width;
  height: @height;
}

混合

将一组属性从一个规则集包含到另一个规则集的方法.
比如将下面的类放到其他类中.

1
2
3
4
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

放到下面中使用

1
2
3
4
#menu a {
  color: #111;
  .bordered();
}

嵌套

clearfix

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix {
	display: block;
  zoom: 1;

  &::after {
		content: '';
    display: block;
    font-size: 0;
    heightL 0;
    clear: both;
    visibility: hidden;
}

嵌套条件语句

转义

1
2
3
4
5
6
7
8
9
10
11
12
13
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

//编译为
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

导入

导入一个.less文件,此文件中的所有变量就可以全部使用.
另外.less可以省略文件名.

1
2
@import "library"; //library.less
@import "typo.css";

stlyelint 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// @see: https://stylelint.io

module.exports = {
  extends: [
    "stylelint-config-standard", // 配置stylelint拓展插件
    "stylelint-config-prettier", // 配置stylelint和prettier兼容
    "stylelint-config-recess-order", // 配置stylelint css属性书写顺序插件,
  ],
  plugins: ["stylelint-less"], // 配置stylelint less拓展插件
  customSyntax: "postcss-less",
  rules: {
    indentation: null, // 指定缩进空格
    "no-invalid-double-slash-comments": null, // 禁止双斜杠注释
    "no-descending-specificity": null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    "function-url-quotes": "always", // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    "string-quotes": "double", // 指定字符串使用单引号或双引号
    "unit-case": null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
    "color-hex-case": "lower", // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
    "color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
    "rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
    "font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
    "block-opening-brace-space-before": "always", // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
    "property-no-unknown": null, // 禁止未知的属性(true 为不允许)
    "no-empty-source": null, // 禁止空源码
    "declaration-block-trailing-semicolon": null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
    "selector-class-pattern": null, // 强制选择器类名的格式
    "value-no-vendor-prefix": null, // 关闭 vendor-prefix(为了解决多行省略 -webkit-box)
    "at-rule-no-unknown": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global", "v-deep", "deep"],
      },
    ],
  },
};

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{
  "name": "react-admin-antd",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build:dev": "tsc && vite build --mode development",
    "build:test": "tsc && vite build --mode test",
    "build:pro": "tsc && vite build --mode production",
    "preview": "vite preview",
    "lint:eslint": "eslint --fix --ext .js,.ts,.tsx ./src",
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,html,md}\"",
    "lint:stylelint": "stylelint --cache --fix \"**/*.{less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged",
    "prepare": "husky install",
    "release": "standard-version",
    "commit": "git pull && git add -A && git-cz && git push"
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "antd": "^5.2.1",
    "axios": "^1.3.3",
    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-transition-group": "^4.4.5",
    "redux": "^4.2.1",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.4.2"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.4.3",
    "@commitlint/config-conventional": "^17.4.3",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-transition-group": "^4.4.5",
    "@types/redux-promise": "^0.5.29",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.34.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "less": "^4.1.3",
    "lint-staged": "^13.1.2",
    "postcss": "^8.4.21",
    "postcss-less": "^6.0.0",
    "prettier": "^2.8.4",
    "rollup-plugin-visualizer": "^5.9.0",
    "stylelint": "^15.1.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-recess-order": "^4.0.0",
    "stylelint-config-recommended-less": "^1.0.4",
    "stylelint-config-standard": "^30.0.1",
    "stylelint-less": "^1.0.6",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-svg-icons": "^2.0.1"
  }
}

报错提醒

stylelint 一直报错,

原因

css 中不支持//作为注释前缀,必须是/**/.
而 less 是支持的,而且 stylelint 也支持 less 或 scss 这样,但是就是报错.

解决方法

安装postcss-less,在stylelintrc.js中

1
2
// stylelintrc.js
customSyntax: "postcss-less",