Organizing Styles When Using Typesettings

As the prototype started to get more complicated the need to break things into “modules” became apparent. Since Typesettings uses Ems I needed settings to quickly adjust specific modules. The solution uses Sass variables in a very simple way. At the top of the partial for the module I set “font size context” variables for the different sizes. This makes it easy to maintain the mixins and functions for that specific module:

// This is part of the _btn.scss
//
// Provides two different size buttons set in Ems that
// have the same amount of padding with pixel borders.
//
// [1] & [2] For the small button sets padding to
// 2 * $base-vertical-unit, which would be 12px in Ems.
// The small font size context variable is passed.
//
// [3] & [4] For the small button sets border top and
// bottom to 1px with (1 * $base-vertical-unit) - 1px.
// Which comes out to 1px border and 5px (in Ems) padding.
// The small font size context variable is passed.
//
// [5] & [6] For the medium button sets padding to
// 2 * $base-vertical-unit, which would be 12px in Ems.
// The medium font size context variable is passed.
//
// [7] & [8] For the medium button sets border top and
// bottom to 1px with (1 * $base-vertical-unit) - 1px.
// Which comes out to 1px border and 5px (in Ems) padding.
// The medium font size context variable is passed.

// Font size context variable using a modular scale value
$btn_sm-font-size: $ms-down3;

// Font size context variable using a modular scale value
$btn_md-font-size: $ms-down1;

.btn {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  background-color: transparent;
  white-space: nowrap;
  border-radius: 3px;
  text-decoration: none;
  font-family: $font-sans-semibold;
  user-select: none;
}

.btn_sm {
  // Sets the font size and line height
  @include setType(3, $btn_sm-font-size);
}

.btn_md {
 // Sets the font size and line height
  @include setType(3, $btn_md-font-size);
}

.btn_default {
  color: $light-blue;
  border-right-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: $light-blue;
}

.btn_sm.btn_default {
  padding-right: emRhythm(2, $btn_sm-font-size);//[1]
  padding-left: emRhythm(2, $btn_sm-font-size);//[2]
  @include rhythmBorderTop(1px, 1, $btn_sm-font-size);//[3]
  @include rhythmBorderBottom(1px, 1, $btn_sm-font-size);//[4]
}

.btn_md.btn_default {
  padding-right: emRhythm(2, $btn_md-font-size);//[5]
  padding-left: emRhythm(2, $btn_md-font-size);//[6]
  @include rhythmBorderTop(1px, 1, $btn_md-font-size);//[7]
  @include rhythmBorderBottom(1px, 1, $btn_md-font-size);//[8]
}

Again nothing too crazy or clever. Just an easy to adjust and understand use of Sass variables.