Rails on the road

Leggendo questo post su AirBlade Blog ho trovato un plugin per ripulire ed applicare il principio DRY anche ai CSS. Grazie al plugin css_dryer è possibile scrivere queste righe di CSS (CSS nidificati!!):

    1 div {
    2     /* comment for div */
    3     color: green;
    4     p {
    5       /* comment for div p */
    6       color: red;
    7       b { color: blue; }
    8     }
    9   }

per ottenere automaticamente:

    1 div {
    2     /* comment for div */
    3     color: green;
    4   }    
    5 div p {
    6     /* comment for div p */
    7     color: red;
    8   }
    9 div p b { color: blue; }

Ogni selettore può essere nidificato, tra cui figli, padri, adiacenti, classi, pseudo-classi, attributi, ID e i blocchi @media. Una limitazione momentanea è l’utilizzo di selettori multipli nidificati separati da virgole.

Inoltre con il plugin è anche possibile utilizzare variabili Rails all’interno del CSS. Infatti il codice CSS è inserito all’interno di file con estensione .ncss.

Come installare il plugin

Lanciare il seguente comando all’interno della vostra applicazione Rails:

    1 script/plugin install http://opensource.airbladesoftware.com/trunk/plugins/css_dryer

Come farlo funzionare

Creare un nuovo controllore per servire i file .ncss:

    1 script/generate controller dry_css

Modifica il controllore per renderlo simile a:

    1 class DryCssController < ApplicationController
    2   layout nil
    3   session :off
    4 
    5   before_filter :set_headers
    6 
    7   private
    8   def set_headers
    9     headers['Content-Type'] = 'text/css'
   10   end
   11 end

A questo punto puoi creare i tuoi file ncss all’interno di app/views/dry_css.

Puoi includere i css all’interno dei tuoi file rhtml con la seguente sintassi:

    1 <link href='/dry_css/site' rel='Stylesheet' type='text/css'>

dove si intende che sia stato creato un file site.ncss.

To Do

Ecco cosa stanno cercando di implementare:

• Selettori multipli nidificati separati da virgole
• Caching
• Generatore per creare automaticamente il controllore
• Fare un helper per includere i fogli di stile DRY
• Fare una versione in gemma in modo da avere una funzione a cui passare il CSS DRY e ottenere il CSS elaborato.