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は、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; }
于 2013-03-13T02:23:36.570 に答える