如何使用LESS CSS isurl守衛？

我似乎無法得到LESS CSS的isurl方法。如何使用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>

來源

2013-03-13 blak3r

看來，爲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-13 02:23:36 ScottS

謝謝，你絕對正確。注意：.testIsUrl（url（））;也將返回true。呃，需要一種方法來測試一個字符串是否爲空。 – blak3r 2013-03-13 16:34:55

@ blak3r：我添加了測試空字符串的信息。也許這會幫助你。 – ScottS 2013-03-13 17:19:24

這真棒，不知道你可以混合使用JavaScript！ – blak3r 2013-03-13 19:21:11

如何使用LESS CSS isurl守衛？

回答

相關問題