search
HomeWeb Front-endHTML TutorialDetailed explanation of CSS preprocessor Less

CSS preprocessor

Why there is a CSS preprocessor

CSS is basically a tool for designers, not programmers. In the eyes of programmers, CSS is a headache. Unlike other programming languages, such as PHP, Javascript, etc., it has its own variables, constants, conditional statements and some programming syntax. It is just a line of pure attributes. Description is quite time-consuming to write, and the code is difficult to organize and maintain.

Naturally, some people began to wonder whether some programming elements could be added to CSS like other programming languages, so that CSS could do some predetermined processing like other programming languages. In this way, there is a "CSS Preprocessor".

What is CSS preprocessor

It is a superset of the CSS language and is more complete than CSS.

CSS preprocessor defines a new language. Its basic idea is: use a specialized programming language to add some programming features to CSS, use CSS as a target to generate files, and then developers Just use this language for coding work.

In layman’s terms, the CSS preprocessor uses a specialized programming language to design Web page styles, and then compiles them into normal CSS files for project use. The CSS preprocessor adds some programming features to CSS without having to consider browser compatibility issues. For example, you can use variables, simple logic programs, functions, etc. in CSS. Some basic features in programming languages ​​allow you to CSS is more concise, more adaptable, more readable, easier to maintain, and many other benefits.

CSS preprocessor technology has been very mature, and many different CSS preprocessor languages ​​have emerged, such as: Sass (SCSS), LESS, Stylus, Turbine, Switch CSS, CSS Cacheer, DT CSS etc. There are so many CSS preprocessors, so "Which CSS preprocessor should I choose?" has become a hot topic on the Internet recently, on Linkedin, Twitter, CSS-Trick, Zhihu and major technical forums , many people are arguing about this. This is a big step forward from where we once were on the subject of whether we should use CSS preprocessors.

So far, among the many excellent CSS preprocessor languages, Sass, LESS and Stylus are the best, with many discussions and comparisons. This article will introduce you to these three CSS preprocessor languages ​​from their background, installation, usage syntax, differences and other comparisons. I believe that front-end development engineers will make their own choice-which CSS preprocessor should I choose?

Introduction to less, less is a popular preprocessing CSS that supports variables, mixes, functions, nesting, loops and other features.

less syntax

Comments

less can have two types of comments.

The first type of comment: template comment

// The comments here in the template comment will be deleted after they are converted into CSS

because less needs to be converted into css before it can be used used in the browser. After converting to css, this kind of comment will be deleted (after all, css does not recognize this kind of comment).

Second type of comment: CSS comment syntax

/* CSS comment syntax is converted to CSS and then retained*/

Summary: If written in less Comments, we recommend writing the first type of comments. Unless it is something similar to copyright, the second type of annotation is used.

Define variables

We can define reused or frequently modified values ​​as variables, and just reference this variable where it needs to be used. This avoids a lot of duplication of work.

(1) In the less file, define the format of a variable:

@Variable name: variable value; //Format @bgColor: #f5f5f5; //Format example

(2) At the same time, reference this variable in the less file.

Finally, the complete code of the less file is as follows:

main.less:
// 定义变量@bgColor: #f5f5f5;// 引用变量body{    background-color: @bgColor;}

After we compile the above less file into a css file (the next section talks about the compilation of the less file), the automatically generated code is as follows:

main.css:
body{    background-color: #f5f5f5;}

Using nesting

Children selectors are often used in css. The effect may be like this:

.container {
  width: 1024px;}.container > .row {
  height: 100%;}.container > .row a {
  color: #f40;}.container > .row a:hover {
  color: #f50;}

The above code is nested in many layers. It’s tedious to write. But if you use less's nested syntax to write this code, it will be more concise.

Examples of nesting are as follows:

main.less:
.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

After compiling the above less file into a css file, the automatically generated code is as follows:

main.css
.container {    width: 1024px;}.container > .row {    height: 100%;}.container > .row a {    color: #f40;}.container > .row a:hover {    color: #f50;}.container div {    width: 100px;}.container div .hello {    background-color: #00f;}

I believe you have read these cases After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Related Reading:

The 20 most commonly used regular expressions in JavaScript

Common settings for vscode

How to convert decimal numbers to hexadecimal

How to implement a custom mouse right-click menu in JS

The above is the detailed content of Detailed explanation of CSS preprocessor Less. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentThe Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyHTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersHTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesThe Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.