LESS CSS mixins | Learn Mixin tutorials

Mixins in LESS are reusable code and extendable.

It is like a method or function in javascript, You define a group of properties with the same name as a mixin and reuse those mixin names wherever you want to use them.

If you want to reuse multiple CSS properties such as color, font names, or any other CSS values across multiple places or files, you’ll need to copy the same code multiple times. This results in repeatable code and violates the DRY (Don’t Repeat your code) principle.

Let’s say you want to use the below styles for multiple headers in different places.

 color: red;
  font-family:"Sans Serif";
  font-weight:700;

The above style is used in three selectors in the above - header1, header2, and header3.

.header1 {
  font-size:24px;
  color: red;
  font-family:"Sans Serif";
  font-weight:700;
}
.header3 {
  font-size:20px;
  color: red;
  font-family:"Sans Serif";
  font-weight:700;
}
.header3 {
   font-size:16px;
  color: red;
  font-family:"Sans Serif"
  font-weight:700;
}

You must make three changes if you want to test or change the following things

 color: blue;
  font-family:"Robot";
  font-weight:600;

To avoid this, the LESS preprocessor introduced the Mixin feature.

Mixins allow you to declare with a group of style properties and use those

Mixin contains optional parameters with the name

mixinname[(optional parameters)]{
  //css styles with values
}

Mixin in LESS CSS example

Let’s see declare mixin.

Variables are declared and defined once, assigned the value to a variable and these can be used in multiple places or files.

variables provide reusability and maintainability for multiple modules

This enables Declare variable with value once and, reuse many times.

When you are designing styles or templates, All the variables are defined in a file, reuse this in files by import.

This provides variable values to be changed and the changes are reflected in multiple files wherever variables are being a user.

Variables in LESS are declared using the at the rate of(@) symbol.

Syntax

@variable-name: variabl-value

Variables are prefixed with the @ symbol and separated by colon with a value of the variable, the end of the line must be a semicolon(;) symbol.

The following are points to be noted for variable declaration

variable names contains hyphen(-) or underscore)(_) are interchangeable
Variable declaration and assignment must end with a semicolon
variable scope is nested only
can be used as a property names
variable values are overwritten by new values in the local scope.
variable value contains font names color codes,

Let’s see how a variable can be created.

In the below example, the color-green variable is declared and assigned with the value green.

$color-green:green;

whenever blue color is required, We can reuse the value across multiple places

p{
background: $color-blue;
}

When the LESS compiler complied with the above codes, variables are replaced with their values in CSS snippets, The output is a CSS file with the below content as follows

p {
  background: blue;
}

color variables assigned other variables

Instead of assigning values, we can also assign other variables.

$font-color:red;

$link-color:$font-color;

h2{
color: $font-color
}
a{
color: $link-color
}

Generated CSS output after compilation

h2 {
  color: red;
}

a {
  color: red;
}

multiple font values assigned to a single variable

values can be color strings or numbers but also can be assigned with multiple values

$primary-font:("Sans",'Muli');


h2{
font-family: $primary-font
}

output is

h2 {
  font-family: "Sans", "Muli";
}

interpolation with CSS properties names

variables also can be used as HTML property names using interpolation syntax #{}

Enclose the variable with parenthesis prefixed with a hash symbol

Example

$primary-font:("Sans",'Muli');

$name: wrapper;
$attribute:border;

li.#{$name}{
#{$attribute}-radius:5px;
font-family:$primary-font;
}

compiled output css is

li.wrapper {
  border-radius: 5px;
  font-family: "Sans", "Muli";
}

Arithmetic operations on numbers not on strings

Arithmetic operations like division, addition, etc can be applied to variables of number types, operations on strings are not allowed

$height:1000px;
aside{
width :$height/3; // division operator
border-radius :ceil($height/3); // functions can be used
height: (1024px/3); // division
margin-right: 10px+4px/2px; // plus operation first, next division
font-size: 12px/4px; // Plain value, No athematic operation
}

Output is

aside {
  width: 333.3333333333px;
  border-radius: 333px;
  height: 341.3333333333px;
  margin-right: 12px;
  font-size: 12px/4px;
}

LESS constants

LESS modules define the predefined variable, called constants, these variables are not changed and act as constants For example, the math module has variables called constants which are not changeable, and can only be used in multiple places.

@use "sass: math" as math;
// this will give compilation failure
math.$e: 0;

The compilation gives a failure message.

Error: Cannot modify the built-in variable.

LESS variables Scope

Scope is the usage of a variable at multiple places with limitations. It can be default or global scope. Variables are scoped in the nested level of their declaration.

Variables can be of two types

Global variable is declared with! global keyword, ie global scope
local variables are declared under block-level ie declared inside parenthesis{} over written top variable value

Default scope variable usage:

Global variables are overwritten with local variables of the same name. Example

$primary-color: green;// global variable

.h1 {
  $primary-color: blue; // local variables
  background-color: $primary-color;
}

.p {
  background-color: $primary-color;
  }


.h1 {
  background-color: blue;
}

.p {
  background-color: green;
}

Global variable scope usage:

$primary-color: green;// global variable

.h1 {
  $primary-color: blue !global; // local variables
  background-color: $primary-color;
}

.p {
  background-color: $primary-color;
  }

And output generated

.h1 {
  background-color: blue;
}

.p {
  background-color: blue;
}

Variable Advantages

Reusability
declare or update once, change in multiple places
uniform style design
clear separation of components when multiple teams are working

LESS - Mixins

Mixin in LESS CSS example

LESS constants

LESS variables Scope

Variable Advantages