Open In App

Less.js Mixins Using Mixins as Functions

Improve
Improve
Like Article
Like
Save
Share
Report

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>GeeksforGeeks</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>GeeksforGeeks</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



Last Updated : 30 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads