CSS preprocessor Less

Official website: https://less.bootcss.com/

1, what is Less?

  • Less is a dynamic style language, which belongs to the category of CSS preprocessor. It extends the CSS language
  • The addition of variables, Mixin, ambiguity and other features makes CSS easier to maintain and expand
  • Less can run on the client or on the server with Node.js

CSS preprocessor is a program that allows you to generate CSS through the preprocessor's own unique syntax.

Most preprocessors will add some features that native CSS does not have, such as code mixing, nested selectors, inheritance selectors, etc. these features make the structure of CSS more readable and easy to maintain.

2, Use Less

1. Installation and use

Use Less (command line) in the Node.js environment

npm install -g less

To convert a less file to a css file:

lessc style.less style.css
  • Installing the plug-in in VSCode will automatically convert the Less file into the Css file

Using Less in the browser environment

<link rel="stylesheet/less" type="text/css" href="style.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

2. Notes

  • Comments starting with / / will not be compiled into css files
  • Comments wrapped in / * * / are compiled into css files

3. Variables

Use @ to declare a variable

  1. Use as the value of common attribute: directly use * * @ XXX**
  2. As a normal selector, use the form of: * * #@{selector's value} * *
  3. As URL: @ {URL}
  4. Delayed loading of variables (there is the concept of block level scope, which can be executed and searched for @ variables after the code in the block is loaded)
@color:pink;
@m:margin;     //Define attribute name
@selector:.box;   //Define selector variables
*{
    @{m}:0;
    padding:0;
}
@{selector}{
    width:100px;
    background:@olor;
}

After compilation:

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100px;
  background: pink;
}

About delayed loading of variables:

@var:0;
.class{
    @var:1;
    .brass{
        @var:2;
        three: @var;  //3. 3 will be output here
        @var:3;
    }
    one: @var;
}
//It is assumed that three and one are attributes

4. Nesting

  1. Basic nesting rules
  2. &Use of: & represents only its parent

Basic nesting:

#father {
    color:white;
    .son1{
        font-size:10px;
    }
    .son2{
        background:black;
    }
}

Convert to css:

#father {
  color: white;
}
#father .son1 {
  font-size: 10px;
}
#father .son2 {
  background: black;
}

&Use

#father {
    color:white;
    .son{
        font-size:10px;
        &:hover{   //Here & denotes its abdominal muscles
            font-size:20px;
        }
    }
}

After compilation:

#father {
  color: white;
}
#father .son {
  font-size: 10px;
}
#father .son:hover {
  font-size: 20px;
}

5. Mixed Mixins

Similar to a function, but not a function

Mixing is a way to introduce a series of attributes from one rule set to another

  1. Ordinary mixing
  2. Mixing without output
  3. Mixing with parameters
  4. Blend with parameters and default values
  5. Mixing with multiple parameters
  6. Named parameters
  7. Matching pattern
  8. arguments variable

(1) Common mix:

It will be compiled into native CSS

.thismixin{
    font-size:20px;
}
.father{
    color:white;
    .thismixin();  //Use parentheses or no parentheses, but parentheses are recommended
}

After compilation:

.thismixin {
  font-size: 20px;
}
.father {
  color: white;
  font-size: 20px;
}

(2) Mixing without output

We don't want the mixed attribute defined by us to appear in css. We can add parentheses to it when defining it.

.seemixin{
    color:white;
}
//Mixing without output
.nomixin(){
    width:10px;
    height:10px;
}
.father{
    font-size:10px;
    .seemixin();
    .nomixin();
}

After compilation:

.seemixin {
  color: white;
}     /*The mix without output is gone*/
.father {
  font-size: 10px;
  color: white;
  width: 10px;
  height: 10px;
}

(3) Mixing with parameters

Multiple parameters or one parameter:

.mixins1(@col){
    color:@col;
}
.mixins2(@col,@size){
    background-color:@col;
    font-size:@size;
}
.son{
    .mixins1(red);
    .mixins2(blue,20px);
}

After compilation:

.son {
  color: red;
  background-color: blue;
  font-size: 20px;
}

(4) Blend with parameter defaults

.mixins2(@col:red,@size:10px){
    background-color:@col;
    font-size:@size;
}
.son{
    .mixins2();
}

After compilation:

.son {
  background-color: red;
  font-size: 10px;
}

(5) Mixing with multiple parameters

It is legal to define multiple mixins with the same name and number of parameters. Less will use all attributes that can be applied. If you use mixin with one parameter, such as. mixin(green);, Then all properties of mixin with a mandatory parameter will be used

.mixin(@color) {
    color-1: @color;
}
.mixin(@color; @padding: 2) {
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.some .selector div {
    .mixin(#008000);
}

After compilation:

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

(6) Named parameters

mixin references can provide parameter values by name, not just location. Any parameter can be referenced by its name, and they do not have to be arranged in any special order

Take the name of the parameter and assign the value regardless of the order.

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);  // Take the name of the parameter and assign the value, regardless of the order
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

After compilation:

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

(7) Pattern matching

You want to change the behavior of mixin according to the parameters passed to him.

In this example, we want to pass a parameter to determine whether the operation is lightening or darkening.

  • The first two mixin s extract different parts to simplify the code
  • Back@_ Yes, any value can match
  • These three must be a mixture of the same name
//The following two equivalent modes
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
//The above two are equivalent to this mode
//The public part is extracted below
.mixin(@_; @color) {
  display: block;
}
.my{
    .mixin(light,green);  //Pattern matching
}

After compilation:

.my {
  color: #00b300;  /* Green*/
  display: block;
}

(8) arguments variable

It contains all the parameters passed when calling mixin. If you are lazy, just write the arguments parameter directly

.mixin(@x,@y,@blur,@color){
    box-shadow:@arguments;  //Lazy operation
}
.box{
    .mixin(10px,10px,1px,blue);
}

After compilation:

.box {
  box-shadow: 10px 10px 1px blue;
}

6. Operation

Arithmetic operators +, -, *, / can operate on any number, color, or variable. If possible, arithmetic operators convert units before adding, subtracting, or comparing. The calculation result is based on the unit type of the leftmost operand. If the unit conversion is invalid or meaningless, the unit is ignored. Invalid unit conversion, such as px to cm or rad to%.

// All operands are converted to the same unit
@conversion-1: 5cm + 10mm; // The result is 6cm
@conversion-2: 2 - 3cm - 5mm; // The result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // The result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // The result is 10%
@other: @base + @filler; // The result is 15%

About calc()

For compatibility with CSS, calc() does not evaluate mathematical expressions, but evaluates variables and mathematical formulas in nested functions.

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // The result is calc(50% + (25vh - 20px))

7. Mapping

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

After compilation;

.button {
  color: blue;
  border: 1px solid green;
}

8. @import rules

In less, the @ import rule can be anywhere

.foo {
  background: #900;
}
@import "hhh.less";

The value of the mathematical formula.

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // The result is calc(50% + (25vh - 20px))

7. Mapping

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

After compilation;

.button {
  color: blue;
  border: 1px solid green;
}

8. @import rules

In less, the @ import rule can be anywhere

.foo {
  background: #900;
}
@import "hhh.less";

Tags: less css

Posted on Sun, 05 Dec 2021 09:42:31 -0500 by PHPcadet