feat: add support for !default in SCSS variables format

For any token definition that includes the property
`themeable: true`, a `!default` will now be added in
the scss/variables format.

GitHub issue #307

__tests__/formats/scssVariables.test.js

@@ -13,6 +13,7 @@
 
 var formats = require('../../lib/common/formats');
 var scss = require('node-sass');
+var _ = require('lodash');
 
 var file = {
   "destination": "__output/",
@@ -62,5 +63,18 @@ describe('formats', () => {
       });
     });
 
+    it('should optionally use !default', done => {
+      var themeableDictionary = _.cloneDeep(dictionary),
+        formattedScss = formatter(dictionary),
+        themeableScss = "";
+
+      expect(formattedScss).not.toMatch("!default");
+
+      themeableDictionary.allProperties[0].themeable = true;
+      themeableScss = formatter(themeableDictionary);
+
+      expect(themeableScss).toMatch("#EF5350 !default;");
+      return done();
+    });
   });
 });

lib/common/formats.js

@@ -40,7 +40,14 @@ function fileHeader(options, commentStyle) {
 
 function variablesWithPrefix(prefix, properties, commentStyle) {
   return properties.map(function(prop) {
-      var to_ret_prop = prefix + prop.name + ': ' + (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value) + ';';
+      var to_ret_prop = prefix + prop.name + ': ';
+      to_ret_prop += (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value);
+
+      if (prop.themeable === true) {
+        to_ret_prop += ' !default';
+      }
+
+      to_ret_prop += ';';
 
       if (prop.comment) {
         if (commentStyle === 'short') {
@@ -175,14 +182,16 @@ module.exports = {
   },
 
   /**
-   * Creates a SCSS file with variable definitions based on the style dictionary
+   * Creates a SCSS file with variable definitions based on the style dictionary.
+   *
+   * Add `!default` to any variable by setting a `themeable: true` property in the token's definition.
    *
    * @memberof Formats
    * @kind member
    * @example
    * ```scss
    * $color-background-base: #f0f0f0;
-   * $color-background-alt: #eeeeee;
+   * $color-background-alt: #eeeeee !default;
    * ```
    */
   'scss/variables': function(dictionary) {