separate bem-ish selectors

SublimeText · Feb 25, 2024 · c03b1b7 · c03b1b7
1 parent ec45fd9
commit c03b1b7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax
@@ -122,11 +122,7 @@ 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
+    - include: scss-bem-selector
 
 ###[ CSS PROPERTY LISTS ]######################################################
 
@@ -183,7 +179,7 @@ contexts:
     - meta_append: true
     - include: scss-expression-basic
 
-###[ SCSS DEFAULT/GLOBAL VALUES ]###############################################
+###[ SCSS DEFAULT/GLOBAL VALUES ]##############################################
 
   scss-default-operators:
     - match: \!\s*(?i:default){{break}}
@@ -193,14 +189,21 @@ contexts:
     - match: \!\s*(?i:global){{break}}
       scope: keyword.other.global.scss
 
-###[ SCSS PLACEHOLDER SELECTOR ]###############################################
+###[ SCSS SELECTORS ]##########################################################
 
   scss-placeholder-selector:
     - match: \%
       scope: entity.other.attribute-name.class.css punctuation.definition.entity.placeholder.scss
       # has same basic properties as a classname
       push: selector-class-identifier
 
+  scss-bem-selector:
+    - match: (\&)([-_]+{{ident}})
+      # &--bem_ish selectors
+      captures:
+        1: variable.language.parent.css
+        2: entity.other.attribute-name.css
+
 ###[ SCSS EXPRESSIONS ]########################################################
 
   scss-expression-basic:

diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss
@@ -201,7 +201,7 @@ title: Blogging Like a Hacker
 //=============================================================================
 .enlarge {
   font-size: 14px;
-  transition: {
+  transition: blue {
     property: font-size;
     duration: 4s;
     delay: 2s;