LESS is a Leaner Style Sheets, a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Mixins: Mixins in LESS, along with understanding their implementation and usage through the example. A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset and facilitates reducing the overall complexity of CSS code. LESS is a CSS preprocessor that is a CSS backward-compatible language extension. Mixins in LESS, are a way to include a bunch of CSS properties from one ruleset to another i.e multiple times in the same file.
Aliasing Mixins: In aliasing mixins, Assigning mixin calls to a variable. And mixins can be assigned to a variable to be called a variable call or and also can be used for map lookup.
- @alias();
Parameter: Entire mixin can be called a variable call.
Syntax:
#alias.dark.mixin { .colors(...) { ... } }
Example 1: The following examples, demonstrates the use of aliasing mixins.
<!doctype html> < head >
< title >Mixin Guards</ title >
< link rel = "stylesheet"
href = "style.css"
type = "text/css" />
</ head >
< body class = "mixin" >< br >< br >
< h1 >< b >GeeksforGeeks</ b ></ h1 >
< h3 >Learning Less.js Mixins Aliasing Mixins ...</ h3 >
</ body >
</ html >
|
style.less: Create less file to use the aliasing mixins.
#alias.dark.mixin { .colors(light) {
primary: red ;
}
.colors(dark) {
primary: green ;
secondary: blue ;
}
} .mixin { @colors: #alias.dark.mixin.colors(dark);
color : @colors[primary];
background : black ;
border : 4px solid @colors[secondary];
text-align : center ;
} h 3 {
color : white ;
} |
Now, to compile the above LESS code to CSS code, run the following command:
less style.less style.css
The compiled CSS file comes to be:
style.css
.mixin { color : green ;
background : black ;
border : 4px solid blue ;
text-align : center ;
} h 3 {
color : white ;
} |
Output:
Example 2: The following examples, demonstrates the use of aliasing mixins in less.
<!doctype html> < head >
< title >Mixin Guards</ title >
< link rel = "stylesheet"
href = "style.css"
type = "text/css" />
</ head >
< body class = "style" >< br >< br >
< h1 >< b >GeeksforGeeks</ b ></ h1 >
< h3 >Learning Less.js Mixins Aliasing Mixins ...</ h3 >
</ body >
</ html >
|
style.less: Create the less file to use the aliasing mixins.
#Variables() { .mixin() {
color : green ;
background : black ;
font-size : x-large ;
text-align : center ;
}
} h 3 {
color : white ;
} .style { @alias: #Variables.mixin();
@alias();
} |
Now, to compile the above LESS code to CSS code, run the following command:
less style.less style.css
The compiled CSS file comes to be:
style.css
h 3 {
color : white ;
} .style { color : green ;
background : black ;
font-size : x-large ;
text-align : center ;
} |
Output:
Reference: https://lesscss.org/features/#mixins-feature-mixin-aliasing-feature