Using variable name to control selector names

The variable in LESS preprocessor can be use to set in CSS code name or group of names of selectors. If you use the name of variable in LESS is the same as use one or list of the selectors.
This topic explains example below. First look at the LESS file:

@niceSelectorNames : p, h3 ;

@{niceSelectorNames} {
    color: #22aaaa;
    font-style: italic;
}

The 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>Pets</h3>
        <div><p>Dogs</p></div>
        <div><p>Hamsters</p></div>
        <p>and others animals</p>
    </body>
</html>

After run application you see:

In next post you find out about others using variable in LESS.

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.