Stylecow plugin to work with at-extend at-rules
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
tests
.gitignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

stylecow plugin extend

Build Status

Stylecow plugin to work with @extend using the syntax proposed by Tab Atkins.

%button {
	display: inline-block;
	padding: 1em;
}

%big-button {
	@extend %button;
	font-size: 2em;
}

%red-big-button {
	@extend %big-button;
	color: red;
}

.button {
	@extend %button;
}

.big-button {
	@extend %big-button;
}

.red-big-button {
	@extend %red-big-button;
}

.red-big-button-rounded {
	@extend %red-big-button;
	border-radius: 8px;
}

And stylecow converts to:

.red-big-button, .red-big-button-rounded, .big-button, .button {
	display: inline-block;
	padding: 1em;
}
.red-big-button, .red-big-button-rounded, .big-button {
	font-size: 2em;
}
.red-big-button, .red-big-button-rounded {
	color: red;
}
.red-big-button-rounded {
	border-radius: 8px;
}

More demos in the tests folder