azanebrain / smacss-sass-template Goto Github PK

This will let developers easily define site-wide variables (such as font families, sizes, colors, etc), while simultaneously offering an extendable infrastructure that aggregate overlapping pieces either as a full set (@extend %font-normal), or pieces (@extend %font-normal-size)

_typography.sass:

$font-normal-family: "Arial"
$font-normal-size: 12px
$font-heavy-family: "Times New Roman"
$font-heavy-size: 14px

%font-normal-family
  font-family: $font-normal-family
%font-normal-size
  font-size: $font-normal-size
%font-normal
  @extend %font-normal-family
  @extend %font-normal-size

%font-heavy-family
  font-family: $font-heavy-family
%font-heavy-size
  font-size: $font-heavy-size
%font-heavy
  @extend %font-heavy-family
  @extend %font-heavy-size

modular partials:
P, H1, and .heading use all of the attributes of the font set (normal / heavy).
Tagline only uses the font family attribute of the heavy set. Its size is 1px less than the heavy size

p
  @extend %font-normal
h1
  @extend %font-heavy

.headline
  @extend %font-heavy  
  border-bottom: solid 1px black
.tagline
  @extend %font-heavy-family
  font-size: $font-heavy-size - 1

compiles to:

p {
  font-family: "Arial";
  font-size: 12px;
}

h1, .headline, .tagline {
  font-family: "Times New Roman";
}

h1, .headline {
  font-size: 14px;
}

.headline {
  border-bottom: solid 1px black;
}

.tagline {
  font-size: 13px;
}

The heavy font-family is efficiently defined once for h1, .headline, and .tagline, using only 3 lines.
The old method of using only variables would mean an extra line on each element defining its own font-family.

Visited link color should be same as normal link color:

$linkVisitedColor: $linkColor

Add font family and size variables
Add import of Google fonts at top of file

Either one or two files for all extends and variables

Import order:

Vendors
Variables
Extends
Typography
Base
Modules
States

$site-colors: (
primary: blue,
secondary: red,
tertiary: green
);

Use with:
map-get($site-colors, primary)

Review the other kinds of maps:
http://blog.sass-lang.com/posts/184094-sass-33-is-released

Mixins
Modules
States
Layout

base/_sprites.sass
This file imports the sprite images

images/sprites folder
and in config.rb

gitignore:
images/sprites/*