Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Herokid/3e58c172e1980fde4f3bf811a873eb52 to your computer and use it in GitHub Desktop.
Save Herokid/3e58c172e1980fde4f3bf811a873eb52 to your computer and use it in GitHub Desktop.
$_NS_ : 'my-namespace_'
// ###################################
// Create class with namespace
//
// SASS code:
// +ns-class(foo)
// color : red
// +ns-class(class1, class2)
// color : red
//
// CSS generate
// .my-namespace_foo { color : red }
// .my-namespace_class1 { color : red }
// .my-namespace_class2 { color : red }
// ###################################
=ns-class($classnames...)
@each $classname in $classnames
.#{$_NS_}#{$classname}
@content
// ###################################
// When some class has another namespace classname
//
// SASS code:
// +ns-class(foo)
// color : red
// +with-ns-class(var)
// color : blue
//
// CSS generate
// .my-namespace_foo { color : red }
// .my-namespace_foo.my-namespace_var { color : blue }
// ###################################
=with-ns-class($classname)
&.#{$_NS_}#{$classname}
@content
// ###################################
// Extend from namespace classname
//
// SASS code:
// +ns-class(foo)
// color : red
// +ns-class(var)
// +extend-ns-class(foo)
// +ns-id(id1)
// +extend-ns-id(foo)
//
// CSS generate
// #my-namespace_id1, .my-namespace_var, .my-namespace_foo { color : red }
// ###################################
=extend-ns-class($classname)
@extend .#{$_NS_}#{$classname}
// ###################################
// When selector has a parent namespace classname
// SASS code:
// +ns-class(foo)
// color : red
// +with-parent-ns-class(parent-class)
// color : blue
//
// CSS generate
// .my-namespace_foo { color : red }
// .my-namespace_parent-class .my-namespace_foo { color : blue }
// ###################################
=with-parent-ns-class($classname)
.#{$_NS_}#{$classname} &
@content
// ###################################
// Create ID with namespace
//
// SASS code:
// +ns-id(foo)
// color : red
// +ns-id(id1, id2)
// color : red
//
// CSS generate
// #my-namespace_foo { color : red }
// #my-namespace_id1 { color : red }
// #my-namespace_id2 { color : red }
// ###################################
=ns-id($ids...)
@each $id in $ids
##{$_NS_}#{$id}
@content
// ###################################
// Extend from namespace ID
//
// SASS code:
// +ns-id(foo)
// color : red
// +ns-id(var)
// +extend-ns-id(foo)
// +ns-class(class1)
// +extend-ns-id(foo)
//
// CSS generate
// .my-namespace_class1, #my-namespace_var, #my-namespace_foo { color : red }
// ###################################
=extend-ns-id($id)
@extend ##{$_NS_}#{$id}
// ###################################
// When selector has a parent namespace ID
//
// SASS code:
// +ns-id(foo)
// color : red
// +with-parent-ns-id(parent-id)
// color : blue
//
// CSS generate
// #my-namespace_foo { color : red }
// #my-namespace_parent-id #my-namespace_foo { color : blue }
// ###################################
=with-parent-ns-id($id)
##{$_NS_}#{$id} &
@content
@Herokid
Copy link
Author

Herokid commented Jun 28, 2016

Simple but nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment