Sass Naming Convention #sass #draft

sass-naming-convention.md

Sass Naming Convention

A Sass Naming Convention for Sass libraries.

ToC

• Basics
• Phrase and Compound Word
• Namespace
• Private Variable/Function/Mixin
• Structure
• API (Facade)
• License

Basics

Use lowercase for variables/functions/mixins.

Variable

$variable: value;

Function

@function function() {}

Mixin

@mixin mixin() {}

Phrase and Compound Word

Use - for a phrase/compound word.

Variable

$some-variable: value;

Function

@function some-function() {}

Mixin

@mixin some-mixin() {}

Namespace

Use \ as a namespace separator.

Variable

$vendor\namespace\variable: value;

Function

@function vendor\namespace\function() {}

Mixin

@mixin vendor\namespace\mixin() {}

Caveat

A function name in string should be escaped.

@function vendor\namespace\function() {
  @return true;
}

@function other-function() {
  @return call("vendor\\namespace\\function");
}

Private Variable/Function/Mixin

Add a leading - for private variables/functions/mixins.

Variable

$vendor\namespace\-private-variable: value;

Function

@function vendor\namespace\-private-function() {}

Mixin

@mixin vendor\namespace\-private-mixin() {}

Structure

WIP

• vender/namespace/_configuration.scss
• vender/namespace/_library.scss
• vender/namespace/_provider.scss (required)

API

• vender/namespace/api/_configuration.scss
• vender/namespace/api/_library.scss
• vender/namespace/api/_provider.scss (required if you provide API)

Configuration

// File: vender/namespace/_configuration.scss

$vendor\namespace\variable: default-value !default;

Library

// File: vender/namespace/_library.scss

// Functions & Mixins

Provider

// File: vender/namespace/_provider.scss

// Register component & the dependencies.
// (WIP)

// Import component files.
@import 'configuratin';
@import 'library';

// Check the variables and throw @error (or @warn).

API (Facade)

Define prefixed Variables, Functions, Mixins as the API (Facade) if you need.

Variable

// File: vendor/namespace/library/_configuration.scss

$vendor\namespace\variable: default-value !default;

// File: vendor/namespace/library/api/_configuration.scss

$v-variable: $vendor\namespace\variable !default;

// Set the API variable back to the library variable.
$vendor\namespace\variable: $v-variable;

// Client code

$v-variable: user-defined-value;

@import "vendor/namespace/library/_provider.scss";
@import "vendor/namespace/library/api/_provider.scss";

Function

// File: vendor/namespace/library/api/_library.scss

@function v-function() {
  @return vendor\namespace\function();
}

Mixin

// File: vendor/namespace/library/api/_library.scss

@mixin v-mixin() {
  @include vendor\namespace\mixin();
}

License

Copyright (C) 2014-2015 Whizark. Released under the MIT License.