My less specification

specification

Naming conventions

• Single variable: named in camelCase mode, as shown in the following example

  @primaryColor: blue;
  Copy the code

• Group variables: defined in map format, variable names named in PascalCase format, attribute names named in camelCase format, as shown in the following example:

  @Color: {
   primary: blue;
   warning: orange;
  }
  Copy the code

• Rule set: Named in kebab-case format as shown in the following example

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

• Mixins with parameters and output rule sets (including mixins with pattern Settings) : use the.+kebab-case format, as shown in the following example

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

• When used as a function with mixins: use the.+camelCase form, as shown in the following example

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

The extend specification

• Use with file: OnlyextendSelectors in the same file, not directly in the same filehtmlClass names are used in
• Rule: Use as much as possibleextendSubstitution import rule set
• banall: Do not useallAs aextendThe last parameter value of, on the one hand, is not very useful, on the other hand, easily difficult to understand

mixinspecification

• Parameter delimiter: used uniformly; As a delimiter to define or pass in parameters

• Nonparametric mixins: Do not use parameterless mixins. Extend or variable rule sets can be used instead

• Prohibit overloading: It is forbidden to define two mixins with the same name, because the overloading characteristics of mixins are not the same as the overloading characteristics we understand in programming, and the rules for using overloading of mixins are complicated

• Disable @arguments with @rest… : Wouldn’t it be nice to combine all or the rest of the parameters into one parameter?

• Disable pattern matching variables across files: Variables with pattern matching values cannot be used across files

ban

• Nested variables: Use group variables and rule sets unnested in group variables and rule sets, but allow the rule set to style the original selector with &

• Variable interpolation: use @{variable} is prohibited

• Variable: do not use @@variable

• Attribute variables: Replace attribute variables with real variables to make variable definitions more obvious

• The specification & : & cannot be used for interpolation, subclasses, etc., or more than one & in a selector

  Reason: Because class names cannot be abbreviated with & in HTML, they need to be consistent;

  Interpolation with & will result in copying the HTML class name and not finding the corresponding class in less.

  Subclassing can lead to messy nested logic, especially at larger levels, which can be difficult to understand

  / / sample
  .content{
      // Forbid interpolation
      &-text{
          color: blue;
      }
      // Disallow subclasses
      .page & {
          border: 1px solid # 999;  
      }
      // Can only refer to the selector of the current rule set
      &:hover{
          background: orange;
          color: white; }}Copy the code

• Merge feature: not very useful and requires very few scenarios

• Changing variables across files: Changing variables that are not in the file is not allowed

• When condition: There is no need to use when, there are many ways to solve the problem

• Recursive mixins: Keep it simple, not too complicated

Is not recommended

• Block scope: available for a small range of specific situations

Vue2 used in

• Except for the App component, all components use the Scoped rule

• Generic LESS files cannot generate concrete content

• The EXTEND feature can only be used within the same component

Commonly used a mixin

Modify text

/ / text
// Set the text size and color
.font(@size; @color;) {
  font-size: @size;
  color: @color;
}
Copy the code

Set the layout

/ / layout
// Set width and height
.size(@width: auto; @height: auto) {
  width: @width;
  height: @height;
}
// Set the location mode and value
.position(@pos: relative; @top: auto; @right: auto; @bottom: auto; @left: auto) {
  position: @pos;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}
// Set the Flex layout and center the content by default
.dispayFlex(@justifyContent: centter; @alignItems: center;) {
  display: flex;
  justify-content: @justifyContent;
  align-items: @alignItems;
}
// Set the layout of two columns, fixed on the left side
.twoColumnWithFixedLeft(@leftWidth;) {
  display: grid;
  grid-template-columns: @leftWidth auto;
}
// Set the layout of two columns, fixed right side
.twoColumnWithFixedRight(@rigthWidth;) {
  display: grid;
  grid-template-columns: auto @rigthWidth;
}
Copy the code

conclusion

At present, the specification has not been put into practice and needs to be further tested in practical development