Less.js Mixins Aliasing Mixins
Last Updated :
16 Feb, 2023
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.
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.
HTML
<!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.
CSS
#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
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.
HTML
<!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.
CSS
#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
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...