diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index 5cff87d4..e011cc37 100644 --- a/Syntaxes/SCSS.sublime-syntax +++ b/Syntaxes/SCSS.sublime-syntax @@ -337,7 +337,16 @@ contexts: - meta_scope: meta.at-rule.scss - include: terminator-pop - include: values - - match: '(@)(warn|error){{break}}' + - match: '(@)(error){{break}}' + captures: + 0: keyword.control.at-rule.error.scss + 1: punctuation.definition.keyword.scss + push: + - meta_scope: meta.at-rule.scss + - include: terminator-pop + - include: scss-expression + - include: quoted-strings + - match: '(@)(warn){{break}}' captures: 0: keyword.control.at-rule.warn.scss 1: punctuation.definition.keyword.scss @@ -345,6 +354,7 @@ contexts: - meta_scope: meta.at-rule.scss - include: terminator-pop - include: scss-expression + - include: quoted-strings - match: '(@)(debug){{break}}' captures: 0: keyword.control.at-rule.debugger.scss diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss index 91c726ba..0522a0fa 100644 --- a/Tests/syntax_test_scss.scss +++ b/Tests/syntax_test_scss.scss @@ -979,3 +979,66 @@ $accent: #e1d7d2; } } + +//============================================================================= +// Error +// https://sass-lang.com/documentation/at-rules/error/ +//============================================================================= +@mixin reflexive-position($property, $value) { + @if $property != left and $property != right { + @error "Property #{$property} must be either left or right."; +// ^^^^^^^^^^^^^^^^^ meta.at-rule.scss +// ^^^^^^ meta.at-rule.scss +// ^^^^^^ keyword.control.at-rule.error.scss +// ^ punctuation.definition.keyword.scss +// ^^^^^^^^^^ string.quoted +// ^^^^^^^^^^ meta.interpolation +// ^^^^^^ string.quoted + + } + + $left-value: if($property == right, initial, $value); + $right-value: if($property == right, $value, initial); + + left: $left-value; + right: $right-value; + [dir=rtl] & { + left: $right-value; + right: $left-value; + } +} + +//============================================================================= +// Warn +// https://sass-lang.com/documentation/at-rules/warn/ +//============================================================================= +@mixin prefix($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if not index($known-prefixes, $prefix) { + @warn "Unknown prefix #{$prefix}."; +// ^^^^^ meta.at-rule.scss keyword.control.at-rule.warn.scss +// ^ punctuation.definition.keyword.scss +// ^^^^^^^^^^ string.quoted +// ^^^^ meta.interpolation + } + + -#{$prefix}-#{$property}: $value; + } + #{$property}: $value; +} + +//============================================================================= +// Debug +// https://sass-lang.com/documentation/at-rules/debug/ +//============================================================================= +@mixin inset-divider-offset($offset, $padding) { + $divider-offset: (2 * $padding) + $offset; + @debug "divider offset: #{$divider-offset}"; +//^^^^^^ meta.at-rule.scss keyword.control.at-rule.debugger.scss +//^ punctuation.definition.keyword.scss +// ^^^^^^^^^^ string.quoted +// ^^ meta.interpolation + + margin-left: $divider-offset; + width: calc(100% - #{$divider-offset}); +}