What is Less.js Mixins Using Mixins as Functions?

In this article, we will learn Less.js Mixins Using Mixins as Functions,This free LESS tutorial for complete beginners will help you learn LESS from scratch.

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.

Using Mixins as Functions: In this article, you will see the importance of Mixins functions. So Mixins consist of variables; these can be used in the caller’s scope and are visible. Mixins are similar to functions and the variables that are defined in a mixin will behave as the return values. Whenever a mixin is defined inside another mixin, it can be used as a return value too.

Parameter: Functions are the block of statements that return the specific task.

Let us see some examples of Less.js Mixins Using Mixins as a function.

Syntax:

.average(@x, @y) {
    @result: ((@x * @y));
}

Example 1: The following example, demonstrates the use of less.js mixins using functions.

HTML

<!DOCTYPE html>  
<head>  
    <link rel="stylesheet"
          href="style.css" type="text/css" />  
</head>  
<body> 
    <div>
        <h1>w3wiki</h1>  
        <h2><b>Less.js Mixins using mixin as a functions</b></h2>    
    </div>
</body>  
</html>

style.less: Create the less file.

CSS

.average(@x, @y) {
    @result: ((@x * @y));
}
.average1 (@a, @b) {
    @result: ((@a + @b));
}
.average2 (@a, @b) {
    @result: ((@a * @b));
}
h2 {
    // call a mixin and look up its "@result" value
    Width: .average1(150px,150px)[@result];
    height: .average1(34px, 45)[@result];
    border: .average2(2px, 3px)[@result] dashed blue;
}
h1
{
    color:green;
}

Syntax: To compile the less file to a CSS file, write the following command.

less style.less style.css

Execute the above command, it will create the “style.css” file automatically with the following code.

style.css:

CSS

h2
{
    Width: 300px;
    height: 79px;
    border: 6px dashed blue;
}
h1
{
     color: green;
}

Output:

Example 2: The following example demonstrates the use of less.js mixin using as a function.

HTML

<!doctype html>
<head>
     <title>Mixins function</title>
     <link rel="stylesheet" href="style.css"
           type="text/css" />
</head>
 
<body><br><br>
    <div>
           <h1 class="caller"><b>w3wiki</b></h1>
            <h3><b>Learning Mixins as functions...</b></h3>
    </div>
</body>
</html>

style.less: Creates the less file.

CSS

.function() {
    @color:green;  
    @text-size: 60px;
    @text-color:black;
}
   
.caller {
    .function();
    color:  @color;
    font-size: @text-size;
    text-align: center;
}
h3
{
    .function();
    color: @text-color;
    text-align: center;
}

Syntax: To compile the less file to a CSS file, write the following command.

less style.less style.css

Execute the above command, it will create the “style.css” file automatically with the following code.

style.css

CSS

.caller {
    color: green;
      font-size: 60px;
      text-align: center;
}
h3
{
      color: black;
      text-align: center;
}

Output:

Reference: https://lesscss.org/features/#mixins-feature-mixins-as-functions-feature