Google Choice: LESS - Mixin Guards

Friday, March 3, 2017

LESS - Mixin Guards

Description

If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will be having one or more guards which are separated by comma and guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and perform calculations to specify matched mixin.

The following table describes different types of mixins guards along with description.

S.N.	Types & Description
1	Guard Comparison Operators You can use comparison operator (=) to compare numbers, strings, identifiers etc.
2	Guard Logical Operators You can use and keyword to work around logical operators with guards.
3	Type Checking Functions It contains built-in functions to determine value types for matching mixins.
4	Conditional Mixins LESS uses default function to match mixin with other mixing matches.

Example

The below example demonstrates use of mixin guards in the LESS file:

<!doctype html>
<head>
   <title>Mixin Guards</title>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <h2>Example of Mixin Guards</h2>
   <p class="class1">Hello World...</p>
   <p class="class2">Welcome to Tutorialspoint...</p>
</body>
</html>

Next, create file style.less.

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}
.mixin (@a) {
   color: @a;
}
.class1 {
   .mixin(#FF0000)
}
.class2 {
   .mixin(#555)
}

You can compile the style.less to style.css by using the following command:

lessc style.less style.css

Next execute the above command, it will create style.css file automatically with the below code:

style.css

.class1 {
  font-size: 14px;
  color: #FF0000;
}
.class2 {
  font-size: 16px;
  color: #555;
}

Output

Let's carry out the following steps to see how above code works:

Save above html code in mixin-guard.html file.
Open this HTML file in a browser, an output as below gets displayed.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews