title: Gulp - want to inject SCSS variable into another file
body: <p><strong>UPDATE -- See additional info below, added on 22 March...</strong></p>
  
  <p>I want to inject an SCSS variable into a code file with my Gulp process.</p>
  
  <p>I think this is two steps:</p>
  
  <ol>
  <li><p>Gulp the SCSS _variables.scss file so I can access the variable</p></li>
  <li><p>Just do a simple gulp.replace to do a string-replace and drop the
  variable value into my file (like the answer <a href="https://stackoverflow.com/questions/30703688/inject-variable-into-html-via-gulp-task">here</a>)</p></li>
  </ol>
  
  <p>I'm stuck on step 1. Here's what I have... as best I can tell, the not-heavily-documented <a href="https://www.npmjs.com/package/gulp-sass-variables" rel="nofollow noreferrer"><code>gulp-sass-variables</code></a> plugin is supposed to pull the variables from the SCSS file into the argv object. So I followed the example on that plugin page, and tried this:</p>
  
  <pre><code>gulp.task('test', function () {
      gulp.src('sass/*')
          .pipe(plugins.print())
          .pipe(plugins.sassVariables({
              $foundIt: argv.testSassVar
          }))
  
      console.log(argv);
  
  });
  </code></pre>
  
  <p>The <code>print()</code> call is just to confirm that it is reading my SCSS files (and it is). But it can't find <code>$testSassVar</code> in my SCSS code, as you can see from this error message:</p>
  
  <pre><code>[12:53:04] Using gulpfile ~/dev/project/gulpfile.js
  [12:53:04] Starting 'test'...
  [12:53:04] 'test' errored after 15 ms
  [12:53:04] ReferenceError: testSassVar is not defined
      at Gulp.&lt;anonymous&gt; (...)
  [12:53:04] sass/_mixins.scss        &lt;- this line and all below are from print()
  [12:53:04] sass/_normalize.scss
  [12:53:04] sass/_variables.scss
  [12:53:04] sass/footer
  [12:53:04] sass/header
  [12:53:04] sass/landing
  [12:53:04] sass/landing-style.scss
  [12:53:04] sass/site
  [12:53:04] sass/style.scss
  </code></pre>
  
  <p>I tried removing that <code>$foundIt</code> assignment, and just trying to fill the argv object, but that ends up outputting an empty array:</p>
  
  <pre><code>[13:00:57] Using gulpfile ~/dev/project/gulpfile.js
  [13:00:57] Starting 'test'...
  { _: [ 'test' ], '$0': 'gulp' }
  [13:00:57] Finished 'test' after 41 ms
  </code></pre>
  
  <p>Any ideas how I can accomplish what I'm trying to do?!</p>
  
  <hr>
  
  <h2>EDIT 22 March</h2>
  
  <p>Looks like I can partially accomplish this by going a different route and using the <a href="https://www.npmjs.com/package/gulp-sass-json" rel="nofollow noreferrer">gulp-sass-json</a> plugin:</p>
  
  <pre><code>gulp.task('sass-json', function () {
      return gulp
          .src(scss_base + '*')
          .pipe(plugins.sassJson())
          .pipe(gulp.dest(tmp + 'sass-vars.json'));
  });
  </code></pre>
  
  <p>This writes a file to <code>/tmp</code> with my SCSS variables compiled into a JSON file. Then I thought, ok, I can load the JSON file in gulp and parse it from there. Unfortunately, this plugin doesn't resolve 2nd level variables (i.e. variables that reference variables), so you get something like this:</p>
  
  <pre><code> {
       # variables parsed from SCSS to JSON by gulp-sass-json
  
       # these are ok
       "font__main": "'Open Sans', sans-serif",
       "font__heading": "'Open Sans', sans-serif",
       "font__line-height-body": "1.5",
       "testSassVar": "123",
       "color__nbar": "#ffffff",
       "color__nbar_bg": "#50B107",
       "size_border-radius": "3px"
  
       # these variables reference other variables, not parsed, ouch
       "color__background-body": "$color__nbar",
       "color__background-screen": "$color__nbar",
  
       # and this is even worse, the SCSS function isn't parsed, double ouch
       "color_test": "lighten($color__nbar, 50%)",
   }
  </code></pre>
  
  <p>As you can see, the variables that are simple references to other variables could probably be fixed with a bit of Javascript to just parse them, but once you get into the SASS functions, that idea falls apart.</p>
  
  <p>Ideally, the SCSS compiler could parse and variables that aren't static values. Is that possible (or is that starting to really get into the weeds to solve this problem)?</p>
  
  <p>The only other thought I had was to move all my variables to a JSON file, then use a gulp plugin that moved in the other direction -- JSON to SASS variables. But then I wouldn't get the advantage of having the SCSS compiler to run functions, parse variables, etc, and then give those values back to my gulp file.</p>
  
  <p>Since my goal is to have the SASS values in the (parsed) variables available to my gulp file, so I can turn around and drop them into another (HTML or PHP) code file doing a simple string replace. If there's an easier way to accomplish my final goal, I'm all ears...</p>