Skip to content
Zura Gabievi edited this page Dec 29, 2015 · 1 revision

Object mixin:

o(...) || object(...)

@include o(object) {
	display: object;
}

You can use @include object(...) {...} too

CSS Output:

.o-object {
	display: object;
}

Component mixin:

c(...) || component(...)

@include c(component) {
	display: component;
}

You can use @include component(...) {...} too

CSS Output:

.c-component {
	display: component;
}

Utility mixin:

u(...) || utility(...)

@include u(utility) {
	display: utility;
}

You can use @include utility(...) {...} too

CSS Output:

.u-utility {
	display: utility;
}

Theme mixin:

t(...) || theme(...)

@include t(theme) {
	display: theme;
}

You can use @include theme(...) {...} too

CSS Output:

.t-theme {
	display: theme;
}

Scope mixin:

s(...) || scope(...)

@include s(scope) {
	display: scope;
}

You can use @include scope(...) {...} too

CSS Output:

.s-scope {
	display: scope;
}

Hack mixin:

_(...) || hack(...)

@include _(hack) {
	display: hack;
}

You can use @include hack(...) {...} too

CSS Output:

._hack {
	display: hack;
}

QA mixin:

qa(...) || test(...)

@include qa(test) {
	display: test;
}

You can use @include test(...) {...} too

CSS Output:

.qa-test {
	display: test;
}

State mixin:

is(...) || has(...) || js(...) || state(...)

@include is(state) {
	display: state;
}

You can use @include state(..., 'has') {...} too

CSS Output:

.is-state {
	display: state;
}