Less.js Mixins Aliasing Mixins
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.
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 >w3wiki</ 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 >w3wiki</ 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
Contact Us