Less CSS - SPLessons

Chapter 20

Less Guards

Less Guards

This chapter explains about Less Guards and Less CSS Guards.

The expressions can be matched using Guards. Following are the two types of Guards in Less.

Mixin Guards

Mixin Guards are the conditional statements of Less. Mixins can be used in conjunction with guards for constructing a conditional block.

The conditional execution has been opted in Less through guarded mixins instead of if/else statements in the mode of @media query features.

Below snippet code demonstrates the main scheme.

.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}

Here, the keyword when introduces a guard sequence and runs the below code.

.class1 { .mixin(#fff) }
.class2 { .mixin(#444) }

By compiling the above code, it automatically generates the following code.

.class1 {
background-color: black;
color: #fff;
}
.class2 {
background-color: white;
color: #444;
}

The following are the different types of Less mixin guards.

Guard Comparison Operators

The comparison operators used in guards are.

  • >
  • >=
  • =
  • =<
  • <

The key word true is used additionally as such any value other than the keyword true is false.

.truth (@a) when (@a) {…..}
.truth (@a) when (@a = true) {…..}
.class{
.truth(60); // will not match any of the above definitions.
}

Guard Logical Operators

The logical operators can be used in guards, and syntax is based on CSS media queries.

The keyword and is used to combine the guards.

.mixin (@a) when (isnumber (@a)) and (@a > 0) {…..}

The operator or is used to emulate and are separated by comma (,).

.mixin (@a) when (@a > 30), (@a < -30) {......}

The keyword not is used to negate conditions.

.mixin (@b) when not (@b >0) {……}

Type Checking Functions

is function is used to match mixins based on value type.

.mixin (@a; @b: 0) when (isnumber (@b)) {…..}
.mixin (@a; @b: white) when (iscolor(@b)) {…..}

Following are the type checking functions.


Use the following functions to check the specific unit value.

Conditional Mixins

A mixin match depends on other mixing matches. By using the default function, one can create a conditional mixins, that are similar to else or default statements.

.mixin (@a) when (@a >0) {…..}
.mixin (@a) when (default()) {…..} // matches only if first mixin does not, i.e. when @a <=0

Example on Mixin Guards

Below example explains the use of Less Mixin guards.
The below conceptual diagram represents the overall view of the example like creating .html and .less files in node js folder and compiling .less to .css.

Create a simple HTML file in the Nodejs folder as shown below.

Less_mixins_guards.html

<html>
<head>
<title>Mixin Guards</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>Welcome to SPLessons</h1>
<p class="class1">Mixin Guards</p>
<p class="class2">Guards are useful when one want to match on expressions.</p>
</body>
</html>


Create LESS file in the same Nodejs folder as shown below.

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 25px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 15px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#5858FA)
}
.class2 {
.mixin(#A4A)
}
body {
text-align: center;
background: rgb(244, 244, 244);
font-family: 'Lato';
}

Compile the above less file in command prompt using the following command.

lessc style.less style.css

By compiling the above less file, it automatically generates the following CSS code.

style.css

.class1 {
font-size: 25px;
color: #5858fa;
}
.class2 {
font-size: 15px;
color: #aa44aa;
}
body {
text-align: center;
background: #f4f4f4;
font-family: 'Lato';
}

After making all the required changes, run the html file in a browser to get the following output.

CSS Guards

The simple values or number of arguments are matched using Guards. The guards are applied to css selectors for declaring the mixins and for calling it immediately.

The below snippet code demonstrates the main scheme of using CSS Guards.

.my-optional-style() when (@my-option = true) {
button {
color: black;
}
}
.my-optional-style();

Now, directly apply guard to a style.

button when (@my-option = true) {
color: black;
}

Use if type statement along with & operator to group multiple guards as shown below.

& when (@my-option = true) {
button {
color: black;
}
a {
color: red;
}
}

Example on CSS Guards

Below example explains the use of CSS Guards in Less.
The below conceptual diagram represents the overall view of the below example like creating .html and .less files in node js folder and compiling .less to .css.
Create a simple HTML file in the Nodejs folder as shown below.

Less_css_guards.html

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="cont">
<h2>Less Tutorials</h2>
</div>
<div class="style">
<h3>Less Guards are awesome.</h3>
</div>
</body>
</html>

Create a LESS file in the same Nodejs folder as shown below.

style.less

@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope=global) {
background-color: red;
color: black;
}
.style when (@usedScope=mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
body {
text-align: center;
background: rgb(244, 244, 244);
font-family: 'Lato';
}

Compile the above less file in command prompt using the command

lessc style.less style.css

By compiling the above code it automatically generates the following CSS code.

style.css

.style {
background-color: blue;
color: white;
}
body {
text-align: center;
background: #f4f4f4;
font-family: 'Lato';
}

After making all the required changes, run the html file in a browser to get the following output.

Summary

  • Less guards are mandatory for constructing a conditional block in less.
  • Less guards can be declared and called immediately with the help of CSS guards in less.

  • Make sure that both the HTML and LESS files are created in the same node js folder.
  • Check all the required changes in the coding before running the application.