Skip to content

Instantly share code, notes, and snippets.

@indieisaconcept
Created December 11, 2013 14:04
Show Gist options
  • Save indieisaconcept/7910953 to your computer and use it in GitHub Desktop.
Save indieisaconcept/7910953 to your computer and use it in GitHub Desktop.
Example of how not namespacing your variables can make it easier to maintain
<div class="module">
<p>This is an example of using namespaced variables</p>
</div>
<div class="box">BOX</div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// config/_base.scss
$base-font-size: 18px;
$module-base-font-size: 11px;
$box-base-font-size: 25px;
// component/module.scss
$base-font-size: 50px !default;
// component/box.scss
$base-font-size: 10px !default;
.module p {
font-size: $module-base-font-size;
}
.box {
background: red;
color: white;
font-size: $box-base-font-size;
width: 100px;
height: 100px;
}
.module p {
font-size: 11px;
}
.box {
background: red;
color: white;
font-size: 25px;
width: 100px;
height: 100px;
}
<div class="module">
<p>This is an example of using namespaced variables</p>
</div>
<div class="box">BOX</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment