diff --git a/bower.json b/bower.json index a9dc975..1cddbd6 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "sass-bem", - "version": "2.5.2", + "version": "2.5.3", "main": "_bem.scss", "description": "Amazing package for sass to write bem classes, with namespaces and more advanced features.", "authors": [ diff --git a/helpers/_relations-selector.scss b/helpers/_relations-selector.scss index caebb2b..bbed7cd 100644 --- a/helpers/_relations-selector.scss +++ b/helpers/_relations-selector.scss @@ -14,15 +14,15 @@ @return unquote(".#{$block}#{$bem-modifier-separator}#{$modifier} &"); } -/// Selector of with relationship. +/// Selector of adjacent relationship. /// /// @param {String} $element - Name of element that will come after ".[block]__" /// /// @returns {String} - & + .[block]__[element] /// -/// @see {mixin} with +/// @see {mixin} next -@function with-selector($element) { +@function next-selector($element) { $block: get-block(unquote("#{&}")); @return unquote("& + .#{$block}#{$bem-element-separator}#{$element}"); @@ -41,6 +41,20 @@ @return unquote("& + #{$last}"); } +/// Selector of sibling relationship. +/// +/// @param {String} $element - Name of element that will come after ".[block]__" +/// +/// @returns {String} - & ~ .[block]__[element] +/// +/// @see {mixin} with + +@function with-selector($modifier) { + $block: get-block(unquote("#{&}")); + + @return unquote("& ~ .#{$block}#{$bem-element-separator}#{$element}"); +} + /// Selector of while relationship. /// /// @param {String} $modifier - Name of modifier that will come after ".[block]--" diff --git a/mixins/_relations.scss b/mixins/_relations.scss index bbb01d3..c630207 100644 --- a/mixins/_relations.scss +++ b/mixins/_relations.scss @@ -24,26 +24,26 @@ } } -/// Element with another element separated by plus sign +/// Element with next element separated by plus sign /// /// @param {String} $element - Name of element that will be styled with parent element. /// /// @example scss - Usage /// @include b('list') { /// @include e('item') { -/// @include with('title') { +/// @include next('title') { /// color: black; /// } /// } /// } /// /// @example css - Output -/// .list__item .list__title { +/// .list__item + .list__title { /// color: black; /// } -@mixin with($element) { - #{with-selector($element)} { +@mixin next($element) { + #{next-selector($element)} { @content; } } @@ -70,6 +70,30 @@ } } +/// Element with sibling elements separated by equivalency sign +/// +/// @param {String} $element - Name of element that will be styled with parent element. +/// +/// @example scss - Usage +/// @include b('list') { +/// @include e('item') { +/// @include with('title') { +/// color: black; +/// } +/// } +/// } +/// +/// @example css - Output +/// .list__item ~ .list__title { +/// color: black; +/// } + +@mixin with($element) { + #{with-selector($element)} { + @content; + } +} + /// While two selectors are on same element /// /// @param {String} $modifier - Name of modifier that will follow parent modifier. @@ -92,4 +116,4 @@ #{while-selector($modifier)} { @content; } -} \ No newline at end of file +} diff --git a/package.json b/package.json index ea82b83..2e3975b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sass-bem", - "version": "2.5.2", + "version": "2.5.3", "description": "Amazing package for sass to write bem classes, with namespaces and more advanced features.", "main": "_bem.scss", "repository": {