Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "less development method steps". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

[1] introduction to less

LESS (a file with a .less suffix) contains a set of custom syntax and a parser, according to which we define our own style rules, which will eventually be compiled through the parser to generate the corresponding CSS file. LESS does not cut out the original features of CSS, let alone replace CSS, but adds programming language features such as variables, inheritance, operations, nesting, etc., to CSS on the basis of the existing CSS syntax, which makes it more convenient for CSS to write and maintain.

Take a look at the next less code snippet and feel its charm:

The code is as follows:

@ url:'../images/'

. box-a {

. hd-a {

Height: 25px

Background:url ('@ {url} bg.png')

}

}

Compiled css file code:

The code is as follows:

. box-a. Hd-a {

Height: 25px

Background: url ('.. / images/bg.png')

}

In the above less code, we see the epitome of css syntax (selector, attribute writing). LESS does not cut out the original features of CSS, let alone replace CSS, but adds programming language features to CSS on the basis of the existing CSS syntax. We still introduce the css file address in the front-end page development, while the less file is the code file you maintain, and in the process, we just have one more step-- compilation.

[2] compilation scheme

At present, there are many plug-ins or software that compile less into css, such as gruntjs, nodejs, etc., but the koala compiler is introduced here.

Open the software and drag the .less file into it, and you only need to save the less file in the editor (koalas support real-time monitoring compilation). By default, koalas generate a css file with the same name in this directory (you can configure the output path)

[3] there are code completion tips for writing less in the editor

Take the sublime text editor as an example: you need to install

After reboot:

[IV] version

The version of Less does not refer to itself (for example, jQuery requires downloading the corresponding version library), but refers to the version of less in the compilation tool, taking koala software as an example:

As shown in the figure, this is the less version of the koala software, 1.6.1

This is the end of the "less Development method steps". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.