add default and global flags

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

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax
@@ -135,6 +135,27 @@ contexts:
     - meta_append: true
     - include: scss-expression
 
+  value-prototype:
+    - meta_append: true
+    - include: scss-default-operators
+    - include: scss-global-operators
+
+###[ SCSS DEFAULT/GLOBAL VALUES ]###############################################
+
+  scss-default-operators:
+    - match: \!\s*(?i:default){{break}}
+      scope: keyword.other.default.scss
+
+  scss-global-operators:
+    - match: \!\s*(?i:global){{break}}
+      scope: keyword.other.global.scss
+
+###[ CSS FUNCTION ARGUMENTS ]##################################################
+
+  function-arguments-prototype:
+    - meta_append: true
+    - include: scss-expression
+
 ###[ SCSS PLACEHOLDER SELECTOR ]###############################################
 
   scss-placeholder-selector:

diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss
@@ -121,13 +121,12 @@ title: Blogging Like a Hacker
     // This is parsed as a normal function call that takes an arithmetic expression.
     src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");
     // This is parsed as an interpolated special function.
-/* @TODO: unsure how this should be handled, */
+/* TODO: unsure how this should be handled, */
     src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");
 //           ^^^^^^^^^^^^^^^^^^^^ meta.interpolation.scss
 //                               ^ -meta.interpolation.scss
 //             ^^^^^^^^^^^^^^^^^ variable.other.scss
 //             ^ punctuation.definition.variable.scss
-//                               ^ meta.string.css
 }
 
 //=============================================================================
@@ -325,3 +324,53 @@ $warn: #dfa612;
 //        ^         punctuation.definition.entity.placeholder.scss
   color: #4285f4;
 }
+
+//=============================================================================
+// Variables
+// https://sass-lang.com/documentation/variables/
+//=============================================================================
+$base-color: #c6538c;
+// ^^^^^^^^ variable.declaration.scss
+//         ^ - variable.declaration.scss
+//<-        punctuation.definition.variable.scss
+$border-dark: rgba($base-color, 0.88);
+// ^^^^^^^^^ variable.declaration.scss
+//          ^ - variable.other.scss
+//<-         punctuation.definition.variable.scss
+//                 ^^^^^^^^^^^ variable.other.scss
+//                            ^ - variable.other.scss
+//                 ^           punctuation.definition.variable.scss
+
+.alert {
+  border: 1px solid $border-dark;
+}
+
+//=============================================================================
+// Default Values
+// https://sass-lang.com/documentation/variables/#default-values
+//=============================================================================
+$black: #000 !important;
+//           ^^^^^^^^^^ keyword.other.important.css
+$black: #000 !default;
+//           ^^^^^^^^ keyword.other.default.scss
+$border-radius: 0.25rem !default;
+//                      ^^^^^^^^ keyword.other.default.scss
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+
+code {
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+}
+
+//=============================================================================
+// Shadowing (Global Values)
+// https://sass-lang.com/documentation/variables/#shadowing
+//=============================================================================
+
+$variable: first global value;
+
+.content {
+  $variable: second global value !global;
+//                               ^^^^^^^ keyword.other.global.scss
+  value: $variable;
+}