Less specifications

##LESS

Code organization

The code is organized in the following order:

1.@import

2. Variable declaration

3. Style declaration

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

@import statement

@import The text quoted by the statement needs to be written within a pair of quotation marks, and the .less suffix is ​​not allowed Omit. Quotation marks

' and " can be used, but they need to be unified within the same project.

/* Not recommended */@import "mixins/size";
@import 'mixins/grid.less';/* Recommended */@import "mixins/size.less";
@import "mixins/grid.less";

Mixin

1. In the definition ## When #mixin

, if the mixin name is not a className that needs to be used, brackets must be added, otherwise it will be output to CSS even if it is not called. 2. If mixed. It is a mixin that does not output content. You need to add brackets after the mixin (even if no parameters are passed) to distinguish whether it is a className.

/* Not recommended */.big-text {
  font-size: 2em;
}

h3 {
  .big-text;
  .clearfix;
}/* Recommended */.big-text() {
  font-size: 2em;
}

h3 {
  .big-text(); /* 1 */
  .clearfix(); /* 2 */}

Avoid too many nesting levels

Limit nesting depth to 2 levels. Re-evaluate nesting beyond 3 levels. This can avoid overly detailed CSS selectors. A large number of nested rules. When readability is affected, it is recommended to avoid nested rules with more than 20 lines.
#String interpolation.

• Variables can be embedded in strings in a way similar to ruby ​​and php, with structures like @{name}:
  @base-url: "http://assets.fnord.com";

background-image: url("@{base-url}/images/bg.png");