This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Recently learned Vue, because sometimes to write some style, decided to use the following preprocessor, so to review

To understand the use of LESS, you need to know what is a preprocessor

What’s the difference

Precompiler and post-compiler

1. Pre-processor

In simple terms, it is written according to other people’s syntax rules, and then compiled to generate standard CSS

Typical examples: Less, Sass, and cssNext plug-ins

2. Post-processor

In short, what we learned originally was CSS code,

The postprocessor will perform operations on top of our code to complement the typical example of CSS code: the AutopreFixer plug-in for auto-completing prefixes

Note:

CssNext and Autoprefixer need to work with postCss tools, postCss + plug-ins. PostCss is essentially an abstract Syntax Tree of CSS implemented in JS. Various plug-ins are created based on this Syntax Tree

Basic use of LESS

After the above introduction, we know that Less belongs to the preprocessor

Less is an extension language for CSS. It adds variables, mixins, and functions to make CSS easier to write and maintain

1. The variable

Less can use a variable, needs to be paired with @, and supports expressions

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}
Copy the code

Compiled into:

#header {
  width: 10px;
  height: 20px;
}
Copy the code

2. With Mixins

Mixins are often used to mix a common set of properties into a desired place, which needs to be used in conjunction with ()

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: # 111;
  .bordered(a); }.post a {
  color: red;
  .bordered(a); }Copy the code

Compiled into

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: # 111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
Copy the code

3. Nesting Nesting

Less writes more concise code that mimics the organization of HTML, such as in the past

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
Copy the code

Use Less

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px; }}Copy the code

In addition, within Less, & can represent the parent of the current selector

4. Operator

Less Supports the +, -, *, and/arithmetic operators and can operate on any number, color, or variable

Note that arithmetic operators perform unit conversions before adding, subtracting, or comparing. The result of the calculation is the unit type of the leftmost operand. If the unit conversion is invalid or meaningless, the units are ignored. Invalid unit conversions such as px to cm or RAD to %

// All operands are converted to the same units
@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%

// Calculate the color
@color: # 224488 / 2; // The result is #112244
background-color: # 112244 + # 111; // The result is #223355
Copy the code

In addition, multiplication and division are not converted

@base: 2cm * 3mm; // The result is 6cm
Copy the code

5. Escape Escaping

Less can be used to use any string as an attribute or variable value, provided that the format is ~”anything” or ~’anything’

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2 rem; }}Copy the code

Compiled into

@media (min-width: 768px) {
  .element {
    font-size: 1.2 rem; }}Copy the code

6. Functions provides function

Less has many built-in functions for converting colors, handling strings, arithmetic operations, and more

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base.5%);
  background-color: spin(lighten(@base.25%), 8);
}
Copy the code

This example uses the Percentage function to convert 0.5 to 50%, increases the color saturation by 5% with saturate, decreases the color brightness by 25% with lighten, and increases the hue value by 8 with Spin

7. Namespace and accessors

Sometimes you want to group mixins for organizational reasons or just to provide some encapsulation. You can achieve this requirement more intuitively with Less.

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white; }}}Copy the code

Now, if we wanted to mix the.button class into #header A, we could do this:

#header a {
  color: orange;
  #bundle.button(a);// It can also be written as #bundle >.button
}
Copy the code

Compiled into

#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

Copy the code

8. Mapping Maps

Starting with Less 3.5, mixins and rulesets can be used as maps of a set of values. In simple terms, it is like an object in JS. Property, but in the [] form

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

Copy the code

Compiled into

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

9. Scope

The concept of scope in Less is similar to JavaScript in that variables and mixins are first looked up locally and, if not found, inherited from the “parent” scope

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white}}Copy the code

And variables similar to JS have the effect of improving, for example

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
Copy the code

Annotation 10.

Less comments are the same as js comments, and can be divided into single-line comments and multi-line comments

/* block comment * style comment! * /
@var: red;

// This line is commented out!
@var: white;
Copy the code

11. The import Importing

Less also supports import syntax. If the file to be imported has the.less extension, the extension can be omitted

@import "library"; // library.less
@import "typo.css";
Copy the code

END

That’s the basic use of less

Reference: lesscss.cn