Less.js Mixins Mixin Guards
Last Updated :
16 Oct, 2022
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 in less: Mixins in LESS, along with understanding their implementation & usage through the example. A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset & 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.
Mixin Guards: If you want to match simple values or a number of arguments on expressions, then you can use guards. It is associated with a mixin declaration and includes a condition that is attached to a mixin. Each mixin will have one or more guards which are separated by a comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin.
Different types of mixin guards:
- Guard Comparison Operators
Parameter: You can use the comparison operator (=) to compare numbers, strings, identifiers, etc. There are some comparison operators usable in guards: >, >=, =, =<. Additionally, the keyword true is the only truthy value, making these two mixins equivalent.
Parameter: You can use keywords to work around logical operators with guards.
- Type Checking Functions: It contains the built-in functions to determine the value types for matching mixins.
Mixin guards:
Syntax:
.p-style(@size) when (@size<=50){
font-size: @size;
color:green;
}
Example 1: The following example, demonstrates the use of mixin guards.
HTML
<!doctype html>
< head >
< title >Mixin Guards</ title >
< link rel = "stylesheet" href = "style.css"
type = "text/css" />
</ head >
< body >< br >< br >
< h1 >< b >GeeksforGeeks</ b ></ h1 >
< h2 >Learning Mixin Guards...</ h2 >
</ body >
</ html >
|
style.less: Create a less file.
CSS
.p-style(@size) when (@size<= 50 ){
font-size : @size;
color : green ;
}
.p-style(@size) when (@size> 50 ){
font-size : @size;
color : blue ;
}
h 1 {
.p-style( 40px );
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css
CSS
h 1 {
font-size : 40px ;
color : green ;
}
|
Output:
Example 2: The following example demonstrates the use of mixin guards.
HTML
<!doctype html>
< head >
< title >Mixin Guards</ title >
< link rel = "stylesheet" href = "style.css"
type = "text/css" />
</ head >
< body >
< h1 class = "cont1" >GeeksforGeeks</ h1 >
< h3 class = "cont2" >Learning Mixin Guards...</ h3 >
</ body >
</ html >
|
style.less: Creates the less file
CSS
.One (@primary) when (lightness(@primary) >= 50% ) {
font-size : 50px ;
}
.One (@primary) when (lightness(@primary) < 50% ) {
font-size : 40px ;
}
.One (@primary) {
color : @primary;
}
.cont 1 {
text-align : center ;
.One( green )
}
.cont 2 {
text-align : center ;
.One( black )
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css
CSS
.cont 1 {
text-align : center ;
font-size : 40px ;
color : green ;
}
.cont 2 {
text-align : center ;
font-size : 40px ;
color : black ;
}
|
Output:
Reference: https://lesscss.org/features/#mixins-feature-mixin-guards-feature
Share your thoughts in the comments
Please Login to comment...