title: How can I set a sass variable using an environment variable?
body: <p>I'm using Gulp as my build system.</p>
  
  <p>I need to identify links pointing to external websites with the scss following rule:</p>
  
  <pre><code>// Links to external websites
  a[href*='//']:not([href*='example.com']) {
      &amp;::after {
          content: ' \e895';
          font-family: 'Material Icons';
      }
  }
  </code></pre>
  
  <p>OR  </p>
  
  <pre><code>$baseURL: 'localhost:3000'; // Set this variable based on environment
  a[href*='//']:not([href*='#{$baseurl}']) {
      ...
  }
  </code></pre>
  
  <p>When I'm running a development server the address I'm serving files from is <code>localhost:3000</code>, not <code>example.com</code>.  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.</p>
  
  <p>What's the best way to set a scss variable based on an environment setting?</p>
  
  <hr>
  
  <p><strong>Edit:</strong><br>
  This solution works, but it introduces a temporary file, which I'm not wild about.  I moved my <code>_variables.scss</code> into the scss root, I process this file and output it into the <code>base</code> subdirectory where it is used to compile the scss.  I would then add <code>scss/base/_variables.scss</code> to my <code>.gitignore</code> to avoid committing to version control.</p>
  
  <p><strong>_variables.scss</strong></p>
  
  <pre><code>$baseURL: '/* @echo PATH */';  
  </code></pre>
  
  <p><strong>Gulpfile.js</strong></p>
  
  <pre><code>// 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'));
  });
  </code></pre>