How can I set a sass variable using an environment variable?

Question

I'm using Gulp as my build system.

I need to identify links pointing to external websites with the scss following 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'm running a development server the address I'm serving files from is localhost:3000, not example.com. The result is that every single link on the website (on the dev server) has a small icon indicating the link goes to an external website, which is really distracting.

What's the best way to set a scss variable based on an environment setting?

---

Edit:
This solution works, but it introduces a temporary file, which I'm not wild about. I moved my _variables.scss into the scss root, I process this file and output it into the base subdirectory where it is used to compile the scss. I would then add scss/base/_variables.scss to my .gitignore to avoid committing to 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 do that.

To get environment variables there's a package: gulp-env

To remove these links from static files: gulp-preprocess

But it's also important to check these changed files, not to commit them as a development version. Hooks to your VCS is an option.