How work mixins with and without arguments in LESS?

In this post I explain you what is differens between mixins with and without arguments .
We start with mixins class with arguments. Look at HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Animals</title>
        <link rel="stylesheet" href="myStyle.css"  type="text/css" >
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>My favorite animals</h1>
        <div class='topBox'><p>Dogs</p></div>
        <div class='topBox'><p>Hamsters</p></div>
    </body>
</html>

And into LESS code:

@backgroundBox: #ffdd11;
.topBox (@x:500px, @y:90px )
{
 width:@x ;
 height:@y ;
 color:blue;
 background-color:@backgroundBox ;
}

As you see the mixins class topBox get two arguments: with and height. But if don’t use argument, the default values will be use. However, you can use this class only for other class or identifier in LESS file. If you directly use name of this class in HTML, it will not be work.

Look at the result:

If you would like mixins class in HTML directly,  the class in LESS file doesn’t have to get arguments. Look at the LESS code:

@backgroundBox: #ffdd11;
.topBox
{
 width:300px ;
 height:100px ;
 color:blue;
 background-color:@backgroundBox ;
}

The result:
Remember that if in LESS mixins class, you use name class with empty brackets( .topBox() ), the rules don’t do anything in HTML code like in our first example with defined arguments.

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.