current position：Home>Less learning notes tutorial

Less learning notes tutorial

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

less

Introduce

Chinese net ：https://less.bootcss.com/

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 ：https://code.visualstudio.com/

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;
@boxColor:red;


#box{
    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

index.html

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

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 http://127.0.0.1:5500/less01/index.html, Can access

Insert picture description here

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

Insert picture description here

Variable

Updating in succession ······

Basic grammar

function

copyright notice
author[Study diary],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291426421205.html

The sidebar is recommended

guess what you like

Random recommended