Using LESS variable to control url

The variable in LESS is use also to control url: path or all address. Look at the LESS code:

@url-path : "images/";

h3 {
    background: url( "@{url-path}/LESS.png" );
    color:red;
}

You may assign to variable url as string. It may be all path or part of its as in our example. The value from this variable we get through use in url string sign ‘@’ and name of variable in curly brackets.
See 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:

In HTML file header level 3 has background as image: LESS.png.

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.