less
  1. less-syntax
PreviousNext

Syntax - (Less Basics)

In this tutorial, we'll discuss the basic syntax of Less, a CSS preprocessor. Less is a language that extends CSS with features that make it easier to write and maintain CSS code.

Syntax

Less has its own syntax, which is a superset of CSS. This means that any valid CSS is also valid Less code. Here's an example of Less code:

// Define variables
@primary-color: #007bff;
@secondary-color: #6c757d;

// Define a mixin
.border-radius(@radius: 5px) {
  border-radius: @radius;
}

// Define a class
.box {
  background-color: @primary-color;
  color: @secondary-color;
  .border-radius;
}

In this code, we define two variables (@primary-color and @secondary-color), a mixin (.border-radius), and a class (.box). The mixin sets a CSS property for a box's border radius, and the class box uses the variables and mixin to style the box.

Example

Here's an example that demonstrates how Less can be used to simplify CSS code.

// Define variables
@primary-color: #007bff;
@secondary-color: #6c757d;

// Define a mixin
.border-radius(@radius: 5px) {
  border-radius: @radius;
}

// Define a class
.box {
  background-color: @primary-color;
  color: @secondary-color;
  .border-radius;
}

// Use the class
.main-container {
  .box;
  width: 100%;
  height: 100vh;
}

This code defines a .box class and sets its background color to @primary-color and its text color to @secondary-color. The .border-radius mixin is used to set the box's border radius. The .main-container class applies the .box class, sets its width to 100%, and sets its height to 100vh.

Explanation

In Less, the @ symbol is used to indicate a variable. Mixins are defined with .name() syntax, and classes are defined with .class-name syntax. Less also supports nested rules, which allows for more concise and readable code.

Use

Less can be used to simplify and maintain CSS code by allowing the use of variables, mixins, nested rules, and other advanced features.

Important Points

  • Less is a superset of CSS, which means that any valid CSS is also valid Less code.
  • Less code is compiled into CSS, which can be used in web pages like any other CSS code.
  • Less can be used to simplify CSS code by using variables, mixins, and nested rules to eliminate repetition and duplication.
  • Less can improve code maintainability by making it easier to add, remove, and change CSS styles.

Summary

In this tutorial, we discussed the basic syntax of Less, a CSS preprocessor. We covered an example of Less code, the explanation of Less syntax, how Less can be used, and the important points of Less. With this knowledge, you can now start using Less to write and maintain cleaner and more efficient CSS code.

CommentsVariables
Published on: