Estendere SASS con Ruby

Anche con una conoscenza non approfondita di Ruby abbiamo la possibilità di superare le limitazioni imposte alle funzioni dichiarate all'interno di SASS e aggiungere le funzioni di cui abbiamo bisogno in caso non siano già state sviluppate dalla community.

Possiamo quindi beneficiare della piena potenza di un linguaggio di sviluppo e del completo accesso al sistema.

>> Leggi come installare Ruby

Calcolare le dimensioni delle immagini con FastImage

Per fare un esempio che sia significativo possiamo avvalerci di FastImage, un'ottima libreria Ruby che utilizziamo per sviluppare un paio di funzioni che sappiano calcolare le dimensioni di una immagine.

Cominciamo munendoci della libreria, pertanto eseguiamo da terminale:

gem install fastimage

Creiamo quindi un file imagesize.rb all'interno del nostro progetto, contenente questo breve listato Ruby:

require 'rubygems'
require 'fastimage'
module Sass::Script::Functions
	def get_width(string)
		assert_type string, :String
		size = FastImage.size(string.value)
		Sass::Script::Value::String.new("#{size[0]}px")
	end
	declare :get_width, [:string]
	def get_height(string)
		assert_type string, :String
		size = FastImage.size(string.value)
		Sass::Script::Value::String.new("#{size[1]}px")
	end
	declare :get_height, [:string]
end

Esaminiamo il significato di quanto appena scritto. Procediamo per fasi, per prima cosa focalizziamoci sull'istruzione declare che viene utilizzata per notificare a SASS la presenza di due nuove funzioni e l'eventuale elenco di tipi di parametro da esse accettati, in questo caso un solo parametro di tipo stringa per ognuna delle due funzioni.

Con la keyword def specifichiamo il blocco definizione di ognuna delle funzioni get_width e get_height.

Le due funzioni sono molto simili fra loro: per prima cosa utilizziamo assert_type per verificare che il tipo del parametro corrisponda a quanto dichiarato, successivamente invochiamo il metodo FastImage.size per ottenere le dimensioni dell'immagine passata come parametro ed infine restituiamo a SASS la dimensione richiesta, in un caso la larghezza, nell'altro l'altezza.

Da notare come il parametro string presente in entrambe le funzioni sia in realtà un oggetto più complesso, con il vero valore nascosto all'interno della proprietà 'value'; per lo stesso motivo in fase di ritorno il valore che abbiamo ottenuto deve essere reincapsulato all'interno di un'oggetto simile.

Bene, ora possiamo sperimentare le funzioni appena costruite in un file SASS, ad esempio app.scss:

div {
	width: get_width("official_me.jpg");
	height: get_height("official_me.jpg");
}

Per compilare in CSS invochiamo il tool a linea di comando utilizzando il parametro '-r' seguito dal percorso al file contenente le due funzioni appena sviluppate:

sass app.scss:app.css -r ./imagesize.rb

Con questa tecnica possiamo estendere a piacimento SASS, introducendo comportamenti non previsti dal framework capaci di trarre vantaggio dalla potenza di un vero linguaggio di programmazione come Ruby con migliaia di librerie sviluppate negli anni dalla community.