biomejs · Netail · Dec 8, 2025
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/at-root.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/at-root.scss
@@ -0,0 +1,13 @@
+@media print {
+	.page {
+		width: 8in;
+
+		@at-root (without: media) {
+			color: #111;
+		}
+
+		@at-root (with: rule) {
+			font-size: 1.2em;
+		}
+	}
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/extend.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/extend.scss
@@ -0,0 +1,8 @@
+.error {
+	background-color: #fee;
+}
+
+.error--serious {
+	@extend .error;
+	border-width: 3px;
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/each.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/each.scss
@@ -0,0 +1,9 @@
+$sizes: 40px, 50px, 80px;
+
+@each $size in $sizes {
+	.icon-#{$size} {
+		font-size: $size;
+		height: $size;
+		width: $size;
+	}
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/for.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/for.scss
@@ -0,0 +1,7 @@
+$base-color: #036;
+
+@for $i from 1 through 3 {
+	ul:nth-child(3n + #{$i}) {
+		background-color: lighten($base-color, $i * 5%);
+	}
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/if-else.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/if-else.scss
@@ -0,0 +1,34 @@
+@use "sass:math";
+
+@mixin triangle($size, $color, $direction) {
+	height: 0;
+	width: 0;
+
+	border-color: transparent;
+	border-style: solid;
+	border-width: math.div($size, 2);
+
+	@if $direction ==up {
+		border-bottom-color: $color;
+	}
+
+	@else if $direction ==right {
+		border-left-color: $color;
+	}
+
+	@else if $direction ==down {
+		border-top-color: $color;
+	}
+
+	@else if $direction ==left {
+		border-right-color: $color;
+	}
+
+	@else {
+		@error "Unknown direction #{$direction}.";
+	}
+}
+
+.next {
+	@include triangle(5px, black, right);
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/while.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/flow_control/while.scss
@@ -0,0 +1,16 @@
+@use "sass:math";
+
+/// Divides `$value` by `$ratio` until it's below `$base`.
+@function scale-below($value, $base, $ratio: 1.618) {
+	@while $value >$base {
+		$value: math.div($value, $ratio);
+	}
+
+	@return $value;
+}
+
+$normal-font-size: 16px;
+
+sup {
+	font-size: scale-below(20px, 16px);
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/forward.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/forward.scss
@@ -0,0 +1 @@
+@forward "src/list";
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/function.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/function.scss
@@ -0,0 +1,15 @@
+@function fibonacci($n) {
+	$sequence: 0 1;
+
+	@for $_ from 1 through $n {
+		$new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
+		$sequence: append($sequence, $new);
+	}
+
+	@return nth($sequence, length($sequence));
+}
+
+.sidebar {
+	float: left;
+	margin-left: fibonacci(4) * 1px;
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/import.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/import.scss
@@ -0,0 +1 @@
+@import 'foundation/code', 'foundation/lists';
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/logs.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/logs.scss
@@ -0,0 +1,12 @@
+@error "this is an error";
+@warn "this is an error";
+@debug "this is an error";
+
+@debug true and true; // true
+@debug true and false; // false
+
+@debug true or false; // true
+@debug false or false; // false
+
+@debug not true; // false
+@debug not false; // true
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/mixin-include.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/mixin-include.scss
@@ -0,0 +1,22 @@
+@mixin reset-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+@mixin horizontal-list {
+	@include reset-list;
+
+	li {
+		display: inline-block;
+
+		margin: {
+			left: -2px;
+			right: 2em;
+		}
+	}
+}
+
+nav ul {
+	@include horizontal-list;
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/use.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/at_rule/use.scss
@@ -0,0 +1,2 @@
+@use 'foundation/code';
+@use 'foundation/lists' with ($black: #222, $border-radius: 0.1rem);
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/vars.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/vars.scss
@@ -0,0 +1,8 @@
+$base-color: #c6538c;
+$border-dark: rgba($base-color, 0.88);
+$sizes: 40px, 50px, 80px;
+$font-weights: (
+	"regular": 400,
+	"medium": 500,
+	"bold": 700
+);
diff --git a/crates/biome_css_syntax/src/file_source.rs b/crates/biome_css_syntax/src/file_source.rs
@@ -29,6 +29,8 @@ pub enum CssVariant {
     CssModules,
     /// The file belongs to tailwind
     TailwindCss,
+    // The file is Scss
+    Scss,
 }
 
 impl CssFileSource {
@@ -44,6 +46,12 @@ impl CssFileSource {
         }
     }
 
+    pub fn scss() -> Self {
+        Self {
+            variant: CssVariant::Scss,
+        }
+    }
+
     pub fn is_css_modules(&self) -> bool {
         self.variant == CssVariant::CssModules
     }
@@ -52,6 +60,10 @@ impl CssFileSource {
         self.variant == CssVariant::TailwindCss
     }
 
+    pub fn is_scss(&self) -> bool {
+        self.variant == CssVariant::Scss
+    }
+
     pub fn set_variant(&mut self, variant: CssVariant) {
         self.variant = variant;
     }
@@ -67,6 +79,7 @@ impl CssFileSource {
         // We assume the file extension is normalized to lowercase
         match extension {
             "css" => Ok(Self::css()),
+            "scss" => Ok(Self::scss()),
             _ => Err(FileSourceError::UnknownExtension),
         }
     }
@@ -81,6 +94,7 @@ impl CssFileSource {
         match language_id {
             "css" => Ok(Self::css()),
             "tailwindcss" => Ok(Self::tailwind_css()),
+            "scss" => Ok(Self::scss()),
             _ => Err(FileSourceError::UnknownLanguageId),
         }
     }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@use 'foundation/code';
		@use 'foundation/lists' with ($black: #222, $border-radius: 0.1rem);