Less CSS - SPLessons

Chapter 10

Less Mixins as a Function

Less Mixins as a Function

In this chapter Less Mixins as a Function, one can learn about Less Scope, Less mixins and its uses.

Mixins can also act as functions. The defined variables and mixins are visible and can be used in caller’s scope. The variable is not copied, when the caller contains a variable with the same name, this was the only exception in mixins.

The variable present in the caller’s local scope is protected, whereas, the variable of parent scope is overridden.

Below example explains the mixin to put a border only on the top of div.
The below conceptual diagram represents the overall view about the example like creating .html and .less files in node js folder and compiling .less to .css.
Create a simple HTML file in Nodejs folder as shown below.

Mixins_functions.html

<div>
<h1>Welcome to <strong>SPLessons</strong></h1>
<h3>Less Mixins are awesome<h3>
</div>

Create a Less file in the same node js folder as shown below.

style.less

div {
.border-top-radius(125px);
background: rgb(255, 255, 255);
display: inline-block;
padding: 50px;
}
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
// Ignore, is for demo
body {
padding-top: 50px;
text-align: center;
background: rgb(244, 244, 244);
font-family: 'Lato';
}
h1 {
color: rgb(250, 88, 130);
font-weight: 300;
}
h3{
color: rgb(110, 110, 110);
font-weight: 200;
}

Compile the above Less file in command prompt using the command.

lessc style.less style.css

By compiling the Less file, it automatically generates the css file as shown below.

style.css

div {
border-top-right-radius: 125px;
border-top-left-radius: 125px;
background: #ffffff;
display: inline-block;
padding: 50px;
}
body {
padding-top: 50px;
text-align: center;
background: #f4f4f4;
font-family: 'Lato';
}
h1 {
color: #fa5882;
font-weight: 300;
}
h3 {
color: #6e6e6e;
font-weight: 200;
}

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

Summary

  • The main drawback of less mixins is: variables with same names remain same and are not copied.
  • Less mixins override parent scope variable and protect local scope variables.


  • Make sure that both the files are created in the same node js folder.
  • Check all the required changes in the code like font size, color, etc. before running the application.