// How to order themable sass

// 1. Define font faces

// 2. Define any changes to theme or component variables
$theme-prefix: 'theme_';
$theme-font-size: 12px;
$paragraph-font-size: 10px;

// 3. Define the theme default variables
$theme-prefix: '' !default;
$theme-font-size: 10px !default;

// 4. Translate theme variables to component variables
$title-prefix: $theme-prefix !default;
$title-font-size: $theme-font-size !default;

$paragraph-prefix: $theme-prefix !default;
$paragraph-font-size: $theme-font-size !default;

// 5. Define global styles, reset, normalize etc.

// 6. Define layout and structuring components

// 7. Define ui components
$title-prefix: '' !default;
$title-font-size: 16px !default;
.#{$title-prefix}title {
  font-size: $title-font-size;
}

$paragraph-prefix: '' !default;
$paragraph-font-size: 12px !default;
.#{$paragraph-prefix}paragraph {
  font-size: $paragraph-font-size;
}

// 8. Define any css level overrides or special rare case declarations
.my-context {
  .#{$title-prefix}title {
    font-size: 20px;
  }
  .#{$paragraph-prefix}paragraph {
    font-size: 14px;
  }
}