diff options
Diffstat (limited to 'src/bem/_suffix.scss')
| -rw-r--r-- | src/bem/_suffix.scss | 37 |
1 files changed, 21 insertions, 16 deletions
diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss index b103c9f..2ddb54d 100644 --- a/src/bem/_suffix.scss +++ b/src/bem/_suffix.scss | |||
| @@ -4,6 +4,11 @@ | |||
| 4 | /// @access public | 4 | /// @access public |
| 5 | //// | 5 | //// |
| 6 | 6 | ||
| 7 | @use './validators'; | ||
| 8 | @use './vars'; | ||
| 9 | @use '../functions'; | ||
| 10 | @use '../contexts'; | ||
| 11 | |||
| 7 | /// | 12 | /// |
| 8 | /// Generate a new suffix. | 13 | /// Generate a new suffix. |
| 9 | /// | 14 | /// |
| @@ -14,17 +19,17 @@ | |||
| 14 | /// @throw If the element is not preceded by a block or modifier. | 19 | /// @throw If the element is not preceded by a block or modifier. |
| 15 | /// | 20 | /// |
| 16 | /// @example scss - Using a suffix | 21 | /// @example scss - Using a suffix |
| 17 | /// @include iro-bem-utility('hidden') { | 22 | /// @include utility('hidden') { |
| 18 | /// display: none; | 23 | /// display: none; |
| 19 | /// | 24 | /// |
| 20 | /// @media (max-width: 320px) { | 25 | /// @media (max-width: 320px) { |
| 21 | /// @include iro-bem-suffix('phone') { | 26 | /// @include suffix('phone') { |
| 22 | /// display: none; | 27 | /// display: none; |
| 23 | /// } | 28 | /// } |
| 24 | /// } | 29 | /// } |
| 25 | /// | 30 | /// |
| 26 | /// @media (max-width: 768px) { | 31 | /// @media (max-width: 768px) { |
| 27 | /// @include iro-bem-suffix('tablet') { | 32 | /// @include suffix('tablet') { |
| 28 | /// display: none; | 33 | /// display: none; |
| 29 | /// } | 34 | /// } |
| 30 | /// } | 35 | /// } |
| @@ -48,23 +53,23 @@ | |||
| 48 | /// } | 53 | /// } |
| 49 | /// } | 54 | /// } |
| 50 | /// | 55 | /// |
| 51 | @mixin iro-bem-suffix($name) { | 56 | @mixin suffix($name) { |
| 52 | $result: iro-bem-suffix($name); | 57 | $result: suffix($name); |
| 53 | $selector: nth($result, 1); | 58 | $selector: nth($result, 1); |
| 54 | $context: nth($result, 2); | 59 | $context: nth($result, 2); |
| 55 | 60 | ||
| 56 | @include iro-bem-validate( | 61 | @include validators.validate( |
| 57 | 'suffix', | 62 | 'suffix', |
| 58 | (name: $name), | 63 | (name: $name), |
| 59 | $selector, | 64 | $selector, |
| 60 | $context | 65 | $context |
| 61 | ); | 66 | ); |
| 62 | 67 | ||
| 63 | @include iro-context-push($iro-bem-context-id, $context...); | 68 | @include contexts.push(vars.$context-id, $context...); |
| 64 | @at-root #{$selector} { | 69 | @at-root #{$selector} { |
| 65 | @content; | 70 | @content; |
| 66 | } | 71 | } |
| 67 | @include iro-context-pop($iro-bem-context-id); | 72 | @include contexts.pop(vars.$context-id); |
| 68 | } | 73 | } |
| 69 | 74 | ||
| 70 | /// | 75 | /// |
| @@ -72,21 +77,21 @@ | |||
| 72 | /// | 77 | /// |
| 73 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 78 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
| 74 | /// | 79 | /// |
| 75 | /// @see {mixin} iro-bem-suffix | 80 | /// @see {mixin} suffix |
| 76 | /// | 81 | /// |
| 77 | @function iro-bem-suffix($name) { | 82 | @function suffix($name) { |
| 78 | // | 83 | // |
| 79 | // Suffixes can be used on block, element and modifier. | 84 | // Suffixes can be used on block, element and modifier. |
| 80 | // | 85 | // |
| 81 | 86 | ||
| 82 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 87 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
| 83 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | 88 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
| 84 | $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); | 89 | $noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix'); |
| 85 | 90 | ||
| 86 | $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); | 91 | $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier'); |
| 87 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 92 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
| 88 | 93 | ||
| 89 | @if not iro-selector-suffix-match(&, $parent-selector) { | 94 | @if not functions.selector-suffix-match(&, $parent-selector) { |
| 90 | // | 95 | // |
| 91 | // The current selector doesn't match the parent selector. | 96 | // The current selector doesn't match the parent selector. |
| 92 | // The user manually added a selector between parent context and this suffix call. | 97 | // The user manually added a selector between parent context and this suffix call. |
| @@ -107,7 +112,7 @@ | |||
| 107 | // - {b,e,m}@suffix | 112 | // - {b,e,m}@suffix |
| 108 | // | 113 | // |
| 109 | 114 | ||
| 110 | $selector: selector-append(&, $iro-bem-suffix-separator + $name); | 115 | $selector: selector-append(&, vars.$suffix-separator + $name); |
| 111 | 116 | ||
| 112 | $context: 'suffix', ( | 117 | $context: 'suffix', ( |
| 113 | 'name': $name, | 118 | 'name': $name, |
