LESS 可以生成像 Compass (Sass) 这样的图像吗？答案

【问题标题】：Can LESS generate images like Compass (Sass)?LESS 可以生成像 Compass (Sass) 这样的图像吗？
【发布时间】：2012-03-22 01:29:51
【问题描述】：

我正在比较 LESS 和 Compass(Sass) 的功能

我们可以使用http://aaronrussell.co.uk/legacy/cross-browser-rgba-support/这个方法在Compass中制作跨浏览器透明背景，它也可以与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。我说的对吗？

【问题讨论】：

JavaScript 的能力不如 ruby 我一点也不同意。更重要的是，LESS/JS 中是否已经存在与您提到的 SASS/Ruby 类似的工具。
@AlexWayne - 它使用纯 Ruby ChunkyPNG 库
在这里吹毛求疵，但 JavaScript 是一种图灵完备的语言，所以说它没有能力是不诚实的。据我所知，JavaScript 的浏览器实现无法生成图像，但您可以使用 NodeJs 等服务器端实现来生成图像。
其实可以用纯JS生成图片。 您只需要一项微小的浏览器功能，即数据 URL。文件只是具有定义结构的字节数组，使用 Javascript，您可以使用二进制字符串来构建您想要的任何类型的结构。唯一的问题是，您无法从 Javascript 生成文件引用，除非使用数据 URL。问题是要确保在所有目标 IE 版本上都支持 Data URL，而事实上这个解决方案有点可怕，因为它引入了很多开销来使一个花哨的纯色透明背景。

标签： javascript rubygems sass less compass-sass

【解决方案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);
}

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

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

【讨论】：