CODEWITHSUNDEEP
less
blak3r
blak3r

Reputation: 16546

How do you use LESS CSS isurl guard?

I can't seem to get LESS CSS's isurl method to work.

Made the following simple test harness. Text is blue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>  
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/less" media="screen">

        .testIsUrl(@i) when (isurl(@i)) { @textColor:red; }
        .testIsUrl(@i) when not (isurl(@i)) { @textColor:blue; }
        .testIsNum(@x) when (isnumber(@x)) { @fontSize: 30pt; }
        .testIsNum(@x) when not (isnumber(@x)) { @fontSize: 10pt; }

        .testIsUrl("http://www.google.com");
        //.testIsUrl(http://www.google.com); // results in error
        .testIsNum(32); // evaluates to true in isnumber
        //.testIsNum("32"); // evaluates to false in isnumber

        .text { color: @textColor; font-size: @fontSize;}
    </style>
    <script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.0.js" type="text/javascript"></script>
</head>
<body>
        <div id="main">
            <div class="text">This text should be red if isurl is true... and big font if isnum is true</div>
        </div>
</body>
</html>

Upvotes: 1

Views: 546

Answers (1)

ScottS
ScottS

Reputation: 72271

It appears that the type check function for url is simply to check whether you are stating it explicitly to be a CSS url type. In other words, this makes it evaluate to true:

.testIsUrl(url("http://www.google.com"));

It is not checking to see if what you are passing is in fact a valid url path, nor even if it is a valid url syntax.

Update: To Test for Empty String

You mention the need to test for an empty string. You can do so with javascript. Something like so for your code given above:

.testIsUrl(@i) when ((`@{i} === '' ? 1 : 0`) = 1) { @textColor:red; }
.testIsUrl(@i) when not ((`@{i} === '' ? 1 : 0`) = 1) { @textColor:blue; }

Upvotes: 2

Related Questions