Example of the BEM-style mixins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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