2012-02-21 52 views
1

所以我使用IE特定的過濾器,要求顏色爲6個字符的長形式。但是我有一千行樣式表,裏面充滿了使用3個字符的簡短形式對我的函數的調用。所以我希望可以從函數內部的短格式轉換爲長格式。任何內置或自定義函數都可以。我的功能看起來是這樣的:我可以在觸控筆中將短格式顏色(#123)轉換爲長格式(#112233)嗎?

td_gradient(color1, color2) 
    background-color (color1 + (color2 - color1)/2) 
    background -webkit-gradient(linear, 0% 0%, 0% 100%, from(color1), to(color2)) 
    background -webkit-linear-gradient(top, color1, color2) 
    background -moz-linear-gradient(top, color1, color2) 
    background -ms-linear-gradient(top, color1, color2) 
    background -o-linear-gradient(top, color1, color2) 
    filter s("progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr='%s', EndColorstr='%s')", color1, color2) 

輸入顏色看起來像#333#123,但微軟過濾功能需要#333333#112233。有沒有什麼辦法可以在我的樣式表中不編輯每個實例或顏色來滿足它?

回答

4

查看手寫筆源代碼,在lib/nodes/rgba.js中,有以下方法:RGBA.prototype.toString。線268上,我們發現:

if (r[0] == r[1] && g[0] == g[1] && b[0] == b[1]) { 
    return '#' + r[0] + g[0] + b[0]; 
} else { 
    return '#' + r + g + b; 
} 

我嘗試過建立一個功能你,但我似乎無法得到的顏色回爲一個字符串,做字符串操作。所以最簡單的方法可能是修補RGBA.prototype並刪除這個縮短。

UPDATE:好,這裏是一個功能你:

module.exports = function() { 
    var hex = function(n) { return n.toString(16) }; 

    return function(style) { 
     style.define('longColor', function(color) { 
      return '#' + [color.r, color.g, color.b].map(hex).join(""); 
     }); 
    } 
}; 

如果你把它放在一個文件color.js,你可以用stylus -u ./color.js,或觸控筆與use的JavaScript API使用它。手寫筆的使用:

td 
    color longColor(#333) 
+0

這可能是實現這一點的最佳方式,但我最終會通過我的CSS和改變#333所有實例#343434等 – Hubro 2012-03-06 11:42:53

+1

什麼像'(color.r < <16 | color.g << 8 | color.b).toString(16)'? – alex 2012-11-29 05:38:22

+0

這真的很有幫助,但不完全適合我需要的東西。它刪除了任何前導零,並將任何雙零轉換爲單個0.因爲我需要一些舊的IE過濾器的全六位十六進制顏色,所以我不得不稍微改變這一點。 [https://gist.github.com/FranciscoG/b9d4ad3bcd1ccab168d7](https://gist.github.com/FranciscoG/b9d4ad3bcd1ccab168d7) – Francisc0 2014-07-28 17:45:42