Using LESS variable to control class name or id name in CSS file

The LESS preprocesor allows you also control class name in CSS or id name in CSS. The example below explains you this issue.
See LESS code:

@niceClassName : nice;
@my-id : myid;

.@{niceClassName} {
    color: tomato;
    font-style: italic;
}

#@{my-id} {
    color:rgb(106, 90, 205);   
}

In this case the variable @niceClassName has value nice, which is the name of the class in CSS. In this LESS file you can call name this class by name of variable. If it is class you first set dot and @ sign. After them set curly brackets with name of variable and rules for this class. Similar to the class, name of  identifier in CSS is assigned in the same way, but instead dot is setted # sign.

And 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>
        <h3 class='nice'>Pets</h3>
        <div><p>Dogs</p></div>
        <div><p class='nice'>Hamsters</p></div>
        <p id="myid">and others animals</p>
    </body>
</html>

Look at the result:

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.