Fonts

testing.md

%brandon-700 { @include typekit-font(brandon, 700); }

The reason I think it might shrink the size of our styleheets is the way that @include vs. @extend works. If we had three declarations in SASS like so:

h2 {
	@include typekit-font(brandon, 700);
}

.my-class h2 {
	@include typekit-font(brandon, 700);
}

.another-class h2 {
	@include typekit-font(brandon, 700);
}

// Resulting Output
h2 {
	family: 'brandon-grotesque', helvetica, sans-serif;
	weight: 700;
}

.my-class h2 {
	family: 'brandon-grotesque', helvetica, sans-serif;
	weight: 700;
}

.another-class h2 {
	family: 'brandon-grotesque', helvetica, sans-serif;
	weight: 700;
}

But if we used @extend instead it would look like the following:

h2 {
	@extend %brandon-700;
}

.my-class h2 {
	@extend %brandon-700;
}

.another-class h2 {
	@extend %brandon-700;
}

// Resulting Output
h2, .my-class h2, .another-class h2 {
	family: 'brandon-grotesque', helvetica, sans-serif;
	weight: 700;
}