Details of programmable CSS less

Less

Less is a CS preprocessing language, which adds variables, mixins, functions, structures and other features, makes CSS easier to maintain, and extends CSS functions. Less can be used by webpack, cdn mapping into js, vscade plug-in, koala, etc. the prepared less will eventually be parsed into CSS running in the browser, and you can baidu yourself.

1. variable

The feature of variable is added in Less, which can encapsulate the public path, value, attribute and even selector into a variable for global use, making the css code more brief.

//Defining variables

//1. The "pink" value is stored in the ordinary variable "color"
@color:pink;

//2. The "height" value is stored in the definition attribute "height" H "variable
@h:height;

//3. The class selector ". Class" is stored in the selector variable
@selector:.class;

//4. Storage path
 @url: "../img";//Quotes required
//To define properties, selectors and paths, you need to use {} to package variables, similar to ES6 ` ` template characters

//Use defined variables
div{
    //Background color: pink;
    background-color: @color;
    //This sentence = height: 200px;
    @{h}:200px;
}
@{selector}{
    color: red;
    background: url("@{url}/dog.png");
}

//Compiled css code
div{
	background-color: pink;
	height: 200px;
}
.class{
 	color: red;
        background: url("../img/dog.png");
}

2. nesting

Without changing the hierarchical relationship of html code, we can write css code more intuitively and reduce the writing of css code.
Let's implement a classic case of horizontal and vertical center of subboxes to show the hierarchical relationship of code
html code:

<div class="father" >
        <div class="son"></div>
</div>

Less code

//Set the black border with width and height of 200 and 1px for the parent box, and use flex to realize simple horizontal and vertical center
.father{
    border: 1px solid #ccc;
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .son{
        background-color: pink;
        width: 50px;
        height: 50px;
        &:hover{ //In this case, it means the same level as son. son:hover {}
            background-color: red;
        }
    }
}

Note & represents the name of the previous selector

//Compiled css code
.father {
  border: 1px solid #ccc;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .son {
  background-color: pink;
  width: 50px;
  height: 50px;
}
.father .son:hover {
  background-color: red;
}

As the above example, the nesting relationship between the parent box and the child box is more intuitive in less code, while avoiding writing more descendant selectors to save code

3. mix

Similar to the function in js, but with a specific format attribute. Mixin (parameter)

Parameterless mixing

//Define a nonparametric mixture
.style(){
    background-color: pink;
    width: 50px;
    height: 50px;
    
}

//Use in less
.father{
	.style()//Direct call is similar to js function call
	.son{
		.style()
	}
}

//Compiled css code
.father{
    background-color: pink;
    width: 50px;
    height: 50px;
}
.father .son{
		 background-color: pink;
   		 width: 50px;
    		height: 50px;
	   }

The css code in the mix is copied directly to the scope that references its mix,
It can be understood that the common css code is encapsulated by function and introduced by call mixing
Like the way of sharing object-oriented common methods in js

Mixed with parameters

Similar to function parameters in js, parameters can be multiple or single

//Parameter mixing
//Define blending
.style(@height,@color){//Define the mixture that needs to pass two parameters
	height:@height;
	color:@color;
}

//call
div{
	.style(100px,red)//Cannot be empty without specifying default parameters
}


//Compiled css code
div{
	height:100px;
	color:red;
}

It is similar to js function parameter passing, but error will be reported in case of no guidance for default parameter. Please note

Blending with parameter defaults

Blending can also be defined as setting default parameters, similar to defining function default values in Es6

//Define blending
.style(@height:200px,@color:blue){//Define the mixture that needs to pass two parameters
     //When calling, no corresponding value is passed. The default value is 200px and blue
	height:@height;
	color:@color;
}

//Similar to the default value of function parameter defined in es6
function func(a=1,b=2){
	return a+b;
}
func()//If the result is 3 when no parameter is transferred, the parameter shall prevail

Leaflet values specifying parameters
When calling mix, you can use the default value, a specified value, and bind the transfer object when passing a single value

//Define blending
.style(@height:200px,@color:blue){//Define the mixture that needs to pass two parameters
     //When calling, no corresponding value is passed. The default value is 200px and blue
	height:@height;
	color:@color;
}

//call
div{
	.style(@color:red)//Only red is passed to the mixture, and weights uses the default value, so you don't need to worry about parameter order and parameter binding
}

Bind the red value to the @ color variable through parameter binding.

arguments in Less mixing

It is the same as arguments in the js function to get all arguments, which solves Es6 more Extension character

.style(@height:200px,@color:blue){//Define the mixture that needs to pass two parameters
   height:@height;
   color:@color;
   border: @arguments; // Get all parameters and resolve to 200px red here
}
div{
    .style(@color:red)
}


//Compiled code
div {
  height: 200px;
  color: red;
  border: 200px red;//Completion analysis
}

Calculated attribute

Basically the same as the calc() method in css3

div{
	width:(100 + 100px);//like: width:calc(100px + 100px)
	height:(100px +100px)
}

//After compilation
div{
	width:200px;
	height:200px;
}

The above is the common syntax in Less. Using Less in the actual development can reduce a lot of work, and at the same time make the css code have a hierarchical structure.

Published 3 original articles, praised 0 and visited 5
Private letter follow

Tags: less Attribute Webpack css3

Posted on Mon, 13 Jan 2020 05:48:30 -0500 by F1Fan