//// /// @group BEM /// /// @access public //// /// /// Generate a new suffix. /// /// @param {string} $name - Suffix name /// /// @content /// /// @throw If the element is not preceded by a block or modifier. /// /// @example scss - Using a suffix /// @include iro-bem-utility('hidden') { /// display: none; /// /// @media (max-width: 320px) { /// @include iro-bem-suffix('phone') { /// display: none; /// } /// } /// /// @media (max-width: 768px) { /// @include iro-bem-suffix('tablet') { /// display: none; /// } /// } /// } /// /// // Generates: /// /// .u-hidden { /// display: none; /// } /// /// @media (max-width: 320px) { /// .u-hidden@phone { /// display: none; /// } /// } /// /// @media (max-width: 768px) { /// .u-hidden@tablet { /// display: none; /// } /// } /// @mixin iro-bem-suffix($name) { $result: iro-bem-suffix($name); $selector: nth($result, 1); $context: nth($result, 2); @include iro-bem-validate( 'suffix', (name: $name), $selector, $context ); @include iro-context-push($iro-bem-context-id, $context...); @at-root #{$selector} { @content; } @include iro-context-pop($iro-bem-context-id); } /// /// Generate a new suffix. Check the respective mixin documentation for more information. /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// /// @see {mixin} iro-bem-suffix /// @function iro-bem-suffix($name) { // // Suffixes can be used on block, element and modifier. // $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); @if not iro-selector-suffix-match(&, $parent-selector) { // // The current selector doesn't match the parent selector. // The user manually added a selector between parent context and this suffix call. // This case is forbidden because any outcome semantically wouldn't make sense: // - {b,e,m} [manual selector] {b,e,m}@suffix // - {b,e,m}@suffix [manual selector] // The first case would make the modifier behave like an element. // The second case is unintuitive, the code would be more clear by nesting the manual // selector in the suffix instead. // @error 'A suffix must be an immediate child of the parent context'; } // // The suffix part can simply be appended. // Possible outcomes: // - {b,e,m}@suffix // $selector: selector-append(&, $iro-bem-suffix-separator + $name); $context: 'suffix', ( 'name': $name, 'selector': $selector ); @return $selector $context; }