silouanwright · March 7, 2024 17:05 · Mar 7, 2024
diff --git a/input.scss b/input.scss
@@ -0,0 +1,22 @@
+// Define SCSS variables with default values
+$header-color: purple;
+$font-size: 16px;
+
+// Create CSS custom properties with the same names and default values
+:root {
+  --header-color: #{$header-color};
+  --font-size: #{$font-size};
+}
+
+// Global class selector
+.brand-2024 {
+  // Redefine CSS custom properties with desired values
+  --header-color: red;
+  --font-size: 18px;
+}
+
+// Use CSS custom properties in your styles
+h1 {
+  color: var(--header-color);
+  font-size: var(--font-size);
+}
diff --git a/markup.html b/markup.html
@@ -0,0 +1,4 @@
+<div class="brand-2024">
+    <h1>Hello Joe!</h1>
+</div
+>
diff --git a/output.css b/output.css
@@ -0,0 +1,14 @@
+:root {
+  --header-color: purple;
+  --font-size: 16px;
+}
+
+.brand-2024 {
+  --header-color: red;
+  --font-size: 18px;
+}
+
+h1 {
+  color: var(--header-color);
+  font-size: var(--font-size);
+}
diff --git a/settings.json b/settings.json
@@ -0,0 +1,9 @@
+{
+  "sass": {
+    "compiler": "dart-sass/1.32.12",
+    "extensions": {},
+    "syntax": "SCSS",
+    "outputStyle": "expanded"
+  },
+  "autoprefixer": false
+}