1

我似乎无法让 LESS CSS 的 isurl 方法工作。

  • 如果我将“ http://www.google.com ”传递给 mixin，则 isurl 不会评估为 true。
  • 如果我传入http://www.google.com（不带引号），那么它不会编译。
  • 我的 isnumber 警卫按我的预期工作。

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

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

1 回答 1

2

似乎类型检查功能url只是检查您是否明确将其声明为 CSSurl类型。换句话说，这使得它评估为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; }
于 2013-03-13T02:23:36.570 回答