Sass best practices

12th of July, 2018 in design, ui, ux

Reference & summary of Sass best practices

1. Syntax & formatting
2. Architecture
   1. Use the bem methodology
3. Mixins vs Placeholders
4. Media queries
5. Tools & frameworks
6. Sources

Syntax & formatting

Follow the Sass Guidelines - Syntax formatting chapter.

1
2
3
4
5
6
7
var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c;     // true, coercion applied on the arrayaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbb
b == c;     // true, coercion applied on the array
a == b;     // false

A few reminders :

• Force UTF-8 encoding with @charset 'utf-8'; in main file
• 0 value should never have a unit
• To add a unit to a number, you have to multiply this number by 1 unit.

1
2
3
4
5
6
7
$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

• To remove the unit of a value, you have to divide it by one unit of its kind.

1
2
3
4
5
6
7
$length: 42px;

// Yep
$value: $length / 1px;

// Nope
$value: str-slice($length + unquote(''), 1, 2);

• Prefer HSL, RGB over Hexadecimal notations (in that order)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Yep
.foo {
  color: hsl(0, 100%, 50%);
}

// Also yep
.foo {
  color: rgb(255, 0, 0);
}

// Meh
.foo {
  color: #f00;
}

// Nope
.foo {
  color: #FF0000;
}

// Nope
.foo {
  color: red;
}

Architecture

Use the bem methodology

• Use Block Element Modifier methodology
• and 10 common problems and how to avoid them

Mixins vs Placeholders

• Same properties that won’t change : %placeholder + @extend
• Properties with different values : @mixin

Media queries

• Use include-media

Tools & frameworks

• Autoprefixer
• Css Grid guide

Sources

Block Element Modifier methodology

Sass Guidelines
Hugo Giraudel - hugogiraudel.com

Aesthetic Sass 1: Architecture and Style Organization
Aesthetic Sass 2: Colors and Palettes
Aesthetic Sass 3: Typography and Vertical Rhythm
David Khourshid - twitter.com/DavidKPiano