Mixins

Block mixin:

b(...) || block(...)

@include b(list) {
	list-style-type: disc;
}

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

CSS Output:

.list {
	list-style-type: disc;
}

---

Element mixin:

e(...) || element(...)

@include b(list) {
	@include e(item) {
		padding: 0.5em 1em;
	}

	@include e(first second third) {
		color: green;
	}
}

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

CSS Output:

.list__item {
	padding: 0.5em 1em;
}

.list__first,
.list__second,
.list__third {
	color: green;
}

---

Modifier mixin:

m(...) || modifier(...)

@include b(list) {
	@include m(ordered) {
		list-style-type: decimal;
	}

	@include m(alpha beta gamma) {
		color: orange;
	}
}

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

CSS Output:

.list--ordered {
	list-style-type: decimal;
}

.list--alpha,
.list--beta,
.list--gamma {
	color: orange;
}

---

Relations

at(...)

@include b(list) {
	@include e(item) {
		@include at(ordered) {
			padding: 1em;
		}
	}
}

CSS Output:

.list--ordered .list__item {
	padding: 1em;
}

---

duo()

@include b(list) {
	@include e(item) {
		@include duo {
			margin-left: 10px;
		}
	}
}

CSS Output:

.list__item + .list__item {
	margin-left: 10px;
}

---

with(...)

@include b(list) {
	@include e(item) {
		@include with(element) {
			margin-left: 5px;
		}
	}
}

CSS Output:

.list__item + .list__element {
	margin-left: 5px;
}

---

while(...)

@include b(list) {
	@include m(inline) {
		@include while(odered) {
			list-style-type: decimal;
		}
	}
}

CSS Output:

.list--inline.list--odered {
	list-style-type: decimal;
}

---

States

is(...)

a {
	@include is(active) {
		font-weight: bold;
	}
}

CSS Output:

a.is-active {
	font-weight: bold;
}

---

has(...)

a {
	@include has(child) {
		margin-left: 5px;
	}
}

CSS Output:

a.has-child {
	margin-left: 5px;
}

---

js(...)

div {
	@include js(target) {
		border: 1px dashed orange;
	}
}

CSS Output:

div.js-target {
	border: 1px dashed orange;
}

---

hover()

a {
	@include hover {
		color: red;
	}
}

CSS Output:

a:hover {
	color: red;
}

---

focus()

a {	
	@include focus {
		color: blue;
	}
}

CSS Output:

a:focus {
	color: blue;
}

---

active()

a {		
	@include active {
		color: green;
	}
}

CSS Output:

a:active {
	color: green;
}

---

checked()

input {		
	@include checked {
		display: block;
	}
}

CSS Output:

input:checked {
	display: block;
}

---

disabled()

button {		
	@include disabled {
		opacity: 0.8;
	}
}

CSS Output:

button[disabled] {
	opacity: 0.8;
}

---

readonly()

input {		
	@include readonly {
		border-color: #cecece;
	}
}

CSS Output:

input[readonly] {
	border-color: #cecece;
}

---

editable() || contenteditable()

.box {		
	@include contenteditable {
		border-color: orange;
	}
}

CSS Output:

.box[contenteditable="true"] {
	border-color: orange;
}

Pseudo Elements

first()

a {
	@include first {
		color: orange;
	}
}

CSS Output:

a:first-of-type {
	color: orange;
}

---

last()

a {
	@include last {
		color: blue;
	}
}

CSS Output:

a:last-of-type {
	color: blue;
}

---

even()

a {
	@include even {
    	color: green;
    }
}

CSS Output:

a:nth-child(even) {
	color: green;
}

---

odd()

a {
	@include odd {
		color: aqua;
	}
}

CSS Output:

a:nth-child(odd) {
	color: aqua;
}

---

before()

a {
	@include before {
		color: orange;
	}
}

CSS Output:

a:before {
	color: orange;
}

---

after()

a {
	@include after {
		color: sky;
	}
}

CSS Output:

a:after {
	color: sky;
}

---

Parse mixin:

parse(...)

@include b('block') {
	@include parse(':hover', 'm:hover', '[disabled]') {
		background: transparent;
	}
}

In this example :hover will do &:hover and m:hover will find mixin with name "m" and pass "hover" as argument.

CSS Output:

.block:hover, .block--hover, .block[disabled] {
	background: transparent;
}