diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index 0546dca3..5cff87d4 100644 --- a/Syntaxes/SCSS.sublime-syntax +++ b/Syntaxes/SCSS.sublime-syntax @@ -122,6 +122,11 @@ contexts: - meta_prepend: true - include: scss-interpolation - include: scss-placeholder-selector + - match: (\&)([-_]+{{ident}}) + # &--bem_ish selectors + captures: + 1: variable.language.parent.css + 2: entity.other.attribute-name.css ###[ CSS PROPERTY LISTS ]###################################################### @@ -280,7 +285,6 @@ contexts: - other-function-arguments-list-body - function-arguments-list-begin - ###[ SCSS OPERATORS ]########################################################## scss-operators: diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss index 5639d99a..91c726ba 100644 --- a/Tests/syntax_test_scss.scss +++ b/Tests/syntax_test_scss.scss @@ -909,7 +909,6 @@ $widths: 50px, 30px, 100px; @return $before + $insert + $after; } - //============================================================================= // Other Functions // https://sass-lang.com/documentation/at-rules/function/#other-functions @@ -929,3 +928,54 @@ $accent: #e1d7d2; // ^ punctuation.section.group.begin.css // ^ punctuation.separator.sequence.css // ^ punctuation.terminator.rule.css + +//============================================================================= +// Extend +// https://sass-lang.com/documentation/at-rules/extend/ +//============================================================================= +.error { + border: 1px #f00; + background-color: #fdd; + + &--serious { +//^^^^^^^^^^ meta.selector.css +//^ variable.language.parent.css +// ^^^^^^^^^ entity.other.attribute-name.css + @extend .error; +// ^^^^^^^^^^^^^^ meta.at-rule.extend.scss +// ^^^^^^^ keyword.control.directive.extend.scss +// ^^^^^^ meta.selector.css +// ^ punctuation.definition.keyword.scss +// ^ punctuation.terminator.rule.css + border-width: 3px; + } +} + +// https://sass-lang.com/documentation/at-rules/extend/#placeholder-selectors +.alert:hover, %strong-alert { +// ^^^^^^^^^^^^^ entity.other.attribute-name.class.css +// ^ punctuation.definition.entity.placeholder.scss + font-weight: bold; +} + +%strong-alert:hover { +//^^^^^^^^^^^^^^^^^ meta.selector.css +//^^^^^^^^^^^ entity.other.attribute-name.class.css +// ^ punctuation.definition.pseudo-class.css +// ^^^^^ entity.other.pseudo-class.css +//<- punctuation.definition.entity.placeholder.scss + color: red; +} + +// https://sass-lang.com/documentation/at-rules/extend/#extend-in-media +@media screen and (max-width: 600px) { + .error--serious { + @extend .error; +// ^^^^^^^^^^^^^^ meta.at-rule.extend.scss +// ^^^^^^^ keyword.control.directive.extend.scss +// ^^^^^^ meta.selector.css +// ^ punctuation.definition.keyword.scss +// ^ punctuation.terminator.rule.css + + } +}