Come posso usare le variabili Sass in una funzione JavaScript?

Question

Ho una variabile in Sass che determina il numero di columns da inserire in 1 row per il mio sistema di rete.

Normalmente, quelli sono 12 columns.

In JavaScript ho una funzione che controlla se ci sono più di 12 column s in un row.

In tal caso, nasconde l'intera riga.

Questa funzione è simile al seguente:

function checkColumns() { 
    var maxColumns = 12; 
    $('.row').each(function() { 
     var elementsLength = $(this).children('.column').length; 
     if (elementsLength > maxColumns) { 
      $(this).remove(); 
     } 
    }); 
} 

C'è un modo per cambiare la variabile maxColumns allo stesso numero che è nelle mie variabili Sass? Inoltre, cambiandolo manualmente ogni volta che cambio il numero nel mio file sass.

Answer 1

appena visto questa questa mattina qui: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json

In primo luogo è necessario includere: https://github.com/vigetlabs/sass-json-vars

Installare la gemma:

gem install sass-json-vars 

Posizionare le variabili in un file JSON

// variables.json 
{ 
    "font-sans": "Helvetica, sans-serif", 
    "colors": { 
     "red": "#c33" 
    } 
} 

Importare il file in Sass per esporre i nomi delle variabili:

@import "variables.json" 

body { 
    color: map-get($colors, red); 
    font: $font-sans; 
} 

Richiede Sass-JSON-Vars durante la compilazione

sass style.scss -r sass-json-vars