From fa3d66e8ac0c561e0013832da4c687f3c82aa08a Mon Sep 17 00:00:00 2001 From: Koen Lagveen Date: Sun, 4 Feb 2024 17:49:39 +0100 Subject: [PATCH] add default and global flags --- Syntaxes/SCSS.sublime-syntax | 21 ++++++++++++++ Tests/syntax_test_scss.scss | 53 ++++++++++++++++++++++++++++++++++-- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index 091a372e..3312daab 100644 --- 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 index 4bbc67d1..5893d50a 100644 --- 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; +}