A Sass Naming Convention for Sass libraries.
- Basics
- Phrase and Compound Word
- Namespace
- Private Variable/Function/Mixin
- Structure
- API (Facade)
- License
Use lowercase for variables/functions/mixins.
$variable: value;
@function function() {}
@mixin mixin() {}
Use -
for a phrase/compound word.
$some-variable: value;
@function some-function() {}
@mixin some-mixin() {}
Use \
as a namespace separator.
$vendor\namespace\variable: value;
@function vendor\namespace\function() {}
@mixin vendor\namespace\mixin() {}
A function name in string should be escaped.
@function vendor\namespace\function() {
@return true;
}
@function other-function() {
@return call("vendor\\namespace\\function");
}
Add a leading -
for private variables/functions/mixins.
$vendor\namespace\-private-variable: value;
@function vendor\namespace\-private-function() {}
@mixin vendor\namespace\-private-mixin() {}
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)
// File: vender/namespace/_configuration.scss
$vendor\namespace\variable: default-value !default;
// File: vender/namespace/_library.scss
// Functions & Mixins
// 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).
Define prefixed Variables, Functions, Mixins as the API (Facade) if you need.
// 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";
// File: vendor/namespace/library/api/_library.scss
@function v-function() {
@return vendor\namespace\function();
}
// File: vendor/namespace/library/api/_library.scss
@mixin v-mixin() {
@include vendor\namespace\mixin();
}
Copyright (C) 2014-2015 Whizark. Released under the MIT License.