Question

我似乎无法使用LESS CSS的isurl方法。

如果我将“http://www.google.com”传递给mixin，则isurl不会评估为true。
如果我传入http://www.google.com（不带引号），则无法编译。
我的数字卫士按照我的期望工作。

制作以下简单的测试工具。文字是蓝色的。

<!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>

Answer 1

url的类型检查功能似乎只是检查您是否明确说明它是CSS url类型。换句话说，这会使其评估为true：

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

它不会检查您传递的内容实际上是否是有效的url路径，即使它是有效的url语法也是如此。

更新：测试空字符串

您提到需要测试空字符串。你可以用javascript做到这一点。对于上面给出的代码，情况类似：

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

你如何使用LESS CSS isurl guard？

1 个答案: