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;
}
h3 {
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;
}
h3 {
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;
}
}
h3 {
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
h3 {
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...