Question

我将LESS与Compass（Sass）的功能进行比较

要在Compass中创建跨浏览器透明背景，我们可以使用此方法http://aaronrussell.co.uk/legacy/cross-browser-rgba-support/，它也可以生成透明图像以及rgba代码。

compass-rgbapng plugin用于提供跨浏览器兼容的RGBA 通过为浏览器动态创建透明PNG来支持不支持RGBA。使用纯Ruby ChunkyPNG库来解决麻烦免费安装和部署。

sudo gem install compass-rgbapng

require "rgbapng"

@import "rgbapng";


background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

LESS可以做同样的事情吗？我想不是因为LESS基于JavaScript而且JavaScript不像ruby那样强大。我是对的吗？

Answer 1

简答：不。

答案很长：不仅仅是LESS库。

您可以将服务器端插件与LESS脚本结合使用。您可以创建一个生成CSS样式的LESS类：

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

我不确定该库是如何工作的，但我能看到的唯一重要部分是PNG的名称是RGBA值的十六进制编码。就是这样，我制作了一个LESS脚本，允许使用该URL模式来利用服务器端图像构建器：

@compass-url: '/images/rgbapng/'; 

.rgba-background(@r, @g, @b, @a) {
    @date-nocache: `new Date().getTime().toString()`;
    @colorInt: floor(@a * 255) + 256 * (@b + (256 * (@g + 256 * @r)));
    @colorHex: `(parseInt("@{colorInt}") + Math.pow(256,4)).toString(16).slice(1,9)`;

    background: "@{compass-url}@{colorHex}.png?@{date-nocache}";
    background: rgba(@r, @g, @b, @a);
}

此脚本在LESS中创建类/函数rgba-background，允许您像下列这样对LESS类进行旋转：

.yourClass {
    .rgba-background(0,0,0,0.75);
}

如果您打算在多个脚本中使用此脚本，则建议将其解压缩到另一个文件，并在任何您想要使用它的地方使用@import指令。

如果生成的网址比我想象的更复杂，请提供一些有关如何构建该网址的其他信息，以便我们看看是否可以使用LESS解决此问题。

可以生成像Compass（Sass）这样的图像吗？

1 个答案: