diff --git a/sass/_bemify.scss b/sass/_bemify.scss index 32b4269..3bac717 100644 --- a/sass/_bemify.scss +++ b/sass/_bemify.scss @@ -16,15 +16,23 @@ // .block__element--is-active {} $combined-state-selectors: true !default; +// Output combined modifier selectors like: +// .block__element.block__element--modifier {} +// Set to false to output single, non-combined modifier class: +// .block__element--modifier {} +$combined-modifier-selectors: false !default; + // .block[separator]element: -$element-separator: "__" !default; +$element-separator: '__' !default; // .block[separator]modifier: -$modifier-separator: "--" !default; +$modifier-separator: '--' !default; // The default prefix for state modifier selectors, will be combined with $modifier-separator: -$state-prefix: "is" !default; +$state-prefix: 'is' !default; +// The default prefix for section selectors, will be combined with the given $name +$section-prefix: 'section' !default; @@ -48,9 +56,20 @@ $state-prefix: "is" !default; @mixin modifier($name) { - @at-root { - &#{$modifier-separator}#{$name} { - @content; + @if $combined-modifier-selectors == true { + @at-root { + $self: &; + + #{$self}#{$self}#{$modifier-separator}#{$name} { + @content; + } + } + + } @else { + @at-root { + &#{$modifier-separator}#{$name} { + @content; + } } } } @@ -63,8 +82,7 @@ $state-prefix: "is" !default; @content; } } - } - @else { + } @else { @at-root { &#{$modifier-separator}#{$prefix}-#{$state} { @content; @@ -74,6 +92,11 @@ $state-prefix: "is" !default; } +@mixin section($name) { + @include block(#{$section-prefix}-#{$name}) { + @content; + } +} // ALIASES