2012-03-04 4 views
0

Je compare les capacités de moins avec Compass (Sass)Peut MOINS générer des images comme Compass (Sass)?

Pour faire fond transparent croix navigateur Compass, nous pouvons utiliser cette méthode http://aaronrussell.co.uk/legacy/cross-browser-rgba-support/ qui peut générer l'image transparente aussi avec le code rgba.

compass-rgbapng plugin pour fournir RGBA cross-browser compatible support en créant PNGs transparents à la volée pour les navigateurs qui ne prennent pas en charge RGBA. Utilise la bibliothèque Ruby ChunkyPNG pure pour l'installation et le déploiement gratuits et sans tracas .

sudo gem install compass-rgbapng 

require "rgbapng" 

@import "rgbapng"; 


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

Est-il possible de le faire même avec moins? Je ne le pense pas car MOINS est basé sur JavaScript et JavaScript n'est pas aussi performant que ruby. Ai-je raison?

+0

_JavaScript n'est pas aussi efficace que ruby_ n'est pas du tout quelque chose avec lequel je serais d'accord. Plus le point est si un outil existe déjà pour cela dans LESS/JS similaire à celui que vous mentionnez pour SASS/Ruby. –

+0

@AlexWayne - Il utilise la bibliothèque pure Ruby ChunkyPNG –

+0

Nitpicking ici, mais JavaScript est un langage complet, donc c'est malhonnête de dire qu'il n'est pas aussi capable. L'implémentation du navigateur JavaScript ne permet pas de générer des images à ma connaissance mais vous êtes plus que capable de générer des images en utilisant une implémentation côté serveur comme NodeJs. – JaredMcAteer

Répondre

1

Courte réponse: non. Réponse longue: pas seulement avec la bibliothèque LESS.

Vous pouvez combiner le plugin côté serveur avec un script LESS. Vous pouvez faire une classe MOINS qui génère le style CSS:

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

Je ne sais pas comment ça fonctionne la bibliothèque, mais la seule partie importante que je peux voir est le nom de la PNG étant la valeur RGBA hex-encodée . Être juste, je l'ai fait un script MOINS qui permet d'utiliser ce schéma d'URL pour tirer profit du constructeur d'image côté serveur:

@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}[email protected]{date-nocache}"; 
    background: rgba(@r, @g, @b, @a); 
} 

Ce script crée la rgba-fond classe/fonction en moins, ce qui vous permet à anotate votre mOINS classe comme:

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

Si vous prévoyez d'utiliser ce scripts moins stockées sur plusieurs, il serait adviceable pour l'extraire dans un autre fichier, et utiliser la directive @import où vous voulez l'utiliser.

Si l'URL générée est plus complexe que ce que je pensais, veuillez fournir quelques informations supplémentaires sur la façon de créer cette URL, afin que nous puissions voir si cela peut être résolu en utilisant LESS.