我的less规范

规范

命名规范

单变量：以camelCase方式命名，示例如下
```
@primaryColor: blue;
```
组变量：使用map形式定义，变量名使用PascalCase方式命名，属性名以camelCase方式命名，示例如下：
```
@Color: {
 primary: blue;
 warning: orange;
}
```

规则集：使用kebab-case形式命名，示例如下

@divider-box: {
  height: 1px;
  background: @Color[separator];
}

带参mixin并输出规则集（包括设定pattern的mixin）的：使用.+kebab-case形式命名，示例如下

.inset-pos(@top: auto; @right: auto; @bottom: auto; @left: auto) {
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

带参mixin并作函数用时：使用.+camelCase形式命名，示例如下

.mathMethods(@a; @b) {
  add: @a + @b;
  multiplay: @a * @b;
  substract: @a - @b;
}

extend规范

同文件使用：仅可以extend同文件内的选择器，非同文件的直接在html中使用类名
尽可能原则：尽可能使用extend替代引入规则集
禁止all：不要使用all作为extend的最后一个参数值，一方面用处不大，另一方面容易造成理解困难

`mixin`规范

参数分隔符：统一使用;作为定义或传入参数的分隔符
非带参不使用：一律不使用不带参数的mixin，可用extend或变量规则集代替
禁止重载：禁止定义两个同名的mixin，因为mixin中重载特性与我们编程中所理解的重载特性不尽相同、且mixin重载使用规则较复杂
禁用@arguments与@rest...：将所有参数或剩余参数整合为一个参数不香吗？
禁止跨文件的模式匹配变量：设定模式匹配值的变量不可以跨文件使用

禁止

嵌套变量：在组变量和规则集中不嵌套使用组变量和规则集，但允许规则集中可以用&给原选择器添加样式
变量插值：禁止使用@{variable}，用处不大，理解费劲
变量变量：禁止使用@@variable，同样用处不大，理解费劲
属性变量：以真正的变量替代属性变量，使变量定义更加明显
规范&：&不可用于插值、子类等形式，一个选择器中不可使用多次&

理由：因为在html中的类名不能用&来缩写，所以需要保持一致；

用&来作子类插值时会导致复制html的类名后在less中搜索不到相应的类；

做子类使用时会导致嵌套逻辑混乱，尤其是在层级较多时，理解起来困难
```
// 示例
.content{
    // 禁止用作插值
    &-text{
        color: blue;
    }
    // 禁止用作子类
    .page & {
        border: 1px solid #999;  
    }
    // 仅可指代当前规则集的选择器
    &:hover{
        background: orange;
        color: white;
    }
}
```
merge特性：用处不大，需要用到的场景极少
跨文件修改变量：修改非本文件的变量是不允许的
when条件：没必要用when，解决问题的方式挺多的
递归mixin：简单一点多好，别搞太复杂

不推荐

块作用域：小范围的特定情况下可用

vue2中使用

除App组件外，其他组件都使用scoped规则
通用的less文件不可以生成具体内容
extend特性仅可在同一组件内使用

常用mixin

修饰文本

// 文本
// 设定文本大小与颜色
.font(@size; @color;) {
  font-size: @size;
  color: @color;
}

设定布局

// 布局
// 设置宽高
.size(@width: auto; @height: auto) {
  width: @width;
  height: @height;
}
// 设置定位方式与定位值
.position(@pos: relative; @top: auto; @right: auto; @bottom: auto; @left: auto) {
  position: @pos;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}
// 设定flex布局并且使内容默认居中
.dispayFlex(@justifyContent: centter; @alignItems: center;) {
  display: flex;
  justify-content: @justifyContent;
  align-items: @alignItems;
}
// 设定两栏布局，左侧固定
.twoColumnWithFixedLeft(@leftWidth;) {
  display: grid;
  grid-template-columns: @leftWidth auto;
}
// 设定两栏布局，右侧固定
.twoColumnWithFixedRight(@rigthWidth;) {
  display: grid;
  grid-template-columns: auto @rigthWidth;
}

总结

目前该规范还未付诸实践，需要在实际开发中作进一步检验

我的less规范

我的less规范

规范

命名规范

extend规范

mixin规范

禁止

不推荐

vue2中使用

常用mixin

修饰文本

设定布局

总结

`mixin`规范