Lesson 42-CSS Preprocessor Less

1. Variables:

Variables allow you to define constants in your code to avoid duplication of values.

@primary-color: #007bff;
body {
 color: @primary-color;
}

@primary-color: #007bff;
body {
 color: @primary-color;
}

After compilation:

body {
 color: #007bff;
}

body {
 color: #007bff;
}

2. Nested Rules:

Similar to the nesting of HTML tags, Less allows you to nest CSS selectors.

nav {
 ul {
   li {
     a {
       color: @primary-color;
     }
   }
 }
}

nav {
 ul {
   li {
     a {
       color: @primary-color;
     }
   }
 }
}

After compilation:

nav ul li a {
 color: #007bff;
}

nav ul li a {
 color: #007bff;
}

3. Mixins:

Mixins allow you to create reusable style blocks.

.rounded-corners(@radius: 5px) {
 border-radius: @radius;
}
.box {
 .rounded-corners();
}

.rounded-corners(@radius: 5px) {
 border-radius: @radius;
}
.box {
 .rounded-corners();
}

After compilation:

.box {
 border-radius: 5px;
}

.box {
 border-radius: 5px;
}

4. Functions:

Less has some built-in functions, such as lighten, darken, percentage, etc., which are used to operate colors and calculations.

.gradient(@color1, @color2) {
 background-image: linear-gradient(to right, @color1, @color2);
}
.sidebar {
 .gradient(#007bff, #0056b3);
}

.gradient(@color1, @color2) {
 background-image: linear-gradient(to right, @color1, @color2);
}
.sidebar {
 .gradient(#007bff, #0056b3);
}

After compilation:

.sidebar {
 background-image: linear-gradient(to right, #007bff, #0056b3);
}

.sidebar {
 background-image: linear-gradient(to right, #007bff, #0056b3);
}

5. Operators:

Less supports mathematical operations, which can be used for unit conversion or calculation.

@width: 100px;
@padding: 10%;
.container {
 width: @width - (@padding * 2);
}

@width: 100px;
@padding: 10%;
.container {
 width: @width - (@padding * 2);
}

After compilation:

.container {
 width: 80px;
}

.container {
 width: 80px;
}

6. Import:

You can import other Less files to organize your code.

   @import "variables.less";
   @import "mixins.less";

   @import "variables.less";
   @import "mixins.less";

7. Compile Less to CSS:

Use a compiler like lessc or an IDE like EasyLESS plugin for VSCode to convert Less files to CSS.

8. Parameterized Mixins with Guards:

Mixins can accept parameters and use guards to control the conditions under which styles are applied.

.button(@bgColor: #007bff, @textColor: #fff) {
 background-color: @bgColor;
 color: @textColor;

 &:hover {
   background-color: darken(@bgColor, 10%);
 }
}

.primary-button {
 .button();
}

.secondary-button {
 .button(#6c757d, #fff);
}

.button(@bgColor: #007bff, @textColor: #fff) {
 background-color: @bgColor;
 color: @textColor;

 &:hover {
   background-color: darken(@bgColor, 10%);
 }
}

.primary-button {
 .button();
}

.secondary-button {
 .button(#6c757d, #fff);
}

This code defines a customizable button. By changing the parameters passed in, you can easily create buttons of different styles.

9. Scope and inheritance:

Less supports selector inheritance, allowing a selector to inherit all the properties of another selector.

.base-class {
 padding: 10px;
 font-size: 14px;
}

.child-class {
 &:extend(.base-class);
 color: red;
}

.base-class {
 padding: 10px;
 font-size: 14px;
}

.child-class {
 &:extend(.base-class);
 color: red;
}

After compilation, .child-class will inherit all the properties of .base-class and add its own color properties.

10. Loops:

Although Less itself does not directly support loops, it is possible to simulate loop behavior and implement repetitive tasks through recursive mixins.

.loop(@n, @i: 1) when (@i <= @n) {
  .item-@{i} {
    width: (100% / @n) * @i;
  }
  .loop(@n, (@i + 1));
}
.loop(5); // Generate styles from .item-1 to .item-5

.loop(@n, @i: 1) when (@i <= @n) {
  .item-@{i} {
    width: (100% / @n) * @i;
  }
  .loop(@n, (@i + 1));
}
.loop(5); // Generate styles from .item-1 to .item-5

This code generates a series of width styles by recursively calling the mixin .loop.

11. Naming conventions and code organization:

Maintain good naming conventions and use meaningful variable and mixin names. Organize related Less code into different files, such as putting variables, mixins, base styles, and component styles in different files, and then integrate them through import statements.

12. Performance optimization:

• Avoid unnecessary nesting, because excessive nesting may make CSS selectors complicated and affect page rendering performance.
• Consider the performance impact when using pseudo-classes and element combinations, and avoid unnecessary descendant selectors.
• In a production environment, make sure to compress the output CSS file to reduce the file size.

13. Modularization and componentization:

Organize code using modularization and componentization methods, such as Atomic Design or BEM (Block Element Modifier) ​​naming methods.

.button {
  &--primary {
    background-color: @primary-color;
  }

  &--secondary {
    background-color: @secondary-color;
  }
}

.button {
  &--primary {
    background-color: @primary-color;
  }

  &--secondary {
    background-color: @secondary-color;
  }
}

This keeps styles separate, easy to reuse and maintain.

14. Avoid global variables:

Limit the scope of variables as much as possible to avoid accidental style overrides caused by global variables. If you must use global variables, make sure they have clear names and purposes.

15. Use tools and automation:

• Configure build tools (such as Gulp, Webpack, or Grunt) to automate the compilation and minification process of Less.
• Manage your source code with a version control system (such as Git) to ensure version history and collaborative work.

16. Comments and documentation:

• Add appropriate comments to explain the function and purpose of the code, especially in complex mixins and functions.
• Create a README file or document to outline your Less project structure and usage.