How use the value from second variable which the value is stored in other variable?

Sometime you would like get value from one variable, which name is stored in other variable. How do it? Look at the example with less code:

@var1 : blue;
@var2 : "var1";
h1 {
    color: @@var2;
}

First you create variable with @var1 name. As value you assign this variable name of color, that you use in CSS file. In next line you create next variable with @var2 name. To this variable you assign as string name of the first variable: var1. Notice, that you don’t use ‘@’ sign. You can use second variable to get value of color from first variable. In this case you must use two ‘@’ signs and name of the second variable. The ‘@@’ indicate that first compiler must find name of variable and from this founding variable get value to use in CSS.

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>

It returns the website:

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.