Definition of variables
  • It is recommended that all variables be written at the top
  • Base variables can be defined in the same file
Use of variables
  • Use the same attribute value more than once
// Scenario 1
@color: # 000;
@width: {
  left: 320px;
  right: 768px;
  center: 1024px;
}
div {
    width:@width[left];
    color:@color;
    background:fadeout(@color.75%);
}
// css
div {
    width:320px;
  	color: # 000;
  	background: rgba(0.0.0.0.25);
}
Copy the code
  • For pure color values
    • fadeoutFunction to indicate how much opacity is used, if 75%, then the color value isRgba (0,0,0,0.25)
    • fadeinFunction Settings are more or less the same color values
  • Against the originalrgbaColor value, if originallyRgba (0,0,0,0.2)
    • usefadeout, the use offadeout(@color,10%), represents the color value isRgba (0,0,0,0.1); usefadeout(@color,20%), represents the color value isRgba (0,0,0,0)Anything greater than 20Rgba (0,0,0,0)
    • fadeinFunction, usingfadein(@color,10%), represents the color value isRgba (0,0,0,0.3)

There are many other functions that are useful for numbers

  • Use the same set of attributes more than once
// Use method 1 (arguments can be passed in)
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.fd-span {
  .bordered;
  color: # 000;
}
// Use method 2 (no arguments can be passed in)
@bordered: {
   border-top: dotted 1px black;
   border-bottom: solid 2px black;
 }
.fd-span {
  @bordered(a);color: # 000;
}
// css
.fd-span {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    color: # 000;
}
// Use with parameters (black is used by default without passing parameters)
.bordered (@color:black) {
  border-top: dotted 1px @color;
  border-bottom: solid 2px @color;
}
.fd-span {
  .bordered(red);
  color: # 000;
}
// css
.fd-span {
    border-top: dotted 1px red;
  	border-bottom: solid 2px red;
    color: # 000;
}
// Multiple arguments can be passed using commas (@arguments) to indicate that all variables are used, or arguments can be used separately
// This is not appropriate because box-shadow and color are not necessarily related. It is better to define variables with as little coupling as possible
.boxShadowColor(@x:0.@y:0.@blur:1px.@color:# 000) {-moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
  	color: @color;
}
.fd-span {
  .boxShadowColor(2px.2px.3px.#f36);
}
// css
.fd-span {
    -moz-box-shadow: 2px 2px 3px #f36;
	-webkit-box-shadow: 2px 2px 3px #f36;
    box-shadow: 2px 2px 3px #f36;
    color: #f36;
}
Copy the code
Pattern matching
// Match different values according to different switches, @_ means match all values
.mixin (dark, @color) {
  	color: darken(@color.10%);
}
.mixin (light, @color) {
  	color: lighten(@color.10%);
}
.mixin (@ _.@color) {
  	display: block;
}
@switch: light;
.fd-span {
  	.mixin(@switch.# 888);
}
// css
.fd-span {
  	display: block;
    color:#a2a2a2;
}
Copy the code
nested
  • Not all classes need to be nested, not very readable, not very maintainable
  • Pseudo-classes like active can be nested (& for sibling,. For child)
To calculate
  • Color is computable, but not very readable, and the front end may not understand the color value as well
  • Arithmetic operator+,-,*,/You can operate on any number, color, or variable
// Arithmetic operators convert units before adding, subtracting, or comparing. The result is the unit type of the leftmost operand
// Invalid unit conversions such as px to cm or rad to % are ignored
@conversion: 5cm + 10mm;// 6cm
@conversion: 2 - 3cm - 5mm;/ / - 1.5 cm
@conversion: 2 + 5px - 3cm;// 4px

// Multiplication and division are not converted (length times length gives a range, CSS does not support specifying a range, so it is meaningless)
@base: 2cm * 3mm; // 6cm

// The color arithmetic is inferior to the color function, which was introduced at the beginning
Copy the code
scope
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white}}Copy the code
String interpolation
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
Copy the code
JavaScript expression
@mainColor:#e92323;
@string: `'hello'.concat(' world')`;
div:before{
  background: @mainColor;
  content: @string;
}
// css
div:before {
    background: #e92323;
    content: "hello world";
}
Copy the code
  • The compiled version doesn’t seem to workJavaScript, can only be introducedless.jsCan be used when

There may be a lot more to say, but I personally feel that writing less does not lose readability, maintainability, and extensibility. Many nested readability is very poor nowadays, not to mention maintainability and extensibility