Using LESS variable name to control property names

Variable in LESS allows you indicate for name of property in CSS. How it looks like, see in the example.
The LESS code:

@myProperty : color;

p {
    @{myProperty}: blue;
    background-@{myProperty}: lightBlue;
}

The variable can asign value as name of the property. You may  place this property into  less code. We insert t in P selector rules. This value is placed by @ sign with curly bracets within name of variable.

Look at 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>

Result:

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.