Skip to content

Instantly share code, notes, and snippets.

@mistakster mistakster/cool-widget.css
Last active Aug 29, 2015

Embed
What would you like to do?
Example of the BEM-style mixins
.cool-widget {
position: relative;
}
.cool-widget__title {
font: bold 20px/1 sans-serif;
}
.cool-widget__body {
font: normal 14px/1.4 sans-serif;
color: white;
}
.cool-widget_red .cool-widget__title {
color: red;
}
.cool-widget_red .cool-widget__body {
background: red;
}
.cool-widget_blue .cool-widget__title {
font-size: 30px;
}
.cool-widget_blue .cool-widget__title {
color: blue;
}
.cool-widget_blue .cool-widget__body {
background: blue;
}
.cool-widget_red.cool-widget_blue .cool-widget__title {
color: magenta;
}
.cool-widget_red.cool-widget_blue .cool-widget__body {
background: magenta;
}
.ie6 .cool-widget__title,
.ie6 .cool-widget__body,
.ie6 .cool-widget__footer {
zoom: 1;
}
// namespace
@block: ~".cool-widget";
// theme
.modifier_red() {
&__title {
color: red;
}
&__body {
background: red;
}
}
.modifier_blue() {
&__title {
color: blue;
}
&__body {
background: blue;
}
}
// special title
.modifier_big-title() {
&__title {
font-size: 30px;
}
}
// fix layout for IE
.modifier_ie() {
&__title, &__body, &__footer {
zoom: 1;
}
}
@{block} {
// primary styles
position: relative;
&__title {
font: bold 20px/1 sans-serif;
}
&__body {
font: normal 14px/1.4 sans-serif;
color: white;
}
// apply red modifier
&_red {
@{block} {
.modifier_red();
}
}
// apply blue modifier and make title bigger
&_blue {
@{block} {
.modifier_big-title();
.modifier_blue();
}
}
// combine red and blue modifiers together
&_red&_blue {
@{block} {
&__title {
color: magenta;
}
&__body {
background: magenta;
}
}
}
// global modifier
.ie6 & {
.modifier_ie();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.