Introduction to the features of Less

Less is a CSS preprocessor that extends the functionality of CSS by providing features like variables, nesting, mixins, operations, and more, making CSS code easier to maintain and extend. Below is a detailed introduction to the core features of Less.

Variables

Less allows the use of variables to store values such as colors, fonts, and dimensions, making it easier to manage and modify them uniformly. Variables are defined with an @ prefix and can be reused throughout the stylesheet.

@primary-color: #428bca;
@font-size: 14px;

.header {
  color: @primary-color;
  font-size: @font-size;
}

Compiled CSS:

.header {
  color: #428bca;
  font-size: 14px;
}

Variables also support operations:

@base-padding: 10px;
@double-padding: @base-padding * 2;

.box {
  padding: @double-padding;
}

Nesting

Less supports nested rules, allowing for clearer expression of hierarchical relationships and reducing repetitive code.

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    &:hover {
      color: red;
    }
  }
}

Compiled CSS:

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
}
.nav a:hover {
  color: red;
}

Mixins

Mixins allow you to include a set of properties from one ruleset into another, similar to functions.

.bordered {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
}

.menu {
  color: #333;
  .bordered();
}

Compiled CSS:

.bordered {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
}
.menu {
  color: #333;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
}

Mixins can also take parameters:

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

.button {
  .rounded-corners();
}

.card {
  .rounded-corners(10px);
}

Operations

Less supports arithmetic operations like addition, subtraction, multiplication, and division, which can be applied to numbers, colors, and variables.

@base-width: 100px;
@padding: 20px;

.container {
  width: @base-width + @padding;
  height: (@base-width / 2) - 5;
  background-color: #888 + #111;
}

Compiled CSS:

.container {
  width: 120px;
  height: 45px;
  background-color: #999;
}

Functions

Less includes built-in functions for handling colors, strings, mathematical operations, and more.

@color: #ff0000;

.header {
  background-color: lighten(@color, 20%);
  color: darken(@color, 10%);
}

Compiled CSS:

.header {
  background-color: #ff6666;
  color: #cc0000;
}

Import

Less supports file imports, allowing styles to be split into multiple files for modular management.

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

Conditions and Loops

Less supports conditional statements and loops, enabling the generation of different styles based on conditions.

@theme: dark;

.theme-style() when (@theme = dark) {
  background-color: #333;
  color: #fff;
}

.theme-style() when (@theme = light) {
  background-color: #fff;
  color: #333;
}

body {
  .theme-style();
}

Loop example:

.generate-columns(@n, @i: 1) when (@i <= @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.generate-columns(4);

Compiled CSS:

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

Namespaces

Less supports namespaces, allowing mixins to be grouped to avoid naming conflicts.

#utilities {
  .clearfix() {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
}

.container {
  #utilities > .clearfix();
}

Scope

Scope in Less works similarly to programming languages, with variables and mixins being looked up from the inside out.

@var: red;

#page {
  @var: white;
  .header {
    color: @var; // white
  }
}

.footer {
  color: @var; // red
}

String Interpolation

Less supports string interpolation, allowing variables to be embedded into strings.

@base-url: "http://example.com";

.background {
  background-image: url("@{base-url}/images/bg.png");
}

Comments

Less supports both single-line and multi-line comments. Single-line comments are not compiled into the CSS.

// This is a single-line comment and won't appear in the CSS
/* This is a multi-line comment and will appear in the CSS */

.body {
  color: #333; // This is also a single-line comment
}