diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index 3312daab..1b355c3d 100644 --- a/Syntaxes/SCSS.sublime-syntax +++ b/Syntaxes/SCSS.sublime-syntax @@ -140,6 +140,10 @@ contexts: - include: scss-default-operators - include: scss-global-operators + at-keyframe-identifier: + - meta_prepend: true + - include: scss-interpolation + ###[ SCSS DEFAULT/GLOBAL VALUES ]############################################### scss-default-operators: diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss index 5893d50a..494000e7 100644 --- a/Tests/syntax_test_scss.scss +++ b/Tests/syntax_test_scss.scss @@ -366,7 +366,6 @@ code { // Shadowing (Global Values) // https://sass-lang.com/documentation/variables/#shadowing //============================================================================= - $variable: first global value; .content { @@ -374,3 +373,37 @@ $variable: first global value; // ^^^^^^^ keyword.other.global.scss value: $variable; } + +//============================================================================= +// Interpolation +// https://sass-lang.com/documentation/interpolation/ +//============================================================================= +@mixin corner-icon($name, $top-or-bottom, $left-or-right) { + .icon-#{$name} { + background-image: url("/icons/#{$name}.svg"); +// ^^^^^^^^ meta.interpolation.scss + position: absolute; + #{$top-or-bottom}: 0; +// ^^^^^^^^^^^^^^^^^ meta.interpolation.scss + #{$left-or-right}: 0; +// ^^^^^^^^^^^^^^^^^ meta.interpolation.scss + } +} + +@mixin inline-animation($duration) { + $name: inline-#{unique-id()}; +// ^^^^^^^^^^^^^^ meta.interpolation.scss + +// FYI: meta.at-rule.keyframe.css does not apply to the interpolated bit due to clear_scopes + @keyframes #{$name} { +// ^^^^^^^^^^ meta.at-rule.keyframe.css +// ^ meta.at-rule.keyframe.css +// ^^^^^^^^^ keyword.control.directive.css +// ^^^^^^^^ meta.interpolation.scss + @content; + } + + animation-name: $name; + animation-duration: $duration; + animation-iteration-count: infinite; +}