Sto usando Gulp come sistema di compilazione.Come posso impostare una variabile sass usando una variabile d'ambiente?
Ho bisogno di identificare link che puntano a siti esterni con lo SCSS seguente regola:
// Links to external websites
a[href*='//']:not([href*='example.com']) {
&::after {
content: ' \e895';
font-family: 'Material Icons';
}
}
O
$baseURL: 'localhost:3000'; // Set this variable based on environment
a[href*='//']:not([href*='#{$baseurl}']) {
...
}
quando sono in esecuzione un server di sviluppo l'indirizzo che sto servendo i file da è localhost:3000, non example.com. Il risultato è che ogni singolo link sul sito web (sul server di sviluppo) ha una piccola icona che indica che il link va a un sito Web esterno, il che è davvero fonte di distrazione.
Qual è il modo migliore per impostare una variabile scss in base alle impostazioni dell'ambiente?
Edit:
Questa soluzione funziona, ma introduce un file temporaneo, che io non sono wild circa. Ho spostato il mio _variables.scss nella radice di scss, elaboro questo file e lo metto nella sottodirectory base dove è usato per compilare lo scss. Vorrei quindi aggiungere scss/base/_variables.scss al mio .gitignore per evitare di eseguire il controllo della versione.
_variables.scss
$baseURL: '/* @echo PATH */';
Gulpfile.js
// Set baseurl as Sass variable -- used to identify external links
gulp.task('sass-vars', function() {
var baseURL = (config.production) ? 'example.com' : 'localhost:3000';
return gulp.src('./scss/_variables.scss')
.pipe($.preprocess({context: {PATH: baseURL}}))
.pipe(gulp.dest('./scss/base'));
});
Dai un'occhiata a: https://github.com/dlmanning/gulp-sass/issues/280 – sobolevn
Eventuali duplicati: http://stackoverflow.com/questions/15153613/provide-sass-variables-definitions-on -command-line, http://stackoverflow.com/questions/14506578/use-variable-defined-in-config-rb-in-scss-files – cimmanon
Entrambe queste soluzioni utilizzano ruby / compass che include un file di configurazione che consente per impostare le variabili di ambiente sass. – Roy