LESS from entry to mastery

What is LESS

LESS is a CSS preprocessing language and an extension of the CSS.

Then there are some popular precompilers: SASS/SCSS, LESS, Stylus.

SASS Learning Site:

www.sass.hk/
www.w3cschool.cn/sass/
github.com/sass/sass

LESS Learning Website:

lesscss.cn/
less.bootcss.com/
www.w3cschool.cn/less/
Github.com/less/less.j…

Stylus Learning website:

stylus.bootcss.com/
Github.com/stylus/styl…

Why LESS

SASS/SCSS and Stylus are very strong, but I still chose the LESS, people like NodeJS, I don’t like it, then Stylus Spaces is used LESS, now also accustomed to, the following will introduce you to some of the LESS usage.

LESS — Write CSS like javascript

Features:

1. Writing styles is simpler: nested
2, easy to use: variables, operations, functions
3. Low cost of learning: Grammar

How to use LESS

1. Installation and use

(1) Used in the browser

reference

<link rel="stylesheet/less" type="text/css" href="index.less" />
<! /less -->
<script src="Less - 1.3.3. Min. Js"></script>
<! -- js must be referenced after less -->
Copy the code

After the preceding configuration, js automatically compiles less to CSS when visiting a page

CDN:

https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js

https://cdn.bootcss.com/less.js/3.9.0/less.js

Observation model

After each saved file, when debugging, you always need to manually refresh, hence the observation mode

Basic setup

<link rel="stylesheet/less" href="index.less">
<script>less = { env: 'development'};</script>// Declare the development pattern<script src="Less - 1.3.3. Min. Js"></script>
<script>less.watch();</script>// Call the observation modeCopy the code

Once you’ve called the observation mode, you can automatically compile every time you save. The idea behind the observation mode is that you compile it every once in a while

The extension configuration

Add the script tag after the base Settings, as follows

less = {
    // Development environment, production mode
    env: "development".// Load asynchronously
    async: false.// Read the import asynchronously under the page
    fileAsync: false.// Observe the mode interval
    poll: 1000.// Use a function
    functions: {}, 

    Comment, mediaQuery, all
    dumpLineNumbers: "all".// Whether to adjust the URL to relative
    relativeUrls: false./ / root path
    rootpath: ": /"
};
Copy the code

(2) Compile using Node

Before using this method, you must install node

To download node, go to nodejs.cn/download/

Once node is installed, you can officially install itless 了

npm install -g less
Copy the code

When the less file is written, you can compile it using the following command

lessc index.less index.css
Copy the code

(3) Gulp packaging tool

Using this method requires that gulp be installed globally and project separately

// Global NPM install -g gulp // Current project NPM install --save-dev gulpCopy the code

Then install gulp plug-in gulp-less

npm install -save-dev gulp-less
Copy the code

After the installation, create the entry file gulpfile.js and write:

var origin = './index.less'; Var result = './'; Var gulp = require('gulp'); gulp.task('less2css', function(){ gulp.src(origin) .pipe(less()) .pipe(result); })Copy the code

At this point, you can compile it by entering the gulp Less2css command. However, it is difficult to compile it every time you save it, so add the following code

gulp.task('lessc', function(){
    gulp.watch('origin', ['less2css']);
})
Copy the code

Now you just need to type gulp Lessc to implement less observer mode

2, grammar,

The basic syntax of CSS is preserved and extended

@import "reset.css" //less does not change the CSS file at compile time
@import "base" //less You can omit the file format when importing other LESS files
@import url("base.less") // Less can also be imported in url form, but must have a suffix
Copy the code

3, operation

In less, you can add, subtract, multiply and divide attributes as you write them

Example: The header inserts a padding

@fullWidth: 1200px;
.header{
    width: @fullWidth – 20px * 2;
    padding: 0px 20px*2;
}
Copy the code

4, variables,

(1) Format: Starts with an @

@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;
Copy the code

(2) String interpolation

@name: banner;
background: url("images/@{name}.png") no-repeat;
Copy the code

Compile:

background: url("images/banner.png") no-repeat;
Copy the code

(3) Avoid compiling

background: ~"red";
Copy the code

Compile:

background: red;
Copy the code

(4) Use in REM layout of mobile terminal

@fullWidth: 750;
@toRem: unit(@fullWidth/10,rem);
header{
    height: 150/@toRem;
}
Copy the code

Compile:

header{
    height: 2rem;
}
Copy the code

5, mixed

(1) Inheriting from one class to another

.class1{
    color: red;
}
.class2{
    background: green;
    .class1;
}
Copy the code

The compiled:

.class1{
    color: red;
}
.class2{
    background: green;
    color: red;
}
Copy the code

(2) Replace the current selector with &

a{
    color: # 000;
    &:hover{
        color: #f00; }}Copy the code

The compiled:

a{
    color: # 000;
}

a:hover{
    color: #f00;
}
Copy the code

(3) Nest subclasses within a parent class

.class1{
    p{
        span{
            a{}}&:hover{}}div{}}Copy the code

The compiled:

.class1{ }
.class1 p{ }
.class1 p span{
.class1 p span a{ }
.class1 p:hover{  }
.class1 div{  }
Copy the code

(4) mix with parameters

.color(@color=red){
    color: @color;
}
.class1{
    .color(#0f0);
}
.class2{
    .color(a); }Copy the code

The compiled:

.class1{
    color: #0f0;
}
.class2{
    color: red;
}
Copy the code

(5) block definition

@demo: {
	color: #f00;
}
body {
	@demo()}Copy the code

The compiled:

body {
	color: #f00;
}
Copy the code

The difference between this approach and class inheritance is that the block does not appear in the compiled CSS.

6, functions,

(1) Logical control

Format: Statement when(conditons), prop: if((conditions),value);
Example 1: Use a parameter class name in less to display a pure CSS triangle in four directions: top, bottom, left and right

index.less

.base() {width: 0;
    height: 0;
}
@normal: 20px solid transparent;
@anger: 20px solid #f00;
.triangle(@val) when(@val=left){
    .base(a);border-left: none;
    border-right: @anger;
    border-top: @normal;
    border-bottom: @normal;
}
.triangle(@val) when(@val=right){
    .base(a);border-right: none;
    border-left: @anger;
    border-top: @normal;
    border-bottom: @normal;
}
.triangle(@val) when(@val=top){
    .base(a);border-left: @normal;
    border-right: @normal;
    border-top: none;
    border-bottom: @anger;
}
.triangle(@val) when(@val=bottom){
    .base(a);border-left: @normal;
    border-right: @normal;
    border-top: @anger;
    border-bottom: none;
}
.div1{
    .triangle(left);
}
.div2{
    .triangle(right);
}
.div3{
    .triangle(top);
}
.div4{
    .triangle(bottom);
}
Copy the code

index.html

<! DOCTYPE html> <html> <head> <link rel="stylesheet/less" href="index.less"> <script src=".. / less - 1.3.3. Min. Js "> < / script > < / head > < body > < div class =" div1 "> < / div > < div class =" div2 "> < / div > < div class =" div3 "> < / div > <div class="div4"></div> </body </html>Copy the code

Example 2:

background: if( (true), #f00 );
Copy the code

(2) cycle

Bg_1.png, bG_2.png,… , bg_8. PNG

table td{
    width: 200px;
    height: 200px;
    .loop(@i) when(@i<9) {&:nth-child(@{i}) {background: url(~ ".. /images/partner_@{i}.png") no-repeat;
        }
        .loop(@i+1);
    }
    .loop(1);
}
Copy the code

(3) list

@backgroundlist: apple, pear, coconut, orange;
Copy the code

(4) less function library

image-size(" bg. PNG ")// Obtain the Width and Height of the image
image-width(a)// Obtain the Width and Height of the image
image-height(a)// Obtain the Width and Height of the image
convert(9s, ms) // Convert 9 seconds to milliseconds
convert(14cm, mm) // Convert 14cm to mm
Copy the code

Refer to the official library for more functions, including mixed functions, math functions, string functions, list functions, and more

7. Use JS expressions

It is also possible to refer to JS expressions in less, but this is generally not recommended. This approach may cause errors when compiling CSS with less using NodeJS.
Format: ` javascript `
Example: Set the height to the height of the currently obtained browser

@fullHeight: unit(` window.screen.height `, px);
div{
    height: @fullHeight;
}
Copy the code

Try introducing @width: unit(‘ window.screen.width ‘, px) into a VW layout? It is not recommended to use less in formal environments. To use LESS, you need to introduce JS in the header, which will consume time during JS execution. However, less compilation needs to be performed after JS execution, which will affect performance to some extent.

What is LESS

Why LESS

How to use LESS

1. Installation and use

(1) Used in the browser

reference

CDN:

Observation model

(2) Compile using Node

(3) Gulp packaging tool

2, grammar,

3, operation

4, variables,

(1) Format: Starts with an @

(2) String interpolation

(3) Avoid compiling

(4) Use in REM layout of mobile terminal

5, mixed

(1) Inheriting from one class to another

(2) Replace the current selector with &

(3) Nest subclasses within a parent class

(4) mix with parameters

(5) block definition

6, functions,

(1) Logical control

(2) cycle

(3) list

(4) less function library

7. Use JS expressions

Related Posts

“Code Style” in applets best practices 💅🏻

How to make the first screen of your H5 page open in seconds? In-depth discussion on the optimization scheme of the first screen.

Why don’t I use classes