add placeholder selectors

SublimeText · Feb 4, 2024 · 4fa1ef2 · 4fa1ef2
1 parent 0b4d53b
commit 4fa1ef2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax
@@ -24,6 +24,7 @@ variables:
   tag_name_begin: (?=[[:alpha:]]|@+{)
 
   property_or_selector_begin: (?={{selector_start}}|[-&]|{{ident_start}})
+  nested_selector_start: '[%.:#&*\[{{combinator_char}}]'
 
 ###############################################################################
 
@@ -117,6 +118,10 @@ contexts:
     - match: (?=[;)}])
       pop: 1
 
+  selector-body:
+    - meta_append: true
+    - include: scss-placeholder-selector
+
 ###[ CSS PROPERTY LISTS ]######################################################
 
   property-list-body:
@@ -130,6 +135,14 @@ contexts:
     - meta_append: true
     - include: scss-expression
 
+###[ SCSS PLACEHOLDER SELECTOR ]###############################################
+
+  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 EXPRESSIONS ]########################################################
 
   scss-expression:

diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss
@@ -292,3 +292,36 @@ $warn: #dfa612;
   }
 }
 
+//=============================================================================
+// Placeholder Selectors
+// https://sass-lang.com/documentation/style-rules/placeholder-selectors/
+//=============================================================================
+.alert:hover, %strong-alert {
+//            ^^^^^^^^^^^^^ entity.other.attribute-name.class.css
+//            ^             punctuation.definition.entity.placeholder.scss
+  font-weight: bold;
+}
+
+%strong-alert:hover {
+//^^^^^^^^^^^ entity.other.attribute-name.class.css
+//<-          punctuation.definition.entity.placeholder.scss
+  color: red;
+}
+
+%toolbelt {
+//^^^^^^^ entity.other.attribute-name.class.css
+//<-      punctuation.definition.entity.placeholder.scss
+  box-sizing: border-box;
+  border-top: 1px rgba(#000, .12) solid;
+  padding: 16px 0;
+  width: 100%;
+
+  &:hover { border: 2px rgba(#000, .5) solid; }
+}
+
+.action-buttons {
+  @extend %toolbelt;
+//        ^^^^^^^^^ entity.other.attribute-name.class.css
+//        ^         punctuation.definition.entity.placeholder.scss
+  color: #4285f4;
+}