Sass

These are the Javascript-specific coding styles. Anything mentions here overrides/adds to the "In General" guide, then "CSS" guide. The only 1 principle when coding Sass is that:

• Be consistent. As long as it is sharing a single pattern, it is maintainable.

#2 - Indentation

• Follow the project (Sass guideline is 2 spaces no tab).
• Default: 8 space tab.

Rationale

• Sass uses code blocking intensively. Hence, standard programming practices applies.

#3 - One line Per Statement

• No code hiding

BAD:

.foo {

    display: block; overflow: hidden;

    padding: 0 1em;

}

GOOD:

.foo {

  display: block;

  overflow: hidden;

  padding: 0 1em;

}

#4 - Use UTF-8

• Always use UTF-8.

@charset 'utf-8';

#5 - Use Single Quote String

• Always quote string.
• Use single quote (').
• Use unquote function for values without quote. However, the argument should be quoted.
• URL should be quoted as well.

// Good

$direction: 'left';

$font-type: unquote('sans-serif');

// Bad

$direction: left;

$font-type: unquote(sans-serif);

Rationale

• Compatibility with CSS.
• String without quote means entirely different thing in Sass.

#6 - List

• either inline or multi-lines.
• necessarily on multi-lines if too long to fit on an 80-character line
• unless used as is for CSS purposes, always comma separated.
• always wrapped in parenthesis.
• trailing comma if multi-lines, not if inline.

// Good

$font-stack: ('Helvetica', 'Arial', sans-serif);

// Good

$font-stack: (

  'Helvetica',

  'Arial',

  sans-serif,

);

// Bad

$font-stack: 'Helvetica' 'Arial' sans-serif;

// Bad

$font-stack: 'Helvetica', 'Arial', sans-serif;

// Bad

$font-stack: ('Helvetica', 'Arial', sans-serif,);

#7 - Maps

• space after the colon (:);
• opening brace (() on the same line as the colon (:);
• quoted keys if they are strings (which represents 99% of the cases);
• each key/value pair on its own new line;
• comma (,) at the end of each key/value;
• trailing comma (,) on last item to make it easier to add, remove or reorder items;
• closing brace ()) on its own new line;
• no space or new line between closing brace ()) and semi-colon (;).

// Good

$breakpoints: (

  'small': 767px,

  'medium': 992px,

  'large': 1200px,

);

// Bad

$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

#8 - Comply to File Structure

• Comply to file architecture design.
• DO NOT use gobbing import. Sass and CSS requires orderly import due to their dependency sequences for overlapping.

BAD:

@import 'abstracts/*';

@import 'vendors/*';

@import 'base/*';

@import 'layout/*';

@import 'components/*';

@import 'pages/*';

@import 'themes/*';

GOOD:

@import

  'abstracts/variables',

  'abstracts/functions',

  'abstracts/mixins',

  'abstracts/placeholders';

@import

  'vendors/bootstrap',

  'vendors/jquery-ui';

@import

  'base/reset',

  'base/typography';

@import

  'layout/navigation',

  'layout/grid',

  'layout/header',

  'layout/footer',

...

Rationale

• Gobbing does not guarantee sequences.

#9 - Media Query Breakpoints

• Tie it to the width, not the device.
• Use min-width first, slowly expanding it to the greatest width.

// Good

$breakpoints: (

  'medium': (min-width: 800px),

  'large': (min-width: 1000px),

  'huge': (min-width: 1200px),

);

// Bad

$breakpoints: (

  'tablet': (min-width: 800px),

  'computer': (min-width: 1000px),

  'tv': (min-width: 1200px),

);

#10 - DO NOT use !Important

• Like CSS, DO NOT use !Important. Refactor your Sass codes instead.

#11 - DO Use !Default; DO NOT Use !Global

• !default defines a variable default values.
• !global corrupts syntax meanings in an mismanaged project.

That's all about Sass coding style.