Global variables vs. module variables

[csshugs]

As already mentioned in #411, I’d like to propose a new way to notate variables. This introduces a differentiation of “global” and “module” variables. E.g.:

// _settings.core.scss
$INUIT-SPACING:       24px !default;
$INUIT-SPACING-TINY:  12px !default;
$INUIT-SPACING-SMALL: 16px !default;
$INUIT-SPACING-LARGE: 48px !default;
$INUIT-SPACING-HUGE:  96px !default;



// _objects.box.scss
$inuit-box-padding:       $INUIT-SPACING !default;
$inuit-box-tiny-padding:  $INUIT-SPACING-TINY !default;
$inuit-box-small-padding: $INUIT-SPACING-SMALL !default;
$inuit-box-large-padding: $INUIT-SPACING-LARGE !default;
$inuit-box-huge-padding:  $INUIT-SPACING-HUGE !default;

.o-box {
  display: block;
  padding: $inuit-box-padding;
}

.o-box--flush {
  padding: 0;
}

.o-box--tiny {
  padding: $inuit-box-tiny-padding;
}

.o-box--small {
  padding: $inuit-box-small-padding;
}

.o-box--large {
  padding: $inuit-box-large-padding;
}

.o-box--huge {
  padding: $inuit-box-huge-padding;
}

What’s the benefit?

By making a differentiation in the notation, it is instantly clear what variables are global, i.e. potentially used anywhere else in the codebase and what variables are local, i.e. only used in the partial at hand.

This provides some kind of clarity and dependability of how to use and interact with variables.