How to set sass variable using environment variable?

Question

I use Gulp as my build system.

I need to identify links pointing to external sites using the following scss rule:

// Links to external websites a[href*='//']:not([href*='example.com']) { &::after { content: ' \e895'; font-family: 'Material Icons'; } } 

OR

 $baseURL: 'localhost:3000'; // Set this variable based on environment a[href*='//']:not([href*='#{$baseurl}']) { ... } 

When I start the development server, I serve the files from localhost:3000 , not example.com . As a result, each individual link on the website (on the dev server) has a small icon indicating that the link goes to an external website, which is really distracting.

What is the best way to set a scss variable based on environment settings?

---

Edit:
This solution works, but it introduces a temporary file that I'm not alone about. I moved my _variables.scss to the _variables.scss root, I process this file and put it in the base subdirectory where it is used to compile scss. Then I will add scss/base/_variables.scss to my .gitignore to prevent version control.

_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')); }); 

Answer 1

Yes it is possible.

To get environment variables there package: gulp-env

To remove these links from static files: gulp-preprocess

But it is also important to check these modified files, and not commit them as a development version. Hooks to your VCS are an option.