current position:Home>Less learning notes tutorial

Less learning notes tutorial

2022-04-29 16:15:28Study diary



Chinese net :

 Insert picture description here

Less (Leaner Style Sheets Abbreviation ) Is a backward compatible CSS Extended language . What is presented here is Less Official documents of ( Chinese version ), Contains Less Language and use JavaScript Developed to bring Less Convert styles to CSS Styling Less.js Tools .

because Less and CSS Very much like , So it's easy to learn . and Less Only on CSS The language adds a few convenient extensions , This is it. Less One of the reasons why it is so easy to learn .

Environmental preparation

vscode Download and install

Study less We need to learn before less Environment , Here, we use vscode,vsCode It's a lightweight editor , Microsoft development , Many of them have a large number of plug-ins , It is also a widely used editor at the front end .

Introduce ( From Baidu Encyclopedia ):

 Insert picture description here

without vscode, Download address :

Download it like qq Just install it as before , It's simple , There is no more demonstration here ;

After downloading , We only need to install a plug-in , Just like the , Look at the steps below :

 Insert picture description here

After installation, create a new one less Folder as our working directory :

 Insert picture description here

Quick start

1、 Create a new folder less01, Create a new one hello.less

 Insert picture description here

2、 In the catalog , Create a new one index.html file , Enter a ! Prompt appears , enter , You can quickly generate a html structure , We introduce... Into the page hello.css, Write the following code

hello.less Code

@width: 100px;
@height: 100px;

    width: @width;
    height: @height;
    background-color: @boxColor;

css The code is preprocessed , You don't have to write , That's true :

 Insert picture description here


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="hello.css">
    <div id="box"></div>

You can double-click to open index.html page , You can see the effect , Here is another easy to use vscode plug-in unit Live Server, You can directly right-click the file to open , You can run to the browser , This is not simply opening a file , But in vscode There is a built-in server , Open the web page through the server , It should be running, and the web page will pop up automatically in the browser , without , Enter the address in the browser address bar, Can access

 Insert picture description here

Running results , You'll get one 100px A small square red box :

 Insert picture description here


Updating in succession ······

Basic grammar


copyright notice
author[Study diary],Please bring the original link to reprint, thank you.

Random recommended