// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// Sass: The Way to Define Robust CSS Module/Component
//
// Using back-slash as the namespace separator in HTML/CSS
// https://gist.github.com/whizark/ea2ba0ff3f47956fda0f
//
// Other ideas
// https://github.com/whizark/xass#ideas
// You may use single back-slash as the namespace
// for Mixin/Function/Placeholder selector in Sass,
// but you must use double back-slash in CSS.
// The reason I use placeholder for base definitions,
// wrap it with mixin
// and use mixin in other modules/client code is
// that extending is fragile and a bad practice for extension.
// Mixin encapsulates inner extending in this case.
// Module Definitions
// ========================
// Defines base styles
// for Horizontal List.
%vendor\\horizontal-list {
list-style: none;
margin: 0;
padding: 0;
}
// Wraps base styles and extends them
// for Horizontal List.
@mixin vendor\\horizontal-list($spacing: .5em) {
// Wraping placeholder, it reduces duplicated code
// and it's opened for extension.
@extend %vendor\\horizontal-list;
// Lobotomized Owl Selector
// http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
> * + * {
margin-left: $spacing;
}
}
// Defines base styles
// for Horizontal List Item.
%vendor\\horizontal-list\\item {
display: inline-block;
margin: 0;
padding: 0;
}
// Wraps base styles and extends them
// for Horizontal List Item.
@mixin vendor\\horizontal-list\\item() {
@extend %vendor\\horizontal-list\\item;
}
// Client Code: Concrete Classes
// =====================================================
// Using mixin, it may accept arguments
// and it's closed for modification.
.horizontal-list {
@include vendor\\horizontal-list();
}
.horizontal-list\\item {
@include vendor\\horizontal-list\\item();
}