Может ли LESS генерировать такие изображения, как Compass (Sass)? - PullRequest
Новая
       33

Может ли LESS генерировать такие изображения, как Compass (Sass)?

0 голосов
/ 04 марта 2012

Я сравниваю возможности LESS с Compass (Sass)

Чтобы сделать кросс-браузерный прозрачный фон в Compass, мы можем использовать этот метод http://aaronrussell.co.uk/legacy/cross-browser-rgba-support/, который может генерировать прозрачное изображение вместе с кодом rgba.

плагин compass-rgbapng для обеспечения кросс-браузерной совместимости 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. Я прав?

1 Ответ

1 голос
/ 04 марта 2012

Краткий ответ: нет.

Длинный ответ: не только с библиотекой LESS.

Вы можете комбинировать плагин на стороне сервера со сценарием LESS.Вы можете создать класс LESS, который генерирует стиль CSS: 

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);
}

Этот сценарий создает класс / функцию rgba-background в LESS,позволяя вам аннотировать ваш класс LESS, например: 

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

Если вы планируете использовать это для нескольких меньших сценариев, было бы целесообразно извлечь его в другой файл и использовать директиву @import там, где вы хотитеиспользуйте его.

Если созданный URL-адрес является более сложным, чем я думал, пожалуйста, предоставьте некоторую дополнительную информацию о том, как создать этот URL-адрес, чтобы мы могли увидеть, можно ли решить эту проблему с помощью LESS.

...