Sass standards

_standards.scss

/**
 * WARNING
 * This mixin will override some common frameworks default variables
 * If your framework of choice is not supported, please contribute
 */
@mixin set-standards($standard-font-size: false, $standard-line-height: false) {

  // Use globals as defaults
  @if $standard-font-size == false {
    $standard-font-size: $base-font-size;
  }
  @if $standard-line-height == false {
    $standard-line-height: $base-line-height;
  }

  // Bootstrap
  $font-size-base:              $standard-font-size !global;
  $line-height-base:            $standard-line-height !global;

  // Foundation
  $em-base:                     $standard-font-size !global;
  $base-line-height:            percentage($standard-line-height) !global;

  // Typecsset
  $typecsset-base-font-size:    $standard-font-size !global;
  $typecsset-base-line-height:  $standard-font-size * $standard-line-height !global;
}

namespace.scss

// Mini proposal for Sass namespace/modules

// Prefixed defaults before import would work
// Instead of $font-size-base
$twbs-font-size-base: 16px;

// This would prefix every variables, mixins, functions, placeholders with "twbs-";
@import "bootstrap" as "twbs";

// Usage


// Instead of make-row(..);
@include twbs-make-row(...);

// And so on...

Sass-Standards.md

Sass standards

I think it's time for Sass frameworks to agree on some standards. There are plenty of them now and it's great! We even have the chance to combine them without too much bloat if we want to, but it's not as easy as it should. For instance, I can use :

• Bootstrap for buttons and forms
• Foundation for top bar and offcanvas
• Typecsset or Compass for vertical rythm
• Singularity for grids
• Your library of choice

The problem

They all make good use of the !default flag which allow us, the users, to override their defaults variables but they don't agree on names. Worst, we can create conflicts between them because Sass lacks namespace (I mean real namespaces : with variables, mixins and functions, not @at-root). This is managable but creates frustration.

I think the most damaging is that it limits the growth of a sane Sass ecosystem and it complicates switching from one to another.

Typical default variables are font-size and line-height, we could also add spacing for grids and media objects for instance, this list is not exhaustive.

The context

I only look at 3 of them :

// Bootstrap
$font-size-base:          14px !default;
$line-height-base:        1.428571429 !default; // 20/14     <= this one is incredible
$line-height-computed:    floor($font-size-base * $line-height-base) !default; // ~20px


// Foundation
$base-font-size: 100% !default;
$base-line-height: 150% !default;
$em-base: 16px !default;


// Typecsset
$typecsset-base-font-size:      16px !default;
$typecsset-base-line-height:    24px !default;

Notice how each one uses a different unit for line-height. In order to share with them the same rules, the only way is to do something like this:

$my-font-size: 16px;
$my-line-height: 1.5;

$font-size-base:              $my-font-size;
$line-height-base:            $my-line-height;
$em-base:                     $my-font-size;
$base-line-height:            percentage($my-line-height);
$typecsset-base-font-size:    $my-font-size;
$typecsset-base-line-height:  $my-font-size * $my-line-height;

@import "bootstrap", "foundation", "typecsset";

We can do better!

Proposal

Every frameworks :

• should agree on standard variables names and units! (see below)
• should define default values for those in their codebase
• should not use them directly in their codebase but...
• should define or compute their own defaults from the standard ones
• should have their own prefix, just like Typecsset (until Sass have namespaces)

About names and units, I propose :

• $base-xxx as the standard prefix.
• px for font-size
• unitless line-height

Those are just a few but most common cases and this would end up like this :

// Bootstrap
$base-font-size:    14px !default;
$base-line-height:  20/14 !default;

$twbs-font-size-base:          $base-font-size !default;
$twbs-line-height-base:        $base-line-height !default;
$twbs-line-height-computed:    floor($twbs-font-size-base * $twbs-line-height-base) !default;


// Foundation
$base-font-size:    16px !default;
$base-line-height:  1.5 !default;

$found-base-font-size:    100% !default;
$found-base-line-height:  percentage($base-line-height) !default;
$found-em-base:           $base-font-size !default;


// Typecsset
$base-font-size:    16px !default;
$base-line-height:  1.5 !default;

$typecsset-base-font-size:    $base-font-size !default;
$typecsset-base-line-height:  $typecsset-base-font-size * $base-line-height !default;

The benefits

It would be way easier to tune them all together :

$base-font-size:    16px;
$base-line-height:  1.5;
@import "bootstrap", "foundation", "typecsset";

But we still have a way to set up individually and in a more explicit fashion.

$base-font-size:    16px;
$base-line-height:  1.5;
$twbs-font-size-base: 14px;
@import "bootstrap", "foundation", "typecsset";

What to do ?

• Tell me what you think! Especially if you created or contribute to a framework, or are planning to do so.
• Spread the word
• If you can't wait : there's a mixin in this gist which act like a polyfill (Sass 3.3 only). You can add your framework if you will (fork please!), and use it!

use.scss

@import "standards";

$base-font-size: 16px;
$base-line-height: 1.5;
@include set-standards;