less

  • Development environment (DEV) Production environment (Pro is online)

  • We can use less. Main. js to parse the link from less and change it to rel=”stylesheet/less”

  • Dev generates (webpack) directly with parsing tools

  • Pro will parse less into CSS before going online

  • Run lessc indx.less index. CSS in the folder where index.less resides

  • Compile index.less to index. CSS (this CSS name is your own)

  • lessc index.less index.min.css -x

  • Compile and compress the CSS file

Common usage

nested

.outer{ width: 300px; height: 300px; padding: 90px; background: deepskyblue; .inner{ width: 200px; height: 200px; padding: 90px; background: gray; .center{ width: 100px; height: 100px; padding: 90px; background: hotpink; }}}Copy the code

variable

  • To define a variable starting with @, use – (middle)
  • You can simply assign the corresponding CSS properties to them
@myPadding: 90px;
@color1:deepskyblue;
.outer{
  width: 300px;
  height: 300px;
  padding: @myPadding;
  background: @color1;
Copy the code
  • Common uses of variables
    • 1. Theme change: Change the variable value to change the theme
    • 2. Path upgrade

A mixture of function

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
}
.box2{
  .box;
  background: navajowhite;
}

Copy the code
  • After compilation (.box) still exists
  • In a style (.box2) you can just say (.box)
  • The idea is to copy exactly what the.box looks like, and if you need something different, write something different to cover it
.box(@num){
  width: 100px;
  height: @num;
  background: skyblue;
}
.box2{
  .box(100px);
  background: navajowhite;
}
Copy the code

  • When parentheses are passed, (.box) becomes a function entirely and will not exist when compiled

  • The function returns a value, if any, that is executed multiple times based on the result of the first execution

  • If no return value is executed more than once, compile each time, taking the last time

Variable ascension

@fontSize:18px; . Box1 {. Box (0.1, 0.2); Fonts (10, 8); background: skyblue; opacity: @result; font-size: unit(@resultFontS,px); font-size: @fontSize; //4px } @fontSize:4px; . Box2 {. Box (0.2, 0.5); Fonts (10, 20); background: navajowhite; opacity:@result; font-size: unit(@resultFontS,px); font-size: @fontSize; //4px }Copy the code
  • Functions also work on promotion

Inheriting the extend

  • .box1:extend(.box){}Box1 inherits box’s style in this way, and when compiled isBox, box1In this form, instead of copying box code to Box1
  • .box1(.box;)This is done by copying, assigning a copy of the style in box to Box1
  • .box1:extend(.box,.com){}This approach inherits both box and COM styles

conditional

	.fun(@n,@m) when (@n>10) and (@m>10){
	  font-size: 80px;
	}
Copy the code

Less connector

.box4{ background: pink; &.boxa{ font-size: 80px; } &:hover{ font-size: 20px; }}Copy the code