Basic use of Less

Introduction

Less is a CSS preprocessing language, which expands the CSS language and adds functions such as variables, mixins, and functions, making it more powerful and easier to develop.

work process

Less includes a set of custom syntax and a parser . The Less code will be compiled into CSS first, so that it will be recognized by the browser, and the compiled CSS file will be referenced to add styles to the elements.

Notice

1. Less can be referenced on the server side and the browser side;
2. There will be cross-domain problems when referencing external less files on the browser side* You can use less* directly in html or use the live server to open the local service.
3. Comments in less * Comments starting with // will not be compiled into the css file * Comments wrapped in /**/ will be compiled into the css file

basic use

1. Define variables

(1) Start with @ > @color:pink When all the pink in the file should be changed to deeppink, just modify the definition directly; > You can also set attributes/selector variables/class names > @m:margin: use The format can be @{m}used ; > @selector:#wrap can be @{selector}used anywhere from #wrap to #wrap; > @url: The format can be @{url}used . > (2) start with $ > $co l or : p ink > ba c k g ro u n d - co l or :$ color;

2. Lazy loading of variables

@var:0;
.class{@var:1;.brass:{@var:2; /* 编译后是3 当某一个位置需要@var这个变量的值时 他会解析一整个作用域中间的@var,再确定@var的值 */three:@var;@var:3;}// 编译后是1one:@var;
}

3. Nesting rules of less

CSS does not support code nesting, but Less supports it. Nesting represents the parent-child relationship of selectors
The use of & (to make it level) & represents the parent element of the outer layer

#wrap{.inner{/*直接写:hover时由于嵌套把hover当成inner的子元素去解析，hover没有效果 */&:hover{}}
}

4. less mixing

When there are repeated styles, you can write the style in advance and put it in a class, and then you can directly write the class name of the style code when citing below.

// (1)普通混合：
.juzhong{xxxxx
}
// 下面有需要用到重复代码时可以这样
.a{.juzhong
}
/*普通混合的样式编译之后会在css文件中出现但其实我们不想要这个编译结果，我们要的是.a的样式能够编译即可
*/

// (2)不带输出的混合:
.juzhong(){xxxxx
}
// 与上述类似,区别在于加了个括号,该部分样式不会出现在编译后的css文件里面

// (3)带参数混合:
.juzhong(@w,@h,@color){width:@w;height:@h;background-color:@color;
}
// 使用时记得传参
.a{.juzhong(100px,50px,pink);
}

// (4)带参数且有默认值的混合:
// 与上述类似，只是在调用时如果不传参就有默认参数
.juzhong(@w:10px,@h:10px;@color:pink){

}

// (5)命名参数混合:
// 当形参和实参个数不匹配时可以使用命名参数
.juzhong(@w,@h,@color){

}
.a{// 只给color赋值,若不指定@color,只传一个参数,默认会给第一个形参即width赋值.juzhong(@color:black);
}

// (6)匹配模式
.triangle(L,@w,@c){

}

.triangle(R,@w,@c){

}
// 调用时 .triangle(L,40px,pink); .triangle(R,30px,black)

// (7)还有第7种arguments变量，不过以上6种已经满足大部分的开发需求。

5. less computing

Addition, subtraction, multiplication, and division can be performed in less > width: (100+100px) As long as one of the two sides of the calculation carries a unit, the result will have a unit

6. less inheritance

 .p1{display:inline-block;color:red;}.p2:extend(.p1){font-size:12px;}

 // 相当于p2继承了p1的样式,p2还有新的样式font-size:12px

7. Function

For example: > The function of taking the middle value of the color: average(red,yellow) > Take the darker color darken(#bfa,15%) Take the color 15% darker than #bfa

8. @import Similarly, external Less files can also be introduced.

at last

Organized 75 JS high-frequency interview questions, and gave answers and analysis, which can basically guarantee that you can cope with the interviewer's questions about JS.

Friends in need, you can click the card below to receive and share for free

Basic use of CSS preprocessor Less