This is the 7th day of my participation in Gwen Challenge

CSS extension language Less

An overview of

Less (short for Leaner Style Sheets) is a backward-compatible CSS extension language.

Because Less is so much like CSS, it’s easy to learn. And Less adds only a few handy extensions to the CSS language, which is one of the reasons Less is so easy to learn.

The installation

Install via NPM

npm install less -g
Copy the code

The -g parameter indicates that the Lessc command is installed in the global environment. For a particular VERSION (or tag), you can add @version after the package name, such as NPM install [email protected] -g.

Variables

@width: 10px;
@height: @width + 10px;

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

Compile as follows:

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

Mixins

A Mixin is a method of including (or mixing) a set of attributes from one rule set into another. Suppose we define a class as follows:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
Copy the code

What if we want to use these attributes in other rule sets? No problem, we just need to enter the class name of the desired attribute as follows:

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
Copy the code

Properties contained in the.bordered class would appear in both #menu A and.post A. (Note that you can also use #ids as mixins.)

Nesting

Less provides the ability to use nesting instead of or in combination with nesting. Suppose we have the following CSS code:

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

In Less we can write code like this:

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

Code written in Less is much cleaner and mimics the organization of HTML.

You can also use pseudo-selectors with mixins in this way. Here is a classic Clearfix trick, rewritten as a mixin (& denotes the parent of the current selector) :

.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }}Copy the code

@rules nesting and bubble @rules (such as @media or @supports) can be nested in the same way as selectors. The @ rule is placed first, and the relative order of other elements in the same rule set remains the same. It’s called bubbling.

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; }}Copy the code

Compile as follows:

.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component { width: 800px; }}Copy the code

Operations

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

// All operands are converted to the same unit @conversion-1: 5cm + 10mm; // 6cm @conversion-2: 2-3cm - 5mm; // Conversion is impossible @incompatible-units: 2 + 5px - 3cm; // example with variables @base: 5%; @filler: @base * 2; @other: @base + @filler; // The result is 15%Copy the code

Multiplication and division do not convert. Because neither of these operations makes sense in most cases, a length multiplied by a length yields a range, and CSS does not support specifying ranges. Less will operate as the number is and will specify an explicit unit type for the result of the calculation.

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

However, the color functions provided by Less are more useful.

Calc ()

To be compatible 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)); // Result calc(50% + (25vh-20px))Copy the code

Escaping (Escaping)

Escaping (Escaping) allows you to use arbitrary strings as attribute or variable values. Anything in the form of ~”anything” or ~’anything’ will be output as is, except interpolation.

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

Compile as follows:

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

Functions

Less has built-in functions for converting colors, manipulating strings, arithmetic operations, and more. These functions are described in detail in the Less function manual.

The usage of the function is very simple. Use the percentage function to convert 0.5 to 50%, increase color saturation by 5%, decrease color brightness by 25%, and increase hue value by 8.

@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

Namespaces and accessors

Sometimes, for organizational purposes or just to provide some encapsulation, you want to group mixins. You can implement this requirement more intuitively with Less. Suppose you want to put some mixins and variables under the #bundle for future reuse or distribution:

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

Now, if we want to mix the.button class into #header a, we can do this:

#header a { color: orange; #bundle.button(); // You can write it as #bundle >.button}Copy the code

Note: If you don’t want them in the output CSS, such as # bundle.tab, append () to the namespace (such as #bundle()).

Maps

Starting with Less 3.5, you can also use mixins and rulesets as maps of a set of values.

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

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

Output as expected:

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

Scope

Scopes in Less are very similar to scopes in CSS. Variables and mixins are first looked for locally, and if none are found, inherited from the “parent” scope.

@var: red;

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

As with CSS custom properties, mixins and variables do not have to be defined prior to reference. Therefore, the following Less code example is the same as the above code example:

@var: red;

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

Comments

Both block and line comments can be used:

/* block comment * style comment! */ @var: red; // This line is commented out! @var: white;Copy the code

Importing (Importing)

Imports work as you would expect. You can import a.less file and use all the variables in that file. If the imported file has the.less extension, you can omit the extension:

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