diff --git a/crates/biome_css_analyze/src/assist/source/use_sorted_properties.rs b/crates/biome_css_analyze/src/assist/source/use_sorted_properties.rs
index a184b302649f..20f838254c8b 100644
--- a/crates/biome_css_analyze/src/assist/source/use_sorted_properties.rs
+++ b/crates/biome_css_analyze/src/assist/source/use_sorted_properties.rs
@@ -242,11 +242,13 @@ impl RecessOrderMember {
         match &self.0 {
             AnyCssDeclarationOrRule::CssBogus(_) => NodeKindOrder::UnknownKind,
             AnyCssDeclarationOrRule::CssMetavariable(_) => NodeKindOrder::UnknownKind,
+            AnyCssDeclarationOrRule::ScssDeclaration(_) => NodeKindOrder::UnknownKind,
             AnyCssDeclarationOrRule::AnyCssRule(rule) => match rule {
                 AnyCssRule::CssAtRule(_) => NodeKindOrder::NestedRuleOrAtRule,
                 AnyCssRule::CssBogusRule(_) => NodeKindOrder::UnknownKind,
                 AnyCssRule::CssNestedQualifiedRule(_) => NodeKindOrder::NestedRuleOrAtRule,
                 AnyCssRule::CssQualifiedRule(_) => NodeKindOrder::UnknownKind,
+                AnyCssRule::ScssDeclaration(_) => NodeKindOrder::UnknownKind,
             },
             AnyCssDeclarationOrRule::CssEmptyDeclaration(_) => NodeKindOrder::UnknownKind,
             AnyCssDeclarationOrRule::CssDeclarationWithSemicolon(decl_with_semicolon) => {
diff --git a/crates/biome_css_factory/src/generated/node_factory.rs b/crates/biome_css_factory/src/generated/node_factory.rs
index fd85446d6434..f60c5b817ebb 100644
--- a/crates/biome_css_factory/src/generated/node_factory.rs
+++ b/crates/biome_css_factory/src/generated/node_factory.rs
@@ -2839,6 +2839,81 @@ pub fn css_view_transition_at_rule_declarator(
         [Some(SyntaxElement::Token(view_transition_token))],
     ))
 }
+pub fn scss_declaration(
+    name: AnyScssDeclarationName,
+    colon_token: SyntaxToken,
+    value: CssGenericComponentValueList,
+    modifiers: ScssVariableModifierList,
+) -> ScssDeclarationBuilder {
+    ScssDeclarationBuilder {
+        name,
+        colon_token,
+        value,
+        modifiers,
+        semicolon_token: None,
+    }
+}
+pub struct ScssDeclarationBuilder {
+    name: AnyScssDeclarationName,
+    colon_token: SyntaxToken,
+    value: CssGenericComponentValueList,
+    modifiers: ScssVariableModifierList,
+    semicolon_token: Option<SyntaxToken>,
+}
+impl ScssDeclarationBuilder {
+    pub fn with_semicolon_token(mut self, semicolon_token: SyntaxToken) -> Self {
+        self.semicolon_token = Some(semicolon_token);
+        self
+    }
+    pub fn build(self) -> ScssDeclaration {
+        ScssDeclaration::unwrap_cast(SyntaxNode::new_detached(
+            CssSyntaxKind::SCSS_DECLARATION,
+            [
+                Some(SyntaxElement::Node(self.name.into_syntax())),
+                Some(SyntaxElement::Token(self.colon_token)),
+                Some(SyntaxElement::Node(self.value.into_syntax())),
+                Some(SyntaxElement::Node(self.modifiers.into_syntax())),
+                self.semicolon_token
+                    .map(|token| SyntaxElement::Token(token)),
+            ],
+        ))
+    }
+}
+pub fn scss_identifier(dollar_token: SyntaxToken, name: CssIdentifier) -> ScssIdentifier {
+    ScssIdentifier::unwrap_cast(SyntaxNode::new_detached(
+        CssSyntaxKind::SCSS_IDENTIFIER,
+        [
+            Some(SyntaxElement::Token(dollar_token)),
+            Some(SyntaxElement::Node(name.into_syntax())),
+        ],
+    ))
+}
+pub fn scss_namespaced_identifier(
+    namespace: CssIdentifier,
+    dot_token: SyntaxToken,
+    name: ScssIdentifier,
+) -> ScssNamespacedIdentifier {
+    ScssNamespacedIdentifier::unwrap_cast(SyntaxNode::new_detached(
+        CssSyntaxKind::SCSS_NAMESPACED_IDENTIFIER,
+        [
+            Some(SyntaxElement::Node(namespace.into_syntax())),
+            Some(SyntaxElement::Token(dot_token)),
+            Some(SyntaxElement::Node(name.into_syntax())),
+        ],
+    ))
+}
+pub fn scss_variable_modifier(
+    excl_token: SyntaxToken,
+    value_token: SyntaxToken,
+) -> ScssVariableModifier {
+    ScssVariableModifier::unwrap_cast(SyntaxNode::new_detached(
+        CssSyntaxKind::SCSS_VARIABLE_MODIFIER,
+        [
+            Some(SyntaxElement::Token(excl_token)),
+            Some(SyntaxElement::Token(value_token)),
+        ],
+    ))
+}
 pub fn tw_apply_at_rule(
     apply_token: SyntaxToken,
     classes: TwApplyClassList,
@@ -3705,6 +3780,18 @@ where
         }),
     ))
 }
+pub fn scss_variable_modifier_list<I>(items: I) -> ScssVariableModifierList
+where
+    I: IntoIterator<Item = ScssVariableModifier>,
+    I::IntoIter: ExactSizeIterator,
+{
+    ScssVariableModifierList::unwrap_cast(SyntaxNode::new_detached(
+        CssSyntaxKind::SCSS_VARIABLE_MODIFIER_LIST,
+        items
+            .into_iter()
+            .map(|item| Some(item.into_syntax().into())),
+    ))
+}
 pub fn tw_apply_class_list<I>(items: I) -> TwApplyClassList
 where
     I: IntoIterator<Item = CssIdentifier>,
diff --git a/crates/biome_css_factory/src/generated/syntax_factory.rs b/crates/biome_css_factory/src/generated/syntax_factory.rs
index 7ad044874c49..8b661274758d 100644
--- a/crates/biome_css_factory/src/generated/syntax_factory.rs
+++ b/crates/biome_css_factory/src/generated/syntax_factory.rs
@@ -5893,6 +5893,138 @@ impl SyntaxFactory for CssSyntaxFactory {
                 }
                 slots.into_node(CSS_VIEW_TRANSITION_AT_RULE_DECLARATOR, children)
             }
+            SCSS_DECLARATION => {
+                let mut elements = (&children).into_iter();
+                let mut slots: RawNodeSlots<5usize> = RawNodeSlots::default();
+                let mut current_element = elements.next();
+                if let Some(element) = &current_element
+                    && AnyScssDeclarationName::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && element.kind() == T ! [:]
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && CssGenericComponentValueList::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && ScssVariableModifierList::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && element.kind() == T ! [;]
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if current_element.is_some() {
+                    return RawSyntaxNode::new(
+                        SCSS_DECLARATION.to_bogus(),
+                        children.into_iter().map(Some),
+                    );
+                }
+                slots.into_node(SCSS_DECLARATION, children)
+            }
+            SCSS_IDENTIFIER => {
+                let mut elements = (&children).into_iter();
+                let mut slots: RawNodeSlots<2usize> = RawNodeSlots::default();
+                let mut current_element = elements.next();
+                if let Some(element) = &current_element
+                    && element.kind() == T ! [$]
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && CssIdentifier::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if current_element.is_some() {
+                    return RawSyntaxNode::new(
+                        SCSS_IDENTIFIER.to_bogus(),
+                        children.into_iter().map(Some),
+                    );
+                }
+                slots.into_node(SCSS_IDENTIFIER, children)
+            }
+            SCSS_NAMESPACED_IDENTIFIER => {
+                let mut elements = (&children).into_iter();
+                let mut slots: RawNodeSlots<3usize> = RawNodeSlots::default();
+                let mut current_element = elements.next();
+                if let Some(element) = &current_element
+                    && CssIdentifier::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && element.kind() == T ! [.]
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && ScssIdentifier::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if current_element.is_some() {
+                    return RawSyntaxNode::new(
+                        SCSS_NAMESPACED_IDENTIFIER.to_bogus(),
+                        children.into_iter().map(Some),
+                    );
+                }
+                slots.into_node(SCSS_NAMESPACED_IDENTIFIER, children)
+            }
+            SCSS_VARIABLE_MODIFIER => {
+                let mut elements = (&children).into_iter();
+                let mut slots: RawNodeSlots<2usize> = RawNodeSlots::default();
+                let mut current_element = elements.next();
+                if let Some(element) = &current_element
+                    && element.kind() == T![!]
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && matches!(element.kind(), T![default] | T![global])
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if current_element.is_some() {
+                    return RawSyntaxNode::new(
+                        SCSS_VARIABLE_MODIFIER.to_bogus(),
+                        children.into_iter().map(Some),
+                    );
+                }
+                slots.into_node(SCSS_VARIABLE_MODIFIER, children)
+            }
             TW_APPLY_AT_RULE => {
                 let mut elements = (&children).into_iter();
                 let mut slots: RawNodeSlots<3usize> = RawNodeSlots::default();
@@ -6551,6 +6683,9 @@ impl SyntaxFactory for CssSyntaxFactory {
                 T ! [,],
                 false,
             ),
+            SCSS_VARIABLE_MODIFIER_LIST => {
+                Self::make_node_list_syntax(kind, children, ScssVariableModifier::can_cast)
+            }
             TW_APPLY_CLASS_LIST => {
                 Self::make_node_list_syntax(kind, children, CssIdentifier::can_cast)
             }
diff --git a/crates/biome_css_formatter/src/css/any/declaration.rs b/crates/biome_css_formatter/src/css/any/declaration.rs
index 5f793dbbc9b4..0f7f8405eb6b 100644
--- a/crates/biome_css_formatter/src/css/any/declaration.rs
+++ b/crates/biome_css_formatter/src/css/any/declaration.rs
@@ -10,6 +10,7 @@ impl FormatRule<AnyCssDeclaration> for FormatAnyCssDeclaration {
         match node {
             AnyCssDeclaration::CssDeclarationWithSemicolon(node) => node.format().fmt(f),
             AnyCssDeclaration::CssEmptyDeclaration(node) => node.format().fmt(f),
+            AnyCssDeclaration::ScssDeclaration(node) => node.format().fmt(f),
         }
     }
 }
diff --git a/crates/biome_css_formatter/src/css/any/declaration_or_at_rule.rs b/crates/biome_css_formatter/src/css/any/declaration_or_at_rule.rs
index bb558ec0d93a..1a0c58f70eaf 100644
--- a/crates/biome_css_formatter/src/css/any/declaration_or_at_rule.rs
+++ b/crates/biome_css_formatter/src/css/any/declaration_or_at_rule.rs
@@ -11,6 +11,7 @@ impl FormatRule<AnyCssDeclarationOrAtRule> for FormatAnyCssDeclarationOrAtRule {
             AnyCssDeclarationOrAtRule::CssAtRule(node) => node.format().fmt(f),
             AnyCssDeclarationOrAtRule::CssDeclarationWithSemicolon(node) => node.format().fmt(f),
             AnyCssDeclarationOrAtRule::CssEmptyDeclaration(node) => node.format().fmt(f),
+            AnyCssDeclarationOrAtRule::ScssDeclaration(node) => node.format().fmt(f),
         }
     }
 }
diff --git a/crates/biome_css_formatter/src/css/any/declaration_or_rule.rs b/crates/biome_css_formatter/src/css/any/declaration_or_rule.rs
index 5be7e15e5ae2..6884ff730e03 100644
--- a/crates/biome_css_formatter/src/css/any/declaration_or_rule.rs
+++ b/crates/biome_css_formatter/src/css/any/declaration_or_rule.rs
@@ -13,6 +13,7 @@ impl FormatRule<AnyCssDeclarationOrRule> for FormatAnyCssDeclarationOrRule {
             AnyCssDeclarationOrRule::CssDeclarationWithSemicolon(node) => node.format().fmt(f),
             AnyCssDeclarationOrRule::CssEmptyDeclaration(node) => node.format().fmt(f),
             AnyCssDeclarationOrRule::CssMetavariable(node) => node.format().fmt(f),
+            AnyCssDeclarationOrRule::ScssDeclaration(node) => node.format().fmt(f),
         }
     }
 }
diff --git a/crates/biome_css_formatter/src/css/any/rule.rs b/crates/biome_css_formatter/src/css/any/rule.rs
index 2e2fc8500c4e..6b43d46931c1 100644
--- a/crates/biome_css_formatter/src/css/any/rule.rs
+++ b/crates/biome_css_formatter/src/css/any/rule.rs
@@ -12,6 +12,7 @@ impl FormatRule<AnyCssRule> for FormatAnyCssRule {
             AnyCssRule::CssBogusRule(node) => node.format().fmt(f),
             AnyCssRule::CssNestedQualifiedRule(node) => node.format().fmt(f),
             AnyCssRule::CssQualifiedRule(node) => node.format().fmt(f),
+            AnyCssRule::ScssDeclaration(node) => node.format().fmt(f),
         }
     }
 }
diff --git a/crates/biome_css_formatter/src/css/any/value.rs b/crates/biome_css_formatter/src/css/any/value.rs
index 357183234aed..7f9ec54ef0ee 100644
--- a/crates/biome_css_formatter/src/css/any/value.rs
+++ b/crates/biome_css_formatter/src/css/any/value.rs
@@ -20,6 +20,7 @@ impl FormatRule<AnyCssValue> for FormatAnyCssValue {
             AnyCssValue::CssRatio(node) => node.format().fmt(f),
             AnyCssValue::CssString(node) => node.format().fmt(f),
             AnyCssValue::CssUnicodeRange(node) => node.format().fmt(f),
+            AnyCssValue::ScssIdentifier(node) => node.format().fmt(f),
             AnyCssValue::TwValueThemeReference(node) => node.format().fmt(f),
         }
     }
diff --git a/crates/biome_css_formatter/src/generated.rs b/crates/biome_css_formatter/src/generated.rs
index 91d8e54797bd..191d1f40a589 100644
--- a/crates/biome_css_formatter/src/generated.rs
+++ b/crates/biome_css_formatter/src/generated.rs
@@ -6761,6 +6761,158 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssViewTransitionAtRuleD
         FormatOwnedWithRule :: new (self , crate :: css :: auxiliary :: view_transition_at_rule_declarator :: FormatCssViewTransitionAtRuleDeclarator :: default ())
     }
 }
+impl FormatRule<biome_css_syntax::ScssDeclaration>
+    for crate::scss::auxiliary::declaration::FormatScssDeclaration
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::ScssDeclaration,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::ScssDeclaration>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::ScssDeclaration {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::ScssDeclaration,
+        crate::scss::auxiliary::declaration::FormatScssDeclaration,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::scss::auxiliary::declaration::FormatScssDeclaration::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::ScssDeclaration {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::ScssDeclaration,
+        crate::scss::auxiliary::declaration::FormatScssDeclaration,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::scss::auxiliary::declaration::FormatScssDeclaration::default(),
+        )
+    }
+}
+impl FormatRule<biome_css_syntax::ScssIdentifier>
+    for crate::scss::value::identifier::FormatScssIdentifier
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::ScssIdentifier,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::ScssIdentifier>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::ScssIdentifier {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::ScssIdentifier,
+        crate::scss::value::identifier::FormatScssIdentifier,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::scss::value::identifier::FormatScssIdentifier::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::ScssIdentifier {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::ScssIdentifier,
+        crate::scss::value::identifier::FormatScssIdentifier,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::scss::value::identifier::FormatScssIdentifier::default(),
+        )
+    }
+}
+impl FormatRule<biome_css_syntax::ScssNamespacedIdentifier>
+    for crate::scss::value::namespaced_identifier::FormatScssNamespacedIdentifier
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::ScssNamespacedIdentifier,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::ScssNamespacedIdentifier>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::ScssNamespacedIdentifier {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::ScssNamespacedIdentifier,
+        crate::scss::value::namespaced_identifier::FormatScssNamespacedIdentifier,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::scss::value::namespaced_identifier::FormatScssNamespacedIdentifier::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::ScssNamespacedIdentifier {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::ScssNamespacedIdentifier,
+        crate::scss::value::namespaced_identifier::FormatScssNamespacedIdentifier,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::scss::value::namespaced_identifier::FormatScssNamespacedIdentifier::default(),
+        )
+    }
+}
+impl FormatRule<biome_css_syntax::ScssVariableModifier>
+    for crate::scss::auxiliary::variable_modifier::FormatScssVariableModifier
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::ScssVariableModifier,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::ScssVariableModifier>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::ScssVariableModifier {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::ScssVariableModifier,
+        crate::scss::auxiliary::variable_modifier::FormatScssVariableModifier,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::scss::auxiliary::variable_modifier::FormatScssVariableModifier::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::ScssVariableModifier {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::ScssVariableModifier,
+        crate::scss::auxiliary::variable_modifier::FormatScssVariableModifier,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::scss::auxiliary::variable_modifier::FormatScssVariableModifier::default(),
+        )
+    }
+}
 impl FormatRule<biome_css_syntax::TwApplyAtRule>
     for crate::tailwind::statements::apply_at_rule::FormatTwApplyAtRule
 {
@@ -8074,6 +8226,31 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssValueAtRulePropertyLi
         FormatOwnedWithRule :: new (self , crate :: css :: lists :: value_at_rule_property_list :: FormatCssValueAtRulePropertyList :: default ())
     }
 }
+impl AsFormat<CssFormatContext> for biome_css_syntax::ScssVariableModifierList {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::ScssVariableModifierList,
+        crate::scss::lists::variable_modifier_list::FormatScssVariableModifierList,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::scss::lists::variable_modifier_list::FormatScssVariableModifierList::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::ScssVariableModifierList {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::ScssVariableModifierList,
+        crate::scss::lists::variable_modifier_list::FormatScssVariableModifierList,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::scss::lists::variable_modifier_list::FormatScssVariableModifierList::default(),
+        )
+    }
+}
 impl AsFormat<CssFormatContext> for biome_css_syntax::TwApplyClassList {
     type Format<'a> = FormatRefWithRule<
         'a,
@@ -11529,6 +11706,31 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::AnyCssValueAtRulePropert
         )
     }
 }
+impl AsFormat<CssFormatContext> for biome_css_syntax::AnyScssDeclarationName {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::AnyScssDeclarationName,
+        crate::scss::any::declaration_name::FormatAnyScssDeclarationName,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::scss::any::declaration_name::FormatAnyScssDeclarationName::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::AnyScssDeclarationName {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::AnyScssDeclarationName,
+        crate::scss::any::declaration_name::FormatAnyScssDeclarationName,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::scss::any::declaration_name::FormatAnyScssDeclarationName::default(),
+        )
+    }
+}
 impl AsFormat<CssFormatContext> for biome_css_syntax::AnyTwCustomVariantSelector {
     type Format<'a> = FormatRefWithRule<
         'a,
diff --git a/crates/biome_css_formatter/src/lib.rs b/crates/biome_css_formatter/src/lib.rs
index a3964f7b601c..7d2bcee47d1a 100644
--- a/crates/biome_css_formatter/src/lib.rs
+++ b/crates/biome_css_formatter/src/lib.rs
@@ -6,6 +6,7 @@ mod css;
 mod cst;
 mod generated;
 mod prelude;
+mod scss;
 mod separated;
 mod tailwind;
 mod trivia;
diff --git a/crates/biome_css_formatter/src/scss/any/declaration_name.rs b/crates/biome_css_formatter/src/scss/any/declaration_name.rs
new file mode 100644
index 000000000000..14e96e5ff431
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/any/declaration_name.rs
@@ -0,0 +1,15 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+use crate::prelude::*;
+use biome_css_syntax::AnyScssDeclarationName;
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatAnyScssDeclarationName;
+impl FormatRule<AnyScssDeclarationName> for FormatAnyScssDeclarationName {
+    type Context = CssFormatContext;
+    fn fmt(&self, node: &AnyScssDeclarationName, f: &mut CssFormatter) -> FormatResult<()> {
+        match node {
+            AnyScssDeclarationName::ScssIdentifier(node) => node.format().fmt(f),
+            AnyScssDeclarationName::ScssNamespacedIdentifier(node) => node.format().fmt(f),
+        }
+    }
+}
diff --git a/crates/biome_css_formatter/src/scss/any/mod.rs b/crates/biome_css_formatter/src/scss/any/mod.rs
new file mode 100644
index 000000000000..859c41d9f77f
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/any/mod.rs
@@ -0,0 +1,3 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+pub(crate) mod declaration_name;
diff --git a/crates/biome_css_formatter/src/scss/auxiliary/declaration.rs b/crates/biome_css_formatter/src/scss/auxiliary/declaration.rs
new file mode 100644
index 000000000000..13b8ac73420f
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/auxiliary/declaration.rs
@@ -0,0 +1,29 @@
+use crate::prelude::*;
+use biome_css_syntax::{ScssDeclaration, ScssDeclarationFields};
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatScssDeclaration;
+
+impl FormatNodeRule<ScssDeclaration> for FormatScssDeclaration {
+    fn fmt_fields(&self, node: &ScssDeclaration, f: &mut CssFormatter) -> FormatResult<()> {
+        let ScssDeclarationFields {
+            name,
+            colon_token,
+            value,
+            modifiers,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [name.format(), colon_token.format(), space(), value.format(),]
+        )?;
+
+        if !modifiers.is_empty() {
+            write!(f, [modifiers.format()])?;
+        }
+
+        write!(f, [semicolon_token.format()])
+    }
+}
diff --git a/crates/biome_css_formatter/src/scss/auxiliary/mod.rs b/crates/biome_css_formatter/src/scss/auxiliary/mod.rs
new file mode 100644
index 000000000000..cb5948b72b73
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/auxiliary/mod.rs
@@ -0,0 +1,4 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+pub(crate) mod declaration;
+pub(crate) mod variable_modifier;
diff --git a/crates/biome_css_formatter/src/scss/auxiliary/variable_modifier.rs b/crates/biome_css_formatter/src/scss/auxiliary/variable_modifier.rs
new file mode 100644
index 000000000000..8b1d612ad826
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/auxiliary/variable_modifier.rs
@@ -0,0 +1,14 @@
+use crate::prelude::*;
+use biome_css_syntax::{ScssVariableModifier, ScssVariableModifierFields};
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatScssVariableModifier;
+
+impl FormatNodeRule<ScssVariableModifier> for FormatScssVariableModifier {
+    fn fmt_fields(&self, node: &ScssVariableModifier, f: &mut CssFormatter) -> FormatResult<()> {
+        let ScssVariableModifierFields { excl_token, value } = node.as_fields();
+
+        write!(f, [excl_token.format(), value.format()])
+    }
+}
diff --git a/crates/biome_css_formatter/src/scss/lists/mod.rs b/crates/biome_css_formatter/src/scss/lists/mod.rs
new file mode 100644
index 000000000000..4dda0d9037b5
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/lists/mod.rs
@@ -0,0 +1,3 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+pub(crate) mod variable_modifier_list;
diff --git a/crates/biome_css_formatter/src/scss/lists/variable_modifier_list.rs b/crates/biome_css_formatter/src/scss/lists/variable_modifier_list.rs
new file mode 100644
index 000000000000..400c02393338
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/lists/variable_modifier_list.rs
@@ -0,0 +1,26 @@
+use crate::prelude::*;
+use biome_css_syntax::ScssVariableModifierList;
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatScssVariableModifierList;
+
+impl FormatRule<ScssVariableModifierList> for FormatScssVariableModifierList {
+    type Context = CssFormatContext;
+    fn fmt(&self, node: &ScssVariableModifierList, f: &mut CssFormatter) -> FormatResult<()> {
+        // Format in the correct order: !default, then !global, then unknown/rest
+        for modifier in node.iter().filter(|m| m.is_default()) {
+            write!(f, [space(), modifier.format()])?;
+        }
+
+        for modifier in node.iter().filter(|m| m.is_global()) {
+            write!(f, [space(), modifier.format()])?;
+        }
+
+        for modifier in node.iter().filter(|m| m.is_unknown()) {
+            write!(f, [space(), modifier.format()])?;
+        }
+
+        Ok(())
+    }
+}
diff --git a/crates/biome_css_formatter/src/scss/mod.rs b/crates/biome_css_formatter/src/scss/mod.rs
new file mode 100644
index 000000000000..121bb0090165
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/mod.rs
@@ -0,0 +1,6 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+pub(crate) mod any;
+pub(crate) mod auxiliary;
+pub(crate) mod lists;
+pub(crate) mod value;
diff --git a/crates/biome_css_formatter/src/scss/value/identifier.rs b/crates/biome_css_formatter/src/scss/value/identifier.rs
new file mode 100644
index 000000000000..325ae00ab6ab
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/value/identifier.rs
@@ -0,0 +1,14 @@
+use crate::prelude::*;
+use biome_css_syntax::{ScssIdentifier, ScssIdentifierFields};
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatScssIdentifier;
+
+impl FormatNodeRule<ScssIdentifier> for FormatScssIdentifier {
+    fn fmt_fields(&self, node: &ScssIdentifier, f: &mut CssFormatter) -> FormatResult<()> {
+        let ScssIdentifierFields { dollar_token, name } = node.as_fields();
+
+        write!(f, [dollar_token.format(), name.format()])
+    }
+}
diff --git a/crates/biome_css_formatter/src/scss/value/mod.rs b/crates/biome_css_formatter/src/scss/value/mod.rs
new file mode 100644
index 000000000000..3c3e80ecb96d
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/value/mod.rs
@@ -0,0 +1,4 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+pub(crate) mod identifier;
+pub(crate) mod namespaced_identifier;
diff --git a/crates/biome_css_formatter/src/scss/value/namespaced_identifier.rs b/crates/biome_css_formatter/src/scss/value/namespaced_identifier.rs
new file mode 100644
index 000000000000..a799d127c110
--- /dev/null
+++ b/crates/biome_css_formatter/src/scss/value/namespaced_identifier.rs
@@ -0,0 +1,22 @@
+use crate::prelude::*;
+use biome_css_syntax::{ScssNamespacedIdentifier, ScssNamespacedIdentifierFields};
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatScssNamespacedIdentifier;
+
+impl FormatNodeRule<ScssNamespacedIdentifier> for FormatScssNamespacedIdentifier {
+    fn fmt_fields(
+        &self,
+        node: &ScssNamespacedIdentifier,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        let ScssNamespacedIdentifierFields {
+            namespace,
+            dot_token,
+            name,
+        } = node.as_fields();
+
+        write!(f, [namespace.format(), dot_token.format(), name.format()])
+    }
+}
diff --git a/crates/biome_css_formatter/tests/language.rs b/crates/biome_css_formatter/tests/language.rs
index 129f8175712c..03060984907e 100644
--- a/crates/biome_css_formatter/tests/language.rs
+++ b/crates/biome_css_formatter/tests/language.rs
@@ -10,11 +10,16 @@ use biome_service::{
     workspace::DocumentFileSource,
 };
 
-#[derive(Default)]
 pub struct CssTestFormatLanguage {
     source_type: CssFileSource,
 }
 
+impl CssTestFormatLanguage {
+    pub fn new(source_type: CssFileSource) -> Self {
+        Self { source_type }
+    }
+}
+
 impl TestFormatLanguage for CssTestFormatLanguage {
     type ServiceLanguage = CssLanguage;
     type Context = CssFormatContext;
diff --git a/crates/biome_css_formatter/tests/prettier_tests.rs b/crates/biome_css_formatter/tests/prettier_tests.rs
index d254c2fa5f72..c81f6e6316e2 100644
--- a/crates/biome_css_formatter/tests/prettier_tests.rs
+++ b/crates/biome_css_formatter/tests/prettier_tests.rs
@@ -1,4 +1,5 @@
 use biome_css_formatter::{CssFormatLanguage, context::CssFormatOptions};
+use biome_css_syntax::CssFileSource;
 use biome_formatter::{IndentStyle, IndentWidth};
 use biome_formatter_test::test_prettier_snapshot::{PrettierSnapshot, PrettierTestFile};
 use camino::Utf8Path;
@@ -20,7 +21,14 @@ fn test_snapshot(input: &'static str, _: &str, _: &str, _: &str) {
     let options = CssFormatOptions::default()
         .with_indent_style(IndentStyle::Space)
         .with_indent_width(IndentWidth::default());
-    let language = language::CssTestFormatLanguage::default();
+    let source_type = {
+        if test_file.file_extension() == "scss" {
+            CssFileSource::scss()
+        } else {
+            CssFileSource::css()
+        }
+    };
+    let language = language::CssTestFormatLanguage::new(source_type);
     let snapshot = PrettierSnapshot::new(test_file, language, CssFormatLanguage::new(options));
 
     snapshot.test()
diff --git a/crates/biome_css_formatter/tests/quick_test.rs b/crates/biome_css_formatter/tests/quick_test.rs
index 47bbcbf3054b..ca5200e67aea 100644
--- a/crates/biome_css_formatter/tests/quick_test.rs
+++ b/crates/biome_css_formatter/tests/quick_test.rs
@@ -14,13 +14,16 @@ mod language {
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-.container {& [lang="ru"] {
-         color: blue;
-        } }
+.component {
+	$global-var: modified !global;
+	$another-var: value !default!global;
+	$third-var:value!global!default!default;
+	color: $global-var;
+}
 
 
 "#;
-    let parse = parse_css(src, CssFileSource::css(), CssParserOptions::default());
+    let parse = parse_css(src, CssFileSource::scss(), CssParserOptions::default());
     println!("{parse:#?}");
 
     let options = CssFormatOptions::default()
@@ -31,7 +34,7 @@ fn quick_test() {
     let result = doc.print().unwrap();
 
     let root = &parse.syntax();
-    let language = language::CssTestFormatLanguage::default();
+    let language = language::CssTestFormatLanguage::new(CssFileSource::scss());
 
     println!("{}", doc.into_document());
     eprintln!("{}", result.as_code());
diff --git a/crates/biome_css_formatter/tests/spec_test.rs b/crates/biome_css_formatter/tests/spec_test.rs
index 1c094617b182..98204b224b7c 100644
--- a/crates/biome_css_formatter/tests/spec_test.rs
+++ b/crates/biome_css_formatter/tests/spec_test.rs
@@ -1,6 +1,7 @@
 use biome_configuration::css::CssFormatterConfiguration;
 use biome_configuration::{Configuration, CssConfiguration};
 use biome_css_formatter::{CssFormatLanguage, context::CssFormatOptions};
+use biome_css_syntax::CssFileSource;
 use biome_formatter_test::spec::{SpecSnapshot, SpecTestFile};
 use biome_service::workspace::UpdateSettingsParams;
 use camino::Utf8Path;
@@ -51,8 +52,9 @@ pub fn run(spec_input_file: &str, _expected_file: &str, test_directory: &str, _f
         return;
     };
 
+    let source_type: CssFileSource = test_file.input_file().as_path().try_into().unwrap();
     let options = CssFormatOptions::default();
-    let language = language::CssTestFormatLanguage::default();
+    let language = language::CssTestFormatLanguage::new(source_type);
 
     let snapshot = SpecSnapshot::new(
         test_file,
diff --git a/crates/biome_css_formatter/tests/spec_tests.rs b/crates/biome_css_formatter/tests/spec_tests.rs
index a546881a2712..e1349d9a3d54 100644
--- a/crates/biome_css_formatter/tests/spec_tests.rs
+++ b/crates/biome_css_formatter/tests/spec_tests.rs
@@ -3,6 +3,6 @@ mod spec_test;
 
 mod formatter {
     mod css_module {
-        tests_macros::gen_tests! {"tests/specs/css/**/*.css", crate::spec_test::run, ""}
+        tests_macros::gen_tests! {"tests/specs/css/**/*.{css,scss}", crate::spec_test::run, ""}
     }
 }
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/global-flag.scss b/crates/biome_css_formatter/tests/specs/css/scss/declaration/global-flag.scss
new file mode 100644
index 000000000000..54522b954d85
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/global-flag.scss
@@ -0,0 +1,13 @@
+$global-var:initial;
+
+.component {
+  $global-var:
+		modified !global;
+  $another-var: value      !default         !global;
+  $third-var:value!global!default;
+  $fourth-var:test!default!global!default;
+  $fifth-var  :   value
+
+    !global    !default;
+  color:         $global-var;
+}
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/global-flag.scss.snap b/crates/biome_css_formatter/tests/specs/css/scss/declaration/global-flag.scss.snap
new file mode 100644
index 000000000000..7068c23bba82
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/global-flag.scss.snap
@@ -0,0 +1,52 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/declaration/global-flag.scss
+---
+# Input
+
+```scss
+$global-var:initial;
+
+.component {
+  $global-var:
+		modified !global;
+  $another-var: value      !default         !global;
+  $third-var:value!global!default;
+  $fourth-var:test!default!global!default;
+  $fifth-var  :   value
+
+    !global    !default;
+  color:         $global-var;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+$global-var: initial;
+
+.component {
+	$global-var: modified !global;
+	$another-var: value !default !global;
+	$third-var: value !default !global;
+	$fourth-var: test !default !default !global;
+	$fifth-var: value !default !global;
+	color: $global-var;
+}
+
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/mixed.scss b/crates/biome_css_formatter/tests/specs/css/scss/declaration/mixed.scss
new file mode 100644
index 000000000000..5b059e275b3e
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/mixed.scss
@@ -0,0 +1,10 @@
+.example {
+  $local-var:   10px;
+  ns.$namespaced-var:    20px;
+  $default-var:   red   !default;
+  $global-var:blue!global;
+  $combined:green!global!default!global;
+
+  padding:   $local-var;
+  margin:  ns.$namespaced-var;
+}
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/mixed.scss.snap b/crates/biome_css_formatter/tests/specs/css/scss/declaration/mixed.scss.snap
new file mode 100644
index 000000000000..0f4326cdd939
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/mixed.scss.snap
@@ -0,0 +1,49 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/declaration/mixed.scss
+---
+# Input
+
+```scss
+.example {
+  $local-var:   10px;
+  ns.$namespaced-var:    20px;
+  $default-var:   red   !default;
+  $global-var:blue!global;
+  $combined:green!global!default!global;
+
+  padding:   $local-var;
+  margin:  ns.$namespaced-var;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+.example {
+	$local-var: 10px;
+	ns.$namespaced-var: 20px;
+	$default-var: red !default;
+	$global-var: blue !global;
+	$combined: green !default !global !global;
+
+	padding: $local-var;
+	margin:  ns.$namespaced-var;
+}
+
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/namespaced.scss b/crates/biome_css_formatter/tests/specs/css/scss/declaration/namespaced.scss
new file mode 100644
index 000000000000..1fd9339e6b84
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/namespaced.scss
@@ -0,0 +1,6 @@
+ns.$var:   value;
+namespace.$primary-color:#ff0000;
+
+config.$theme-color  :
+
+  blue  ;
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/namespaced.scss.snap b/crates/biome_css_formatter/tests/specs/css/scss/declaration/namespaced.scss.snap
new file mode 100644
index 000000000000..8e37657ebf17
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/namespaced.scss.snap
@@ -0,0 +1,39 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/declaration/namespaced.scss
+---
+# Input
+
+```scss
+ns.$var:   value;
+namespace.$primary-color:#ff0000;
+
+config.$theme-color  :
+
+  blue  ;
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+ns.$var: value;
+namespace.$primary-color: #ff0000;
+
+config.$theme-color: blue;
+
+```
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/simple-variable.scss b/crates/biome_css_formatter/tests/specs/css/scss/declaration/simple-variable.scss
new file mode 100644
index 000000000000..ec0f1cf27731
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/simple-variable.scss
@@ -0,0 +1,5 @@
+$primary-color:   #ff0000;
+
+$secondary-color  :
+  #00ff00  ;
+$font-size:16px;
diff --git a/crates/biome_css_formatter/tests/specs/css/scss/declaration/simple-variable.scss.snap b/crates/biome_css_formatter/tests/specs/css/scss/declaration/simple-variable.scss.snap
new file mode 100644
index 000000000000..7b9713a195a3
--- /dev/null
+++ b/crates/biome_css_formatter/tests/specs/css/scss/declaration/simple-variable.scss.snap
@@ -0,0 +1,38 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/declaration/simple-variable.scss
+---
+# Input
+
+```scss
+$primary-color:   #ff0000;
+
+$secondary-color  :
+  #00ff00  ;
+$font-size:16px;
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+$primary-color: #ff0000;
+
+$secondary-color: #00ff00;
+$font-size: 16px;
+
+```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap
index ab140e11a196..d2d14312b6e7 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap
@@ -80,29 +80,6 @@ info: css/atrule/debug.css
 @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
 ```
 
-# Errors
-```
-debug.css:22:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ ;
-  > 22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
-       │        ^
-    23 │ 
-  
-debug.css:22:95 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ ;
-  > 22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
-       │                                                                                               ^
-    23 │ 
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    15: @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap
index 29ac5b590405..f225cd32afd3 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap
@@ -696,455 +696,6 @@ h3
 }
 ```
 
-# Errors
-```
-each.css:1:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @each $animal in puma, sea-slug, egret, salamander {}
-      │       ^
-    2 │ @each $animal in puma,sea-slug,egret,salamander{}
-    3 │ @each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
-  
-each.css:2:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @each $animal in puma, sea-slug, egret, salamander {}
-  > 2 │ @each $animal in puma,sea-slug,egret,salamander{}
-      │       ^
-    3 │ @each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
-    4 │ @each $animal in
-  
-each.css:3:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @each $animal in puma, sea-slug, egret, salamander {}
-    2 │ @each $animal in puma,sea-slug,egret,salamander{}
-  > 3 │ @each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
-      │        ^
-    4 │ @each $animal in
-    5 │     puma, sea-slug, egret, salamander {}
-  
-each.css:4:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │ @each $animal in puma,sea-slug,egret,salamander{}
-    3 │ @each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
-  > 4 │ @each $animal in
-      │       ^
-    5 │     puma, sea-slug, egret, salamander {}
-    6 │ @each
-  
-each.css:7:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    5 │     puma, sea-slug, egret, salamander {}
-    6 │ @each
-  > 7 │     $animal
-      │     ^
-    8 │     in
-    9 │     puma
-  
-each.css:19:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    17 │     }
-    18 │ @each
-  > 19 │ $animal
-       │ ^
-    20 │ in
-    21 │ puma
-  
-each.css:32:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    30 │ @each
-    31 │ 
-  > 32 │ $animal
-       │ ^
-    33 │ 
-    34 │ in
-  
-each.css:53:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    52 │ }
-  > 53 │ @each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
-       │       ^
-    54 │ @each $animal in((puma),(sea-slug),(egret),(salamander)){}
-    55 │ @each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
-  
-each.css:54:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    52 │ }
-    53 │ @each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
-  > 54 │ @each $animal in((puma),(sea-slug),(egret),(salamander)){}
-       │       ^
-    55 │ @each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
-    56 │ @each $animal
-  
-each.css:55:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    53 │ @each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
-    54 │ @each $animal in((puma),(sea-slug),(egret),(salamander)){}
-  > 55 │ @each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
-       │        ^
-    56 │ @each $animal
-    57 │     in ((puma), (sea-slug), (egret), (salamander)) {}
-  
-each.css:56:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    54 │ @each $animal in((puma),(sea-slug),(egret),(salamander)){}
-    55 │ @each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
-  > 56 │ @each $animal
-       │       ^
-    57 │     in ((puma), (sea-slug), (egret), (salamander)) {}
-    58 │ @each
-  
-each.css:59:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    57 │     in ((puma), (sea-slug), (egret), (salamander)) {}
-    58 │ @each
-  > 59 │     $animal
-       │     ^
-    60 │     in (
-    61 │         (puma),
-  
-each.css:67:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    65 │     ) {  }
-    66 │ @each
-  > 67 │     $animal
-       │     ^
-    68 │     in
-    69 │     (
-  
-each.css:90:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ @each
-    89 │ 
-  > 90 │     $animal
-       │     ^
-    91 │ 
-    92 │     in
-  
-each.css:131:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    130 │     }
-  > 131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-        │       ^
-    132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-    133 │ @each $animal, $color, $cursor in
-  
-each.css:131:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    130 │     }
-  > 131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-        │                ^
-    132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-    133 │ @each $animal, $color, $cursor in
-  
-each.css:131:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    130 │     }
-  > 131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-        │                        ^
-    132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-    133 │ @each $animal, $color, $cursor in
-  
-each.css:132:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    130 │     }
-    131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-  > 132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-        │       ^
-    133 │ @each $animal, $color, $cursor in
-    134 │     (puma, black, default),
-  
-each.css:132:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    130 │     }
-    131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-  > 132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-        │               ^
-    133 │ @each $animal, $color, $cursor in
-    134 │     (puma, black, default),
-  
-each.css:132:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    130 │     }
-    131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-  > 132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-        │                      ^
-    133 │ @each $animal, $color, $cursor in
-    134 │     (puma, black, default),
-  
-each.css:133:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-    132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-  > 133 │ @each $animal, $color, $cursor in
-        │       ^
-    134 │     (puma, black, default),
-    135 │     (sea-slug, blue, pointer),
-  
-each.css:133:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-    132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-  > 133 │ @each $animal, $color, $cursor in
-        │                ^
-    134 │     (puma, black, default),
-    135 │     (sea-slug, blue, pointer),
-  
-each.css:133:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    131 │ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-    132 │ @each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-  > 133 │ @each $animal, $color, $cursor in
-        │                        ^
-    134 │     (puma, black, default),
-    135 │     (sea-slug, blue, pointer),
-  
-each.css:137:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    135 │     (sea-slug, blue, pointer),
-    136 │     (egret, white, move) {}
-  > 137 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-        │       ^
-    138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-  
-each.css:138:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    136 │     (egret, white, move) {}
-    137 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-  > 138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-        │       ^
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-  
-each.css:138:93 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    136 │     (egret, white, move) {}
-    137 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-  > 138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-        │                                                                                             ^
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-  
-each.css:138:180 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    136 │     (egret, white, move) {}
-    137 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-  > 138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-        │                                                                                                                                                                                    ^
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-  
-each.css:139:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    137 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-    138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-  > 139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-        │       ^
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-    141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-  
-each.css:139:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    137 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-    138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-  > 139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-        │                 ^
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-    141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-  
-each.css:140:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-  > 140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-        │       ^
-    141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-    142 │ @each $element,
-  
-each.css:140:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    138 │ @each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-  > 140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-        │                ^
-    141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-    142 │ @each $element,
-  
-each.css:141:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-  > 141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-        │        ^
-    142 │ @each $element,
-    143 │     $size in (h1: 20px, h2: 16px, h3: 14px) {}
-  
-each.css:141:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │ @each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-  > 141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-        │                     ^
-    142 │ @each $element,
-    143 │     $size in (h1: 20px, h2: 16px, h3: 14px) {}
-  
-each.css:142:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    140 │ @each $element,$size in(h1:20px,h2:16px,h3:14px){}
-    141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-  > 142 │ @each $element,
-        │       ^
-    143 │     $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    144 │ @each
-  
-each.css:143:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    141 │ @each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-    142 │ @each $element,
-  > 143 │     $size in (h1: 20px, h2: 16px, h3: 14px) {}
-        │     ^
-    144 │ @each
-    145 │     $element,
-  
-each.css:145:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    143 │     $size in (h1: 20px, h2: 16px, h3: 14px) {}
-    144 │ @each
-  > 145 │     $element,
-        │     ^
-    146 │     $size
-    147 │     in
-  
-each.css:146:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    144 │ @each
-    145 │     $element,
-  > 146 │     $size
-        │     ^
-    147 │     in
-    148 │     (
-  
-each.css:164:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    162 │     }
-    163 │ @each
-  > 164 │ $element,
-        │ ^
-    165 │ $size
-    166 │ in
-  
-each.css:165:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    163 │ @each
-    164 │ $element,
-  > 165 │ $size
-        │ ^
-    166 │ in
-    167 │ (
-  
-each.css:183:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    181 │ }
-    182 │ @each
-  > 183 │ $element,
-        │ ^
-    184 │ 
-    185 │ $size
-  
-each.css:185:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    183 │ $element,
-    184 │ 
-  > 185 │ $size
-        │ ^
-    186 │ 
-    187 │ in
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    52: @each $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  ) {
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap
index 1adb6e8872f5..e66ad1148ade 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap
@@ -195,310 +195,6 @@ through
 }
 ```
 
-# Errors
-```
-for.css:1:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @for $i from 1 through 8 {}
-      │      ^
-    2 │ @for $i from 1 through 8{}
-    3 │ @for  $i  from  1  through  8  {}
-  
-for.css:2:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @for $i from 1 through 8 {}
-  > 2 │ @for $i from 1 through 8{}
-      │      ^
-    3 │ @for  $i  from  1  through  8  {}
-    4 │ @for  $i
-  
-for.css:3:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @for $i from 1 through 8 {}
-    2 │ @for $i from 1 through 8{}
-  > 3 │ @for  $i  from  1  through  8  {}
-      │       ^
-    4 │ @for  $i
-    5 │ from
-  
-for.css:4:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │ @for $i from 1 through 8{}
-    3 │ @for  $i  from  1  through  8  {}
-  > 4 │ @for  $i
-      │       ^
-    5 │ from
-    6 │ 1
-  
-for.css:11:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     9 │ {}
-    10 │ @for
-  > 11 │ $i
-       │ ^
-    12 │ from
-    13 │ 1
-  
-for.css:18:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    16 │ {}
-    17 │ @for
-  > 18 │ $i
-       │ ^
-    19 │ from
-    20 │ 1
-  
-for.css:26:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    24 │ @for
-    25 │ 
-  > 26 │ $i
-       │ ^
-    27 │ 
-    28 │ from
-  
-for.css:37:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    36 │ {}
-  > 37 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-       │      ^
-    38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  
-for.css:38:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    36 │ {}
-    37 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-  > 38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-       │      ^
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  
-for.css:38:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    36 │ {}
-    37 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-  > 38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-       │              ^
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  
-for.css:39:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    37 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-    38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-  > 39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │      ^
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  
-for.css:39:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    37 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-    38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-  > 39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │                        ^
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  
-for.css:40:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │      ^
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  
-for.css:40:96 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │                                                                                                ^
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  
-for.css:40:190 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    38 │ @for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │                                                                                                                                                                                              ^
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  
-for.css:41:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │      ^
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-  
-for.css:41:96 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │                                                                                                ^
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-  
-for.css:41:186 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    39 │ @for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-       │                                                                                                                                                                                          ^
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-  
-for.css:42:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-       │      ^
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-    44 │ 
-  
-for.css:42:97 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-       │                                                                                                 ^
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-    44 │ 
-  
-for.css:42:105 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-       │                                                                                                         ^
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-    44 │ 
-  
-for.css:42:121 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-       │                                                                                                                         ^
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-    44 │ 
-  
-for.css:42:130 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    40 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-  > 42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-       │                                                                                                                                  ^
-    43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-    44 │ 
-  
-for.css:43:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  > 43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-       │      ^
-    44 │ 
-  
-for.css:43:97 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  > 43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-       │                                                                                                 ^
-    44 │ 
-  
-for.css:43:185 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  > 43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-       │                                                                                                                                                                                         ^
-    44 │ 
-  
-for.css:43:281 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  > 43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-       │                                                                                                                                                                                                                                                                                         ^
-    44 │ 
-  
-for.css:43:370 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    41 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-    42 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-  > 43 │ @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-       │                                                                                                                                                                                                                                                                                                                                                                                  ^
-    44 │ 
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    35: @for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap
index 8e0271029c32..9014a48ca36d 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap
@@ -274,395 +274,6 @@ $args
 }
 ```
 
-# Errors
-```
-function.css:1:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @function func($arg, $arg1, $arg2: 10, $args...) {
-      │                ^
-    2 │     @return "Func";
-    3 │ }
-  
-function.css:1:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @function func($arg, $arg1, $arg2: 10, $args...) {
-      │                      ^
-    2 │     @return "Func";
-    3 │ }
-  
-function.css:1:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @function func($arg, $arg1, $arg2: 10, $args...) {
-      │                             ^
-    2 │     @return "Func";
-    3 │ }
-  
-function.css:1:40 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @function func($arg, $arg1, $arg2: 10, $args...) {
-      │                                        ^
-    2 │     @return "Func";
-    3 │ }
-  
-function.css:4:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │     @return "Func";
-    3 │ }
-  > 4 │ @function func($arg,$arg1,$arg2:10,$args...){
-      │                ^
-    5 │     @return "Func";
-    6 │ }
-  
-function.css:4:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │     @return "Func";
-    3 │ }
-  > 4 │ @function func($arg,$arg1,$arg2:10,$args...){
-      │                     ^
-    5 │     @return "Func";
-    6 │ }
-  
-function.css:4:27 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │     @return "Func";
-    3 │ }
-  > 4 │ @function func($arg,$arg1,$arg2:10,$args...){
-      │                           ^
-    5 │     @return "Func";
-    6 │ }
-  
-function.css:4:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │     @return "Func";
-    3 │ }
-  > 4 │ @function func($arg,$arg1,$arg2:10,$args...){
-      │                                    ^
-    5 │     @return "Func";
-    6 │ }
-  
-function.css:7:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    5 │     @return "Func";
-    6 │ }
-  > 7 │ @function func ( $arg , $arg1 , $arg2 : 10 , $args ... ) {
-      │                  ^
-    8 │     @return "Func";
-    9 │ }
-  
-function.css:7:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    5 │     @return "Func";
-    6 │ }
-  > 7 │ @function func ( $arg , $arg1 , $arg2 : 10 , $args ... ) {
-      │                         ^
-    8 │     @return "Func";
-    9 │ }
-  
-function.css:7:33 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    5 │     @return "Func";
-    6 │ }
-  > 7 │ @function func ( $arg , $arg1 , $arg2 : 10 , $args ... ) {
-      │                                 ^
-    8 │     @return "Func";
-    9 │ }
-  
-function.css:7:46 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    5 │     @return "Func";
-    6 │ }
-  > 7 │ @function func ( $arg , $arg1 , $arg2 : 10 , $args ... ) {
-      │                                              ^
-    8 │     @return "Func";
-    9 │ }
-  
-function.css:10:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     8 │     @return "Func";
-     9 │ }
-  > 10 │ @function  func  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {
-       │                     ^
-    11 │     @return "Func";
-    12 │ }
-  
-function.css:10:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     8 │     @return "Func";
-     9 │ }
-  > 10 │ @function  func  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {
-       │                              ^
-    11 │     @return "Func";
-    12 │ }
-  
-function.css:10:40 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     8 │     @return "Func";
-     9 │ }
-  > 10 │ @function  func  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {
-       │                                        ^
-    11 │     @return "Func";
-    12 │ }
-  
-function.css:10:57 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     8 │     @return "Func";
-     9 │ }
-  > 10 │ @function  func  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {
-       │                                                         ^
-    11 │     @return "Func";
-    12 │ }
-  
-function.css:14:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    12 │ }
-    13 │ @function func(
-  > 14 │     $arg,
-       │     ^
-    15 │     $arg1,
-    16 │     $arg2: 10,
-  
-function.css:15:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    13 │ @function func(
-    14 │     $arg,
-  > 15 │     $arg1,
-       │     ^
-    16 │     $arg2: 10,
-    17 │     $args...
-  
-function.css:16:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    14 │     $arg,
-    15 │     $arg1,
-  > 16 │     $arg2: 10,
-       │     ^
-    17 │     $args...
-    18 │ )  {
-  
-function.css:17:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    15 │     $arg1,
-    16 │     $arg2: 10,
-  > 17 │     $args...
-       │     ^
-    18 │ )  {
-    19 │     @return "Func";
-  
-function.css:23:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @function
-    22 │     func(
-  > 23 │         $arg,
-       │         ^
-    24 │         $arg1,
-    25 │         $arg2: 10,
-  
-function.css:24:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    22 │     func(
-    23 │         $arg,
-  > 24 │         $arg1,
-       │         ^
-    25 │         $arg2: 10,
-    26 │         $args...
-  
-function.css:25:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    23 │         $arg,
-    24 │         $arg1,
-  > 25 │         $arg2: 10,
-       │         ^
-    26 │         $args...
-    27 │     )  {
-  
-function.css:26:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    24 │         $arg1,
-    25 │         $arg2: 10,
-  > 26 │         $args...
-       │         ^
-    27 │     )  {
-    28 │     @return "Func";
-  
-function.css:33:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    31 │ func
-    32 │ (
-  > 33 │ $arg
-       │ ^
-    34 │ ,
-    35 │ $arg1
-  
-function.css:35:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    33 │ $arg
-    34 │ ,
-  > 35 │ $arg1
-       │ ^
-    36 │ ,
-    37 │ $arg2
-  
-function.css:37:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    35 │ $arg1
-    36 │ ,
-  > 37 │ $arg2
-       │ ^
-    38 │ :
-    39 │ 10
-  
-function.css:41:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    39 │ 10
-    40 │ ,
-  > 41 │ $args
-       │ ^
-    42 │ ...
-    43 │ )
-  
-function.css:55:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    53 │ (
-    54 │ 
-  > 55 │ $arg
-       │ ^
-    56 │ 
-    57 │ ,
-  
-function.css:59:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    57 │ ,
-    58 │ 
-  > 59 │ $arg1
-       │ ^
-    60 │ 
-    61 │ ,
-  
-function.css:63:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    61 │ ,
-    62 │ 
-  > 63 │ $arg2
-       │ ^
-    64 │ 
-    65 │ :
-  
-function.css:71:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    69 │ ,
-    70 │ 
-  > 71 │ $args
-       │ ^
-    72 │ 
-    73 │ ...
-  
-function.css:86:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    85 │ }
-  > 86 │ @function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
-       │                ^
-    87 │     @return "Func";
-    88 │ }
-  
-function.css:86:97 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    85 │ }
-  > 86 │ @function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
-       │                                                                                                 ^
-    87 │     @return "Func";
-    88 │ }
-  
-function.css:86:179 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    85 │ }
-  > 86 │ @function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
-       │                                                                                                                                                                                   ^
-    87 │     @return "Func";
-    88 │ }
-  
-function.css:86:265 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    85 │ }
-  > 86 │ @function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
-       │                                                                                                                                                                                                                                                                         ^
-    87 │     @return "Func";
-    88 │ }
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    71: @function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/if-else.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/if-else.css.snap
index 446d1fe7f1b7..4df8fbddb429 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/if-else.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/if-else.css.snap
@@ -159,24 +159,21 @@ p {
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,102 +1,157 @@
+@@ -1,102 +1,154 @@
  @if $media == phonePortrait {
 -  $k: 0.15625;
 -} @else if $media == phoneLandscape {
 -  $k: 0.08803;
 -} @else if $media == tabletPortrait {
 -  $k: 0.065106;
-+  $
-+  k: 0.15625;
++  $k: .15625;
 +}
 +@else if $media == phoneLandscape {
-+  $
-+  k: 0.08803;
-+}
-+@else if $media == tabletPortrait {
-+  $
-+  k: 0.065106;
++  $k: .08803;
  }
++@else if $media == tabletPortrait {
++  $k: .065106;
++}
  p {
    @if $type == ocean {
    }
@@ -266,21 +263,17 @@ p {
    @if $type==ocean {
 -  } @else if $type==matador {
    }
--  @if $type == ocean {
--  } @else if $type == matador {
 +  @else if $type==matador {
 +  }
 +  @if $type  ==  ocean {
 +  }
 +  @else if  $type  ==  matador {
-   }
++  }
    @if $type == ocean {
 -  } @else if $type == matador {
    }
--  @if $type == ocean {
--  } @else if $type == matador {
 +  @else if $type == matador {
-   }
++  }
    @if $type == ocean {
 -  } @else if $type == matador {
    }
@@ -288,10 +281,7 @@ p {
 -  } @else if $type == matador {
 +  @else if
 +        $type == matador {
-   }
--  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
--    ==
--    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
++  }
 +  @if $type
 +        ==
 +        ocean {
@@ -300,13 +290,17 @@ p {
 +        $type
 +        ==
 +        matador {
-+  }
+   }
+-  @if $type == ocean {
+-  } @else if $type == matador {
 +  @if $type
 +
 +        ==
 +
 +        ocean {
-+  }
+   }
+-  @if $type == ocean {
+-  } @else if $type == matador {
 +
 +  @else if
 +
@@ -315,7 +309,10 @@ p {
 +        ==
 +
 +        matador {
-+  }
+   }
+-  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+-    ==
+-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
 +  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
      color: blue;
 -  } @else if
@@ -373,16 +370,13 @@ p {
 
 ```css
 @if $media == phonePortrait {
-  $
-  k: 0.15625;
+  $k: .15625;
 }
 @else if $media == phoneLandscape {
-  $
-  k: 0.08803;
+  $k: .08803;
 }
 @else if $media == tabletPortrait {
-  $
-  k: 0.065106;
+  $k: .065106;
 }
 p {
   @if $type == ocean {
@@ -533,745 +527,53 @@ p {
 
 # Errors
 ```
-if-else.css:1:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @if $media == phonePortrait {
-      │     ^
-    2 │     $k: .15625;
-    3 │ } @else if $media == phoneLandscape {
-  
 if-else.css:2:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     1 │ @if $media == phonePortrait {
   > 2 │     $k: .15625;
-      │     ^
+      │     ^^^^^^^^^^^
     3 │ } @else if $media == phoneLandscape {
     4 │     $k: .08803;
   
-if-else.css:3:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @if $media == phonePortrait {
-    2 │     $k: .15625;
-  > 3 │ } @else if $media == phoneLandscape {
-      │            ^
-    4 │     $k: .08803;
-    5 │ } @else if $media == tabletPortrait {
+  i SCSS only syntax
   
 if-else.css:4:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     2 │     $k: .15625;
     3 │ } @else if $media == phoneLandscape {
   > 4 │     $k: .08803;
-      │     ^
+      │     ^^^^^^^^^^^
     5 │ } @else if $media == tabletPortrait {
     6 │     $k: .065106;
   
-if-else.css:5:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ } @else if $media == phoneLandscape {
-    4 │     $k: .08803;
-  > 5 │ } @else if $media == tabletPortrait {
-      │            ^
-    6 │     $k: .065106;
-    7 │ }
+  i SCSS only syntax
   
 if-else.css:6:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     4 │     $k: .08803;
     5 │ } @else if $media == tabletPortrait {
   > 6 │     $k: .065106;
-      │     ^
+      │     ^^^^^^^^^^^^
     7 │ }
     8 │ p {
   
-if-else.css:9:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     7 │ }
-     8 │ p {
-   > 9 │     @if $type == ocean {}
-       │         ^
-    10 │     @if $type==ocean{}
-    11 │     @if  $type  ==  ocean  {}
-  
-if-else.css:10:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     8 │ p {
-     9 │     @if $type == ocean {}
-  > 10 │     @if $type==ocean{}
-       │         ^
-    11 │     @if  $type  ==  ocean  {}
-    12 │     @if $type
-  
-if-else.css:11:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     9 │     @if $type == ocean {}
-    10 │     @if $type==ocean{}
-  > 11 │     @if  $type  ==  ocean  {}
-       │          ^
-    12 │     @if $type
-    13 │         == ocean {}
-  
-if-else.css:12:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    10 │     @if $type==ocean{}
-    11 │     @if  $type  ==  ocean  {}
-  > 12 │     @if $type
-       │         ^
-    13 │         == ocean {}
-    14 │     @if
-  
-if-else.css:15:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    13 │         == ocean {}
-    14 │     @if
-  > 15 │     $type
-       │     ^
-    16 │     ==
-    17 │     ocean
-  
-if-else.css:22:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    20 │     @if
-    21 │ 
-  > 22 │     $type
-       │     ^
-    23 │ 
-    24 │     ==
-  
-if-else.css:31:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    30 │     }
-  > 31 │     @if (($type) == (ocean)) {}
-       │           ^
-    32 │     @if (($type)==(ocean)){}
-    33 │     @if  (  (  $type  )  ==  (  ocean  )  )  {}
-  
-if-else.css:32:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    30 │     }
-    31 │     @if (($type) == (ocean)) {}
-  > 32 │     @if (($type)==(ocean)){}
-       │           ^
-    33 │     @if  (  (  $type  )  ==  (  ocean  )  )  {}
-    34 │     @if (($type)
-  
-if-else.css:33:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    31 │     @if (($type) == (ocean)) {}
-    32 │     @if (($type)==(ocean)){}
-  > 33 │     @if  (  (  $type  )  ==  (  ocean  )  )  {}
-       │                ^
-    34 │     @if (($type)
-    35 │         == (ocean)) {}
-  
-if-else.css:34:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    32 │     @if (($type)==(ocean)){}
-    33 │     @if  (  (  $type  )  ==  (  ocean  )  )  {}
-  > 34 │     @if (($type)
-       │           ^
-    35 │         == (ocean)) {}
-    36 │     @if
-  
-if-else.css:39:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    37 │     (
-    38 │     (
-  > 39 │     $type
-       │     ^
-    40 │     )
-    41 │     ==
-  
-if-else.css:54:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    52 │     (
-    53 │ 
-  > 54 │     $type
-       │     ^
-    55 │ 
-    56 │     )
-  
-if-else.css:71:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    70 │     }
-  > 71 │     @if $type == ocean {
-       │         ^
-    72 │         color: blue;
-    73 │     } @else if $type == matador {
-  
-if-else.css:73:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    71 │     @if $type == ocean {
-    72 │         color: blue;
-  > 73 │     } @else if $type == matador {
-       │                ^
-    74 │         color: red;
-    75 │     } @else if $type == monster {
-  
-if-else.css:75:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    73 │     } @else if $type == matador {
-    74 │         color: red;
-  > 75 │     } @else if $type == monster {
-       │                ^
-    76 │         color: green;
-    77 │     } @else {
-  
-if-else.css:80:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    78 │         color: black;
-    79 │     }
-  > 80 │     @if $type == ocean {
-       │         ^
-    81 │     } @else if $type == matador {
-    82 │     }
-  
-if-else.css:81:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    79 │     }
-    80 │     @if $type == ocean {
-  > 81 │     } @else if $type == matador {
-       │                ^
-    82 │     }
-    83 │     @if $type==ocean{}@else if $type==matador{}
-  
-if-else.css:83:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    81 │     } @else if $type == matador {
-    82 │     }
-  > 83 │     @if $type==ocean{}@else if $type==matador{}
-       │         ^
-    84 │     @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-    85 │     @if $type == ocean {}
-  
-if-else.css:83:32 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    81 │     } @else if $type == matador {
-    82 │     }
-  > 83 │     @if $type==ocean{}@else if $type==matador{}
-       │                                ^
-    84 │     @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-    85 │     @if $type == ocean {}
-  
-if-else.css:84:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │     }
-    83 │     @if $type==ocean{}@else if $type==matador{}
-  > 84 │     @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-       │          ^
-    85 │     @if $type == ocean {}
-    86 │     @else if $type == matador {}
-  
-if-else.css:84:45 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │     }
-    83 │     @if $type==ocean{}@else if $type==matador{}
-  > 84 │     @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-       │                                             ^
-    85 │     @if $type == ocean {}
-    86 │     @else if $type == matador {}
-  
-if-else.css:85:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    83 │     @if $type==ocean{}@else if $type==matador{}
-    84 │     @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-  > 85 │     @if $type == ocean {}
-       │         ^
-    86 │     @else if $type == matador {}
-    87 │     @if
-  
-if-else.css:86:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    84 │     @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-    85 │     @if $type == ocean {}
-  > 86 │     @else if $type == matador {}
-       │              ^
-    87 │     @if
-    88 │         $type == ocean {}
-  
-if-else.css:88:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    86 │     @else if $type == matador {}
-    87 │     @if
-  > 88 │         $type == ocean {}
-       │         ^
-    89 │     @else if
-    90 │         $type == matador {}
-  
-if-else.css:90:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │         $type == ocean {}
-    89 │     @else if
-  > 90 │         $type == matador {}
-       │         ^
-    91 │     @if
-    92 │         $type
-  
-if-else.css:92:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    90 │         $type == matador {}
-    91 │     @if
-  > 92 │         $type
-       │         ^
-    93 │         ==
-    94 │         ocean
-  
-if-else.css:99:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     97 │     @else
-     98 │         if
-   > 99 │         $type
-        │         ^
-    100 │         ==
-    101 │         matador
-  
-if-else.css:106:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    104 │     @if
-    105 │ 
-  > 106 │         $type
-        │         ^
-    107 │ 
-    108 │         ==
-  
-if-else.css:120:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    118 │         if
-    119 │ 
-  > 120 │         $type
-        │         ^
-    121 │ 
-    122 │         ==
-  
-if-else.css:129:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    128 │         }
-  > 129 │     @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        │         ^
-    130 │         color: blue;
-    131 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-  
-if-else.css:129:98 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    128 │         }
-  > 129 │     @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        │                                                                                                  ^
-    130 │         color: blue;
-    131 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-  
-if-else.css:131:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    129 │     @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-    130 │         color: blue;
-  > 131 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        │                ^
-    132 │         color: red;
-    133 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-  
-if-else.css:131:105 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    129 │     @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-    130 │         color: blue;
-  > 131 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        │                                                                                                         ^
-    132 │         color: red;
-    133 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-  
-if-else.css:133:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    131 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-    132 │         color: red;
-  > 133 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        │                ^
-    134 │         color: green;
-    135 │     } @else {
-  
-if-else.css:133:105 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    131 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-    132 │         color: red;
-  > 133 │     } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        │                                                                                                         ^
-    134 │         color: green;
-    135 │     } @else {
-  
-if-else.css:138:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    136 │         color: black;
-    137 │     }
-  > 138 │     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-        │         ^
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  
-if-else.css:138:43 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    136 │         color: black;
-    137 │     }
-  > 138 │     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-        │                                           ^
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  
-if-else.css:139:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    137 │     }
-    138 │     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-  > 139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-        │         ^
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-    141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-  
-if-else.css:139:58 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    137 │     }
-    138 │     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-  > 139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-        │                                                          ^
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-    141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-  
-if-else.css:140:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    138 │     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-  > 140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-        │         ^
-    141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-  
-if-else.css:140:83 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    138 │     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-  > 140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-        │                                                                                   ^
-    141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-  
-if-else.css:141:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │         ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                    ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:65 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                 ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:87 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                       ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:108 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                            ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:127 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                               ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:150 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                      ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:169 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                         ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:193 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                 ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:212 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                    ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:233 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                                         ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:252 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                                                            ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:276 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                                                                                    ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:295 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                                                                                                       ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:319 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                                                                                                                               ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:141:338 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    139 │     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-  > 141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-        │                                                                                                                                                                                                                                                                                                                                                  ^
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  
-if-else.css:142:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    140 │     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-    141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-  > 142 │     @if (str-slice($item, 0, 1) == ":") {}
-        │                    ^
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-    144 │     @if ($type == ocean) {} @else if ($type == matador) {} @else {}
-  
-if-else.css:143:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    141 │     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-  > 143 │     @if (str-slice($item, 0, 3) == " : ") {}
-        │                    ^
-    144 │     @if ($type == ocean) {} @else if ($type == matador) {} @else {}
-    145 │ }
-  
-if-else.css:144:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  > 144 │     @if ($type == ocean) {} @else if ($type == matador) {} @else {}
-        │          ^
-    145 │ }
-    146 │ 
-  
-if-else.css:144:39 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    142 │     @if (str-slice($item, 0, 1) == ":") {}
-    143 │     @if (str-slice($item, 0, 3) == " : ") {}
-  > 144 │     @if ($type == ocean) {} @else if ($type == matador) {} @else {}
-        │                                       ^
-    145 │ }
-    146 │ 
+  i SCSS only syntax
   
 
 ```
 
 # Lines exceeding max width of 80 characters
 ```
-  127:   @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+  124:   @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+  127:   @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
   130:   @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-  133:   @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-  141:   @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
-  143:   @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {
-  145:   @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {
+  138:   @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
+  140:   @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {
+  142:   @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {
 ```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap
index fb41ccb307c4..22f1d988e8a7 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap
@@ -105,85 +105,42 @@ $dir: 'fonts';
  #main {
    @import "example";
  }
-@@ -32,49 +26,44 @@
+@@ -32,17 +26,10 @@
  }
  #main {
    @import "example";
 -}
 -
 -@import "test.less" {
- }
+-}
 -@import "test.less" {
 -  a: b;
 -  c: d;
--}
+ }
  
  @import url("foo");
 -$dir: "fonts";
-+$
-+dir: 'fonts';
++$dir: 'fonts';
  
--@import url("foo.css");
--@import url("foo.css");
  @import url("foo.css");
--@import url("foo.css");
--@import url("fineprint.css") print;
--@import url("fineprint.css") print;
--@import url("fineprint.css") print;
-+@import url('foo.css');
-+@import  url("foo.css");
-+@import   url("foo.css");
-+@import url("fineprint.css")print;
- @import url("fineprint.css") print;
--@import url("bluish.css") projection, tv;
--@import url("bluish.css") projection, tv;
--@import url("bluish.css") projection, tv;
--@import url("bluish.css") projection, tv;
--@import url("bluish.css") projection, tv;
-+@import url("fineprint.css")  print;
-+@import url("fineprint.css")
-+  print;
-+@import url("bluish.css") projection,tv;
+ @import url("foo.css");
+@@ -59,14 +46,9 @@
  @import url("bluish.css") projection, tv;
--@import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
-+@import url("bluish.css") projection ,tv;
-+@import url("bluish.css") projection , tv;
-+@import url("bluish.css") projection  ,  tv;
-+@import url("bluish.css")
-   projection,
-   tv;
+ @import url("bluish.css") projection, tv;
+ @import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
+-  projection,
+-  tv;
 -@import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
 -  projection tv;
--@import url("landscape.css") screen and (orientation: landscape);
++  projection, tv;
++@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
+ @import url("landscape.css") screen and (orientation: landscape);
 -@import "rounded-corners", "text-shadow";
 -@import "rounded-corners", "text-shadow";
 -$family: unquote("Droid+Sans");
-+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
-+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
-+@import url('landscape.css') screen and (orientation:landscape);
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
--@import url("foo.css");
--@import url("foo.css");
--@import url("foo.css");
--@import url("foo.css");
--@import url("foo bar baz.css");
-+@import url( "foo.css");
-+@import url("foo.css" );
-+@import url( "foo.css" );
-+@import url(  "foo.css"  );
- @import url("foo bar baz.css");
-+@import url(  "foo bar baz.css"  );
- @import url("foo  bar  baz.css");
--@import url("foo.css");
--@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
--@import url("foo.css,800");
-+@import url(
-+"foo.css"
-+);
-+@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600';
-+@import url(
-+"foo.css,800"
-+);
+ @import url("foo.css");
+ @import url("foo.css");
 ```
 
 # Output
@@ -220,44 +177,37 @@ $dir: 'fonts';
 }
 
 @import url("foo");
-$
-dir: 'fonts';
+$dir: 'fonts';
 
 @import url("foo.css");
-@import url('foo.css');
-@import  url("foo.css");
-@import   url("foo.css");
-@import url("fineprint.css")print;
+@import url("foo.css");
+@import url("foo.css");
+@import url("foo.css");
+@import url("fineprint.css") print;
+@import url("fineprint.css") print;
+@import url("fineprint.css") print;
 @import url("fineprint.css") print;
-@import url("fineprint.css")  print;
-@import url("fineprint.css")
-  print;
-@import url("bluish.css") projection,tv;
 @import url("bluish.css") projection, tv;
-@import url("bluish.css") projection ,tv;
-@import url("bluish.css") projection , tv;
-@import url("bluish.css") projection  ,  tv;
-@import url("bluish.css")
-  projection,
-  tv;
-@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
+@import url("bluish.css") projection, tv;
+@import url("bluish.css") projection, tv;
+@import url("bluish.css") projection, tv;
+@import url("bluish.css") projection, tv;
+@import url("bluish.css") projection, tv;
+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
+  projection, tv;
 @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
-@import url('landscape.css') screen and (orientation:landscape);
+@import url("landscape.css") screen and (orientation: landscape);
 @import url("http://fonts.googleapis.com/css?family=#{$family}");
-@import url( "foo.css");
-@import url("foo.css" );
-@import url( "foo.css" );
-@import url(  "foo.css"  );
+@import url("foo.css");
+@import url("foo.css");
+@import url("foo.css");
+@import url("foo.css");
+@import url("foo bar baz.css");
 @import url("foo bar baz.css");
-@import url(  "foo bar baz.css"  );
 @import url("foo  bar  baz.css");
-@import url(
-"foo.css"
-);
-@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600';
-@import url(
-"foo.css,800"
-);
+@import url("foo.css");
+@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
+@import url("foo.css,800");
 ```
 
 # Errors
@@ -277,84 +227,15 @@ import.css:6:29 parse ━━━━━━━━━━━━━━━━━━━
   
 import.css:42:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
-  
-    41 │ @import url('foo');
-  > 42 │ $dir: 'fonts';
-       │ ^
-    43 │ 
-    44 │ @import url("foo.css");
-  
-import.css:42:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Unexpected value or character.
-  
-    41 │ @import url('foo');
-  > 42 │ $dir: 'fonts';
-       │       ^^^^^^^
-    43 │ 
-    44 │ @import url("foo.css");
-  
-  i Expected one of:
-  
-  - hover
-  - focus
-  - active
-  - first-child
-  - last-child
-  - nth-child
-  - nth-last-child
-  - first-of-type
-  - last-of-type
-  - nth-of-type
-  - nth-last-of-type
-  - only-child
-  - only-of-type
-  - checked
-  - disabled
-  - enabled
-  - required
-  - optional
-  - valid
-  - invalid
-  - in-range
-  - out-of-range
-  - read-only
-  - read-write
-  - placeholder-shown
-  - default
-  - checked
-  - indeterminate
-  - blank
-  - empty
-  - root
-  - target
-  - lang
-  - not
-  - is
-  - where
-  - fullscreen
-  - link
-  - visited
-  - any-link
-  - local-link
-  - scope
-  - state
-  - current
-  - past
-  - future
-  
-import.css:42:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `;`
+  × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     41 │ @import url('foo');
   > 42 │ $dir: 'fonts';
-       │              ^
+       │ ^^^^^^^^^^^^^^
     43 │ 
     44 │ @import url("foo.css");
   
-  i Remove ;
+  i SCSS only syntax
   
 import.css:62:91 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
@@ -369,27 +250,10 @@ import.css:62:91 parse ━━━━━━━━━━━━━━━━━━━
   
   i Remove tv
   
-import.css:79:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `}` but instead the file ends
-  
-    77 │ "foo.css,800"
-    78 │ );
-  > 79 │ 
-       │ 
-  
-  i the file ends here
-  
-    77 │ "foo.css,800"
-    78 │ );
-  > 79 │ 
-       │ 
-  
 
 ```
 
 # Lines exceeding max width of 80 characters
 ```
-   52: @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
-   53: @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
+   50: @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
 ```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap
index 2f0bbcea276c..7a3563b97203 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap
@@ -401,280 +401,6 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-
 }
 ```
 
-# Errors
-```
-include.css:1:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-      │                        ^
-    2 │ @include mix(1px,2px,$arg2:10,2px 4px 6px);
-    3 │ @include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
-  
-include.css:2:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-  > 2 │ @include mix(1px,2px,$arg2:10,2px 4px 6px);
-      │                      ^
-    3 │ @include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
-    4 │ @include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
-  
-include.css:3:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-    2 │ @include mix(1px,2px,$arg2:10,2px 4px 6px);
-  > 3 │ @include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
-      │                            ^
-    4 │ @include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
-    5 │ @include mix(
-  
-include.css:4:33 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │ @include mix(1px,2px,$arg2:10,2px 4px 6px);
-    3 │ @include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
-  > 4 │ @include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
-      │                                 ^
-    5 │ @include mix(
-    6 │     1px,
-  
-include.css:8:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     6 │     1px,
-     7 │     2px,
-   > 8 │     $arg2: 10,
-       │     ^
-     9 │     2px  4px  6px
-    10 │ );
-  
-include.css:15:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    13 │     1px,
-    14 │     2px,
-  > 15 │     $arg2: 10,
-       │     ^
-    16 │     2px  4px  6px
-    17 │ );
-  
-include.css:25:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    23 │ 2px
-    24 │ ,
-  > 25 │ $arg2
-       │ ^
-    26 │ :
-    27 │ 10
-  
-include.css:48:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    46 │ ,
-    47 │ 
-  > 48 │ $arg2
-       │ ^
-    49 │ 
-    50 │ :
-  
-include.css:65:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    64 │ ;
-  > 65 │ @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-       │              ^
-    66 │ a {
-    67 │     @include global-variable-overriding;
-  
-include.css:65:100 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    64 │ ;
-  > 65 │ @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-       │                                                                                                    ^
-    66 │ a {
-    67 │     @include global-variable-overriding;
-  
-include.css:65:187 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    64 │ ;
-  > 65 │ @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-       │                                                                                                                                                                                           ^
-    66 │ a {
-    67 │     @include global-variable-overriding;
-  
-include.css:68:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    66 │ a {
-    67 │     @include global-variable-overriding;
-  > 68 │     @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-       │                  ^
-    69 │     @include apply-to-ie6-only {}
-    70 │     @include apply-to-ie6-only{}
-  
-include.css:68:104 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    66 │ a {
-    67 │     @include global-variable-overriding;
-  > 68 │     @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-       │                                                                                                        ^
-    69 │     @include apply-to-ie6-only {}
-    70 │     @include apply-to-ie6-only{}
-  
-include.css:68:191 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    66 │ a {
-    67 │     @include global-variable-overriding;
-  > 68 │     @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-       │                                                                                                                                                                                               ^
-    69 │     @include apply-to-ie6-only {}
-    70 │     @include apply-to-ie6-only{}
-  
-include.css:88:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    86 │ a {
-    87 │ @include section-type-1(
-  > 88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-       │ ^
-    89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-    90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-  
-include.css:88:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    86 │ a {
-    87 │ @include section-type-1(
-  > 88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-       │                       ^
-    89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-    90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-  
-include.css:89:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    87 │ @include section-type-1(
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-  > 89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-       │ ^
-    90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-    91 │ );
-  
-include.css:89:65 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    87 │ @include section-type-1(
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-  > 89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-       │                                                                 ^
-    90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-    91 │ );
-  
-include.css:89:98 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    87 │ @include section-type-1(
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-  > 89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-       │                                                                                                  ^
-    90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-    91 │ );
-  
-include.css:90:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-    89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-  > 90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-       │ ^
-    91 │ );
-    92 │ }
-  
-include.css:90:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-    89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-  > 90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-       │                      ^
-    91 │ );
-    92 │ }
-  
-include.css:90:62 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-    89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-  > 90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-       │                                                              ^
-    91 │ );
-    92 │ }
-  
-include.css:90:110 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ $header: (margin: 0 0 $margin-base, text-align: left),
-    89 │ $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-  > 90 │ $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-       │                                                                                                              ^
-    91 │ );
-    92 │ }
-  
-include.css:106:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    104 │ (
-    105 │ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-  > 106 │ border-color: $brand-primary
-        │               ^
-    107 │ )
-    108 │ );
-  
-include.css:116:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    114 │ (
-    115 │ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-  > 116 │ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
-        │               ^
-    117 │ )
-    118 │ );
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    58: @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap
index b7e806b7f9ff..c66ae64e8226 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap
@@ -359,611 +359,6 @@ $background
 }
 ```
 
-# Errors
-```
-mixin.css:21:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    19 │ }
-    20 │ 
-  > 21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-       │            ^
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  
-mixin.css:21:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    19 │ }
-    20 │ 
-  > 21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-       │                  ^
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  
-mixin.css:21:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    19 │ }
-    20 │ 
-  > 21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-       │                         ^
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  
-mixin.css:21:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    19 │ }
-    20 │ 
-  > 21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-       │                                    ^
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  
-mixin.css:22:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-  > 22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-       │            ^
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-  
-mixin.css:22:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-  > 22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-       │                 ^
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-  
-mixin.css:22:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-  > 22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-       │                       ^
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-  
-mixin.css:22:32 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-  > 22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-       │                                ^
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-  
-mixin.css:23:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-  > 23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-       │              ^
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-    25 │ @mixin mix(
-  
-mixin.css:23:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-  > 23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-       │                     ^
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-    25 │ @mixin mix(
-  
-mixin.css:23:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-  > 23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-       │                             ^
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-    25 │ @mixin mix(
-  
-mixin.css:23:42 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    21 │ @mixin mix($arg, $arg1, $arg2: 10, $args...) {}
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-  > 23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-       │                                          ^
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-    25 │ @mixin mix(
-  
-mixin.css:24:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  > 24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-       │                 ^
-    25 │ @mixin mix(
-    26 │     $arg,
-  
-mixin.css:24:26 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  > 24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-       │                          ^
-    25 │ @mixin mix(
-    26 │     $arg,
-  
-mixin.css:24:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  > 24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-       │                                    ^
-    25 │ @mixin mix(
-    26 │     $arg,
-  
-mixin.css:24:53 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    22 │ @mixin mix($arg,$arg1,$arg2:10,$args...){}
-    23 │ @mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
-  > 24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-       │                                                     ^
-    25 │ @mixin mix(
-    26 │     $arg,
-  
-mixin.css:26:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    24 │ @mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
-    25 │ @mixin mix(
-  > 26 │     $arg,
-       │     ^
-    27 │     $arg1,
-    28 │     $arg2: 10,
-  
-mixin.css:27:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    25 │ @mixin mix(
-    26 │     $arg,
-  > 27 │     $arg1,
-       │     ^
-    28 │     $arg2: 10,
-    29 │     $args...
-  
-mixin.css:28:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    26 │     $arg,
-    27 │     $arg1,
-  > 28 │     $arg2: 10,
-       │     ^
-    29 │     $args...
-    30 │ ) {}
-  
-mixin.css:29:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    27 │     $arg1,
-    28 │     $arg2: 10,
-  > 29 │     $args...
-       │     ^
-    30 │ ) {}
-    31 │ @mixin
-  
-mixin.css:33:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    31 │ @mixin
-    32 │ mix(
-  > 33 │     $arg,
-       │     ^
-    34 │     $arg1,
-    35 │     $arg2: 10,
-  
-mixin.css:34:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    32 │ mix(
-    33 │     $arg,
-  > 34 │     $arg1,
-       │     ^
-    35 │     $arg2: 10,
-    36 │     $args...
-  
-mixin.css:35:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    33 │     $arg,
-    34 │     $arg1,
-  > 35 │     $arg2: 10,
-       │     ^
-    36 │     $args...
-    37 │     ) {}
-  
-mixin.css:36:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    34 │     $arg1,
-    35 │     $arg2: 10,
-  > 36 │     $args...
-       │     ^
-    37 │     ) {}
-    38 │ @mixin
-  
-mixin.css:41:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    39 │ mix
-    40 │ (
-  > 41 │ $arg
-       │ ^
-    42 │ ,
-    43 │ $arg1
-  
-mixin.css:43:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    41 │ $arg
-    42 │ ,
-  > 43 │ $arg1
-       │ ^
-    44 │ ,
-    45 │ $arg2
-  
-mixin.css:45:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    43 │ $arg1
-    44 │ ,
-  > 45 │ $arg2
-       │ ^
-    46 │ :
-    47 │ 10
-  
-mixin.css:49:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    47 │ 10
-    48 │ ,
-  > 49 │ $args
-       │ ^
-    50 │ ...
-    51 │ )
-  
-mixin.css:60:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    58 │ (
-    59 │ 
-  > 60 │ $arg
-       │ ^
-    61 │ 
-    62 │ ,
-  
-mixin.css:64:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    62 │ ,
-    63 │ 
-  > 64 │ $arg1
-       │ ^
-    65 │ 
-    66 │ ,
-  
-mixin.css:68:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    66 │ ,
-    67 │ 
-  > 68 │ $arg2
-       │ ^
-    69 │ 
-    70 │ :
-  
-mixin.css:76:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    74 │ ,
-    75 │ 
-  > 76 │ $args
-       │ ^
-    77 │ 
-    78 │ ...
-  
-mixin.css:84:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │ {
-    83 │ }
-  > 84 │ @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
-       │            ^
-    85 │ @mixin component($conf: ()) {}
-    86 │ @mixin component($conf: ( )) {}
-  
-mixin.css:84:93 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │ {
-    83 │ }
-  > 84 │ @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
-       │                                                                                             ^
-    85 │ @mixin component($conf: ()) {}
-    86 │ @mixin component($conf: ( )) {}
-  
-mixin.css:84:175 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │ {
-    83 │ }
-  > 84 │ @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
-       │                                                                                                                                                                               ^
-    85 │ @mixin component($conf: ()) {}
-    86 │ @mixin component($conf: ( )) {}
-  
-mixin.css:84:261 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │ {
-    83 │ }
-  > 84 │ @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
-       │                                                                                                                                                                                                                                                                     ^
-    85 │ @mixin component($conf: ()) {}
-    86 │ @mixin component($conf: ( )) {}
-  
-mixin.css:85:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    83 │ }
-    84 │ @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
-  > 85 │ @mixin component($conf: ()) {}
-       │                  ^
-    86 │ @mixin component($conf: ( )) {}
-    87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-  
-mixin.css:86:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    84 │ @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
-    85 │ @mixin component($conf: ()) {}
-  > 86 │ @mixin component($conf: ( )) {}
-       │                  ^
-    87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-    88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-  
-mixin.css:87:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    85 │ @mixin component($conf: ()) {}
-    86 │ @mixin component($conf: ( )) {}
-  > 87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-       │                       ^
-    88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-    89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-  
-mixin.css:87:49 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    85 │ @mixin component($conf: ()) {}
-    86 │ @mixin component($conf: ( )) {}
-  > 87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-       │                                                 ^
-    88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-    89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-  
-mixin.css:88:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    86 │ @mixin component($conf: ( )) {}
-    87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-  > 88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-       │                        ^
-    89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-    90 │ @mixin button-variant(
-  
-mixin.css:88:52 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    86 │ @mixin component($conf: ( )) {}
-    87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-  > 88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-       │                                                    ^
-    89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-    90 │ @mixin button-variant(
-  
-mixin.css:89:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-    88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-  > 89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-       │                       ^
-    90 │ @mixin button-variant(
-    91 │     $hover-background: darken($background, 7.5%)
-  
-mixin.css:89:48 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    87 │ @mixin button-variant($hover-background: darken($background, 7.5%)) {}
-    88 │ @mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
-  > 89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-       │                                                ^
-    90 │ @mixin button-variant(
-    91 │     $hover-background: darken($background, 7.5%)
-  
-mixin.css:91:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-    90 │ @mixin button-variant(
-  > 91 │     $hover-background: darken($background, 7.5%)
-       │     ^
-    92 │ ) {}
-    93 │ @mixin
-  
-mixin.css:91:31 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    89 │ @mixin button-variant($hover-background:darken($background,7.5%)) {}
-    90 │ @mixin button-variant(
-  > 91 │     $hover-background: darken($background, 7.5%)
-       │                               ^
-    92 │ ) {}
-    93 │ @mixin
-  
-mixin.css:95:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    93 │ @mixin
-    94 │ button-variant(
-  > 95 │ $hover-background
-       │ ^
-    96 │ :
-    97 │ darken(
-  
-mixin.css:98:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     96 │ :
-     97 │ darken(
-   > 98 │ $background
-        │ ^
-     99 │ ,
-    100 │ 7.5%
-  
-mixin.css:104:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    102 │ )
-    103 │ {}
-  > 104 │ @mixin button-variant($foo: "...") {}
-        │                       ^
-    105 │ @mixin button-variant($foo: " ... ") {}
-    106 │ @mixin button-variant($foo: "  ...  ") {}
-  
-mixin.css:105:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    103 │ {}
-    104 │ @mixin button-variant($foo: "...") {}
-  > 105 │ @mixin button-variant($foo: " ... ") {}
-        │                       ^
-    106 │ @mixin button-variant($foo: "  ...  ") {}
-    107 │ @mixin sexy-border($color, $width, $foo: (color: red)) {}
-  
-mixin.css:106:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    104 │ @mixin button-variant($foo: "...") {}
-    105 │ @mixin button-variant($foo: " ... ") {}
-  > 106 │ @mixin button-variant($foo: "  ...  ") {}
-        │                       ^
-    107 │ @mixin sexy-border($color, $width, $foo: (color: red)) {}
-    108 │ 
-  
-mixin.css:107:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    105 │ @mixin button-variant($foo: " ... ") {}
-    106 │ @mixin button-variant($foo: "  ...  ") {}
-  > 107 │ @mixin sexy-border($color, $width, $foo: (color: red)) {}
-        │                    ^
-    108 │ 
-    109 │ @mixin selector($param: "value") {}
-  
-mixin.css:107:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    105 │ @mixin button-variant($foo: " ... ") {}
-    106 │ @mixin button-variant($foo: "  ...  ") {}
-  > 107 │ @mixin sexy-border($color, $width, $foo: (color: red)) {}
-        │                            ^
-    108 │ 
-    109 │ @mixin selector($param: "value") {}
-  
-mixin.css:107:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    105 │ @mixin button-variant($foo: " ... ") {}
-    106 │ @mixin button-variant($foo: "  ...  ") {}
-  > 107 │ @mixin sexy-border($color, $width, $foo: (color: red)) {}
-        │                                    ^
-    108 │ 
-    109 │ @mixin selector($param: "value") {}
-  
-mixin.css:109:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    107 │ @mixin sexy-border($color, $width, $foo: (color: red)) {}
-    108 │ 
-  > 109 │ @mixin selector($param: "value") {}
-        │                 ^
-    110 │ 
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    78: @mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap
index 8db22364ab6d..238f598d6126 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap
@@ -383,730 +383,6 @@ $gutter-width
 }
 ```
 
-# Errors
-```
-return.css:1:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @function grid-width($n) {
-      │                      ^
-    2 │     @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-    3 │ }
-  
-return.css:2:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @function grid-width($n) {
-  > 2 │     @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │             ^
-    3 │ }
-    4 │ @function grid-width($n) {
-  
-return.css:2:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @function grid-width($n) {
-  > 2 │     @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │                  ^
-    3 │ }
-    4 │ @function grid-width($n) {
-  
-return.css:2:33 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @function grid-width($n) {
-  > 2 │     @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │                                 ^
-    3 │ }
-    4 │ @function grid-width($n) {
-  
-return.css:2:43 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @function grid-width($n) {
-  > 2 │     @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │                                           ^
-    3 │ }
-    4 │ @function grid-width($n) {
-  
-return.css:4:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │     @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-    3 │ }
-  > 4 │ @function grid-width($n) {
-      │                      ^
-    5 │ @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-    6 │ }
-  
-return.css:5:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ }
-    4 │ @function grid-width($n) {
-  > 5 │ @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │         ^
-    6 │ }
-    7 │ @function grid-width($n) {
-  
-return.css:5:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ }
-    4 │ @function grid-width($n) {
-  > 5 │ @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │              ^
-    6 │ }
-    7 │ @function grid-width($n) {
-  
-return.css:5:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ }
-    4 │ @function grid-width($n) {
-  > 5 │ @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │                             ^
-    6 │ }
-    7 │ @function grid-width($n) {
-  
-return.css:5:39 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ }
-    4 │ @function grid-width($n) {
-  > 5 │ @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-      │                                       ^
-    6 │ }
-    7 │ @function grid-width($n) {
-  
-return.css:7:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    5 │ @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
-    6 │ }
-  > 7 │ @function grid-width($n) {
-      │                      ^
-    8 │ @return $n*$grid-width+($n-1)*$gutter-width/10;
-    9 │ }
-  
-return.css:8:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     6 │ }
-     7 │ @function grid-width($n) {
-   > 8 │ @return $n*$grid-width+($n-1)*$gutter-width/10;
-       │         ^
-     9 │ }
-    10 │ @function grid-width($n) {
-  
-return.css:8:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     6 │ }
-     7 │ @function grid-width($n) {
-   > 8 │ @return $n*$grid-width+($n-1)*$gutter-width/10;
-       │            ^
-     9 │ }
-    10 │ @function grid-width($n) {
-  
-return.css:8:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     6 │ }
-     7 │ @function grid-width($n) {
-   > 8 │ @return $n*$grid-width+($n-1)*$gutter-width/10;
-       │                         ^
-     9 │ }
-    10 │ @function grid-width($n) {
-  
-return.css:8:31 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     6 │ }
-     7 │ @function grid-width($n) {
-   > 8 │ @return $n*$grid-width+($n-1)*$gutter-width/10;
-       │                               ^
-     9 │ }
-    10 │ @function grid-width($n) {
-  
-return.css:10:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     8 │ @return $n*$grid-width+($n-1)*$gutter-width/10;
-     9 │ }
-  > 10 │ @function grid-width($n) {
-       │                      ^
-    11 │     @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
-    12 │ }
-  
-return.css:11:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     9 │ }
-    10 │ @function grid-width($n) {
-  > 11 │     @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
-       │             ^
-    12 │ }
-    13 │ @function grid-width($n) {
-  
-return.css:11:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     9 │ }
-    10 │ @function grid-width($n) {
-  > 11 │     @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
-       │                  ^
-    12 │ }
-    13 │ @function grid-width($n) {
-  
-return.css:11:34 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     9 │ }
-    10 │ @function grid-width($n) {
-  > 11 │     @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
-       │                                  ^
-    12 │ }
-    13 │ @function grid-width($n) {
-  
-return.css:11:45 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     9 │ }
-    10 │ @function grid-width($n) {
-  > 11 │     @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
-       │                                             ^
-    12 │ }
-    13 │ @function grid-width($n) {
-  
-return.css:13:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    11 │     @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
-    12 │ }
-  > 13 │ @function grid-width($n) {
-       │                      ^
-    14 │     @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
-    15 │ }
-  
-return.css:14:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    12 │ }
-    13 │ @function grid-width($n) {
-  > 14 │     @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
-       │              ^
-    15 │ }
-    16 │ @function grid-width($n) {
-  
-return.css:14:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    12 │ }
-    13 │ @function grid-width($n) {
-  > 14 │     @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
-       │                      ^
-    15 │ }
-    16 │ @function grid-width($n) {
-  
-return.css:14:41 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    12 │ }
-    13 │ @function grid-width($n) {
-  > 14 │     @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
-       │                                         ^
-    15 │ }
-    16 │ @function grid-width($n) {
-  
-return.css:14:57 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    12 │ }
-    13 │ @function grid-width($n) {
-  > 14 │     @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
-       │                                                         ^
-    15 │ }
-    16 │ @function grid-width($n) {
-  
-return.css:16:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    14 │     @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
-    15 │ }
-  > 16 │ @function grid-width($n) {
-       │                      ^
-    17 │     @return $n
-    18 │         *
-  
-return.css:17:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    15 │ }
-    16 │ @function grid-width($n) {
-  > 17 │     @return $n
-       │             ^
-    18 │         *
-    19 │         $grid-width
-  
-return.css:19:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    17 │     @return $n
-    18 │         *
-  > 19 │         $grid-width
-       │         ^
-    20 │         + (
-    21 │             $n
-  
-return.css:21:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    19 │         $grid-width
-    20 │         + (
-  > 21 │             $n
-       │             ^
-    22 │             -
-    23 │             1
-  
-return.css:26:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    24 │         )
-    25 │         *
-  > 26 │         $gutter-width
-       │         ^
-    27 │         /
-    28 │         10
-  
-return.css:31:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    29 │         ;
-    30 │ }
-  > 31 │ @function grid-width($n) {
-       │                      ^
-    32 │     @return
-    33 │         $n
-  
-return.css:33:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    31 │ @function grid-width($n) {
-    32 │     @return
-  > 33 │         $n
-       │         ^
-    34 │         *
-    35 │         $grid-width
-  
-return.css:35:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    33 │         $n
-    34 │         *
-  > 35 │         $grid-width
-       │         ^
-    36 │         + (
-    37 │             $n
-  
-return.css:37:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    35 │         $grid-width
-    36 │         + (
-  > 37 │             $n
-       │             ^
-    38 │             -
-    39 │             1
-  
-return.css:42:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    40 │         )
-    41 │         *
-  > 42 │         $gutter-width
-       │         ^
-    43 │         /
-    44 │         10
-  
-return.css:49:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    47 │ @function
-    48 │ grid-width(
-  > 49 │ $n
-       │ ^
-    50 │ )
-    51 │ {
-  
-return.css:53:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    51 │ {
-    52 │ @return
-  > 53 │ $n
-       │ ^
-    54 │ *
-    55 │ $grid-width
-  
-return.css:55:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    53 │ $n
-    54 │ *
-  > 55 │ $grid-width
-       │ ^
-    56 │ +
-    57 │ (
-  
-return.css:58:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    56 │ +
-    57 │ (
-  > 58 │ $n
-       │ ^
-    59 │ -
-    60 │ 1
-  
-return.css:63:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    61 │ )
-    62 │ *
-  > 63 │ $gutter-width
-       │ ^
-    64 │ /
-    65 │ 10
-  
-return.css:72:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    70 │ grid-width(
-    71 │ 
-  > 72 │ $n
-       │ ^
-    73 │ 
-    74 │ )
-  
-return.css:80:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    78 │ @return
-    79 │ 
-  > 80 │ $n
-       │ ^
-    81 │ 
-    82 │ *
-  
-return.css:84:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    82 │ *
-    83 │ 
-  > 84 │ $grid-width
-       │ ^
-    85 │ 
-    86 │ +
-  
-return.css:90:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ (
-    89 │ 
-  > 90 │ $n
-       │ ^
-    91 │ 
-    92 │ -
-  
-return.css:100:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     98 │ *
-     99 │ 
-  > 100 │ $gutter-width
-        │ ^
-    101 │ 
-    102 │ /
-  
-return.css:109:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ }
-  > 109 │ @function grid-width($n) {
-        │                      ^
-    110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-    111 │ }
-  
-return.css:110:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ }
-    109 │ @function grid-width($n) {
-  > 110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-        │             ^
-    111 │ }
-    112 │ @function extend($obj, $ext-obj) {
-  
-return.css:110:59 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ }
-    109 │ @function grid-width($n) {
-  > 110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-        │                                                           ^
-    111 │ }
-    112 │ @function extend($obj, $ext-obj) {
-  
-return.css:110:106 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ }
-    109 │ @function grid-width($n) {
-  > 110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-        │                                                                                                          ^
-    111 │ }
-    112 │ @function extend($obj, $ext-obj) {
-  
-return.css:110:157 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ }
-    109 │ @function grid-width($n) {
-  > 110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-        │                                                                                                                                                             ^
-    111 │ }
-    112 │ @function extend($obj, $ext-obj) {
-  
-return.css:112:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-    111 │ }
-  > 112 │ @function extend($obj, $ext-obj) {
-        │                  ^
-    113 │     @return map-merge($obj, $ext-obj);
-    114 │ }
-  
-return.css:112:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    110 │     @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
-    111 │ }
-  > 112 │ @function extend($obj, $ext-obj) {
-        │                        ^
-    113 │     @return map-merge($obj, $ext-obj);
-    114 │ }
-  
-return.css:113:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    111 │ }
-    112 │ @function extend($obj, $ext-obj) {
-  > 113 │     @return map-merge($obj, $ext-obj);
-        │                       ^
-    114 │ }
-    115 │ @function extend($obj, $ext-obj) {
-  
-return.css:113:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    111 │ }
-    112 │ @function extend($obj, $ext-obj) {
-  > 113 │     @return map-merge($obj, $ext-obj);
-        │                             ^
-    114 │ }
-    115 │ @function extend($obj, $ext-obj) {
-  
-return.css:115:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    113 │     @return map-merge($obj, $ext-obj);
-    114 │ }
-  > 115 │ @function extend($obj, $ext-obj) {
-        │                  ^
-    116 │     @return map-merge( $obj , $ext-obj ) ;
-    117 │ }
-  
-return.css:115:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    113 │     @return map-merge($obj, $ext-obj);
-    114 │ }
-  > 115 │ @function extend($obj, $ext-obj) {
-        │                        ^
-    116 │     @return map-merge( $obj , $ext-obj ) ;
-    117 │ }
-  
-return.css:116:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    114 │ }
-    115 │ @function extend($obj, $ext-obj) {
-  > 116 │     @return map-merge( $obj , $ext-obj ) ;
-        │                        ^
-    117 │ }
-    118 │ @function extend($obj, $ext-obj) {
-  
-return.css:116:31 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    114 │ }
-    115 │ @function extend($obj, $ext-obj) {
-  > 116 │     @return map-merge( $obj , $ext-obj ) ;
-        │                               ^
-    117 │ }
-    118 │ @function extend($obj, $ext-obj) {
-  
-return.css:118:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    116 │     @return map-merge( $obj , $ext-obj ) ;
-    117 │ }
-  > 118 │ @function extend($obj, $ext-obj) {
-        │                  ^
-    119 │     @return map-merge($obj,$ext-obj);
-    120 │ }
-  
-return.css:118:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    116 │     @return map-merge( $obj , $ext-obj ) ;
-    117 │ }
-  > 118 │ @function extend($obj, $ext-obj) {
-        │                        ^
-    119 │     @return map-merge($obj,$ext-obj);
-    120 │ }
-  
-return.css:119:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    117 │ }
-    118 │ @function extend($obj, $ext-obj) {
-  > 119 │     @return map-merge($obj,$ext-obj);
-        │                       ^
-    120 │ }
-    121 │ @function extend($obj, $ext-obj) {
-  
-return.css:119:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    117 │ }
-    118 │ @function extend($obj, $ext-obj) {
-  > 119 │     @return map-merge($obj,$ext-obj);
-        │                            ^
-    120 │ }
-    121 │ @function extend($obj, $ext-obj) {
-  
-return.css:121:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    119 │     @return map-merge($obj,$ext-obj);
-    120 │ }
-  > 121 │ @function extend($obj, $ext-obj) {
-        │                  ^
-    122 │     @return
-    123 │     map-merge(
-  
-return.css:121:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    119 │     @return map-merge($obj,$ext-obj);
-    120 │ }
-  > 121 │ @function extend($obj, $ext-obj) {
-        │                        ^
-    122 │     @return
-    123 │     map-merge(
-  
-return.css:124:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    122 │     @return
-    123 │     map-merge(
-  > 124 │     $obj
-        │     ^
-    125 │     ,
-    126 │     $ext-obj
-  
-return.css:126:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    124 │     $obj
-    125 │     ,
-  > 126 │     $ext-obj
-        │     ^
-    127 │     )
-    128 │     ;
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    93:   @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap
index adf586675af2..5c33cd44084f 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap
@@ -381,333 +381,6 @@ $i
 }
 ```
 
-# Errors
-```
-while.css:1:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 1 │ @while $i > 0 {}
-      │        ^
-    2 │ @while $i>0{}
-    3 │ @while  $i  >  0  {}
-  
-while.css:2:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @while $i > 0 {}
-  > 2 │ @while $i>0{}
-      │        ^
-    3 │ @while  $i  >  0  {}
-    4 │ @while $i
-  
-while.css:3:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ @while $i > 0 {}
-    2 │ @while $i>0{}
-  > 3 │ @while  $i  >  0  {}
-      │         ^
-    4 │ @while $i
-    5 │     >
-  
-while.css:4:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    2 │ @while $i>0{}
-    3 │ @while  $i  >  0  {}
-  > 4 │ @while $i
-      │        ^
-    5 │     >
-    6 │     0
-  
-while.css:9:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-     7 │     {}
-     8 │ @while
-   > 9 │     $i
-       │     ^
-    10 │     >
-    11 │     0
-  
-while.css:14:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    12 │     {}
-    13 │ @while
-  > 14 │ $i
-       │ ^
-    15 │ >
-    16 │ 0
-  
-while.css:21:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    19 │ @while
-    20 │ 
-  > 21 │ $i
-       │ ^
-    22 │ 
-    23 │ >
-  
-while.css:30:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    29 │ }
-  > 30 │ @while ($i > 0) {}
-       │         ^
-    31 │ @while ($i>0){}
-    32 │ @while ( $i > 0 ) {}
-  
-while.css:31:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    29 │ }
-    30 │ @while ($i > 0) {}
-  > 31 │ @while ($i>0){}
-       │         ^
-    32 │ @while ( $i > 0 ) {}
-    33 │ @while  (  $i  >  0  )  {}
-  
-while.css:32:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    30 │ @while ($i > 0) {}
-    31 │ @while ($i>0){}
-  > 32 │ @while ( $i > 0 ) {}
-       │          ^
-    33 │ @while  (  $i  >  0  )  {}
-    34 │ @while (
-  
-while.css:33:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    31 │ @while ($i>0){}
-    32 │ @while ( $i > 0 ) {}
-  > 33 │ @while  (  $i  >  0  )  {}
-       │            ^
-    34 │ @while (
-    35 │     $i > 0
-  
-while.css:35:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    33 │ @while  (  $i  >  0  )  {}
-    34 │ @while (
-  > 35 │     $i > 0
-       │     ^
-    36 │ ) {}
-    37 │ @while
-  
-while.css:38:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    36 │ ) {}
-    37 │ @while
-  > 38 │     ($i > 0) {}
-       │      ^
-    39 │ @while
-    40 │ (
-  
-while.css:41:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    39 │ @while
-    40 │ (
-  > 41 │ $i
-       │ ^
-    42 │ >
-    43 │ 0
-  
-while.css:51:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    49 │ (
-    50 │ 
-  > 51 │ $i
-       │ ^
-    52 │ 
-    53 │ >
-  
-while.css:62:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    61 │ }
-  > 62 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
-       │        ^
-    63 │ @while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-    64 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-  
-while.css:63:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    61 │ }
-    62 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
-  > 63 │ @while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-       │            ^
-    64 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-    65 │ @while (($i) > (0)) {}
-  
-while.css:64:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    62 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
-    63 │ @while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-  > 64 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-       │        ^
-    65 │ @while (($i) > (0)) {}
-    66 │ @while (($i)>(0)){}
-  
-while.css:64:100 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    62 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
-    63 │ @while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-  > 64 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-       │                                                                                                    ^
-    65 │ @while (($i) > (0)) {}
-    66 │ @while (($i)>(0)){}
-  
-while.css:65:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    63 │ @while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-    64 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-  > 65 │ @while (($i) > (0)) {}
-       │          ^
-    66 │ @while (($i)>(0)){}
-    67 │ @while  (  (  $i  )  >  (  0  )  )  {}
-  
-while.css:66:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    64 │ @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-    65 │ @while (($i) > (0)) {}
-  > 66 │ @while (($i)>(0)){}
-       │          ^
-    67 │ @while  (  (  $i  )  >  (  0  )  )  {}
-    68 │ @while (($i)
-  
-while.css:67:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    65 │ @while (($i) > (0)) {}
-    66 │ @while (($i)>(0)){}
-  > 67 │ @while  (  (  $i  )  >  (  0  )  )  {}
-       │               ^
-    68 │ @while (($i)
-    69 │     >
-  
-while.css:68:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    66 │ @while (($i)>(0)){}
-    67 │ @while  (  (  $i  )  >  (  0  )  )  {}
-  > 68 │ @while (($i)
-       │          ^
-    69 │     >
-    70 │     (0)
-  
-while.css:75:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    73 │ (
-    74 │ (
-  > 75 │ $i
-       │ ^
-    76 │ )
-    77 │ >
-  
-while.css:90:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    88 │ (
-    89 │ 
-  > 90 │ $i
-       │ ^
-    91 │ 
-    92 │ )
-  
-while.css:107:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    106 │ }
-  > 107 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-        │         ^
-    108 │ @while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-    109 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-  
-while.css:108:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    106 │ }
-    107 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-  > 108 │ @while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-        │             ^
-    109 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-    110 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-  
-while.css:109:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    107 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-    108 │ @while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-  > 109 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-        │         ^
-    110 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-    111 │ 
-  
-while.css:110:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ @while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-    109 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-  > 110 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-        │         ^
-    111 │ 
-  
-while.css:110:101 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    108 │ @while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-    109 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-  > 110 │ @while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-        │                                                                                                     ^
-    111 │ 
-  
-
-```
-
 # Lines exceeding max width of 80 characters
 ```
    55: @while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap
index 0ff9b1f75754..7399df19a0ff 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap
@@ -18,7 +18,7 @@ div {
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,11 +1,6 @@
+@@ -1,11 +1,4 @@
  div {
 -  border-left: 1px solid
 -    mix($warningBackgroundColors, $warningBorderColors, 50%);
@@ -30,9 +30,7 @@ div {
 -    Arial,
 -    sans-serif;
 +  border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-+  $
-+  fontFamily:
-+    "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
++  $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
 ```
 
@@ -41,9 +39,7 @@ div {
 ```css
 div {
   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-  $
-  fontFamily:
-    "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 ```
 
@@ -51,63 +47,46 @@ div {
 ```
 fill.css:2:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
-  
-    1 │ div {
-  > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-      │                              ^
-    3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    4 │ }
-  
-fill.css:2:31 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `warningBackgroundColors`
+  × SCSS variables are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     1 │ div {
   > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-      │                               ^^^^^^^^^^^^^^^^^^^^^^^
+      │                              ^^^^^^^^^^^^^^^^^^^^^^^^
     3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
     4 │ }
   
-  i Remove warningBackgroundColors
+  i SCSS only syntax
   
 fill.css:2:56 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variables are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     1 │ div {
   > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-      │                                                        ^
+      │                                                        ^^^^^^^^^^^^^^^^^^^^
     3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
     4 │ }
   
-fill.css:2:57 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `warningBorderColors`
-  
-    1 │ div {
-  > 2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
-      │                                                         ^^^^^^^^^^^^^^^^^^^
-    3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    4 │ }
-  
-  i Remove warningBorderColors
+  i SCSS only syntax
   
 fill.css:3:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     1 │ div {
     2 │   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
   > 3 │   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
-      │   ^
+      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     4 │ }
     5 │ 
   
+  i SCSS only syntax
+  
 
 ```
 
 # Lines exceeding max width of 80 characters
 ```
     2:   border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
+    3:   $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
 ```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/parens/empty-lines.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/parens/empty-lines.css.snap
index df2a783cc3dd..87dd5490113d 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/parens/empty-lines.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/parens/empty-lines.css.snap
@@ -26,24 +26,20 @@ $colours: (
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,7 +1,15 @@
--$colours: (
+@@ -1,7 +1,12 @@
+ $colours: (
 -  "text": $light-100,
 -  "background-primary": $dark-300,
-+$
-+colours: 
-+(
-+    "text"
-+: $light-100,
++    "text": $light-100,
 +    "background-primary": $dark-300,
 +
-+
-+
  
 -  "background-secondary": $dark-200,
 -  "background-tertiary": $dark-100
 +
 +
++
++
 +    "background-secondary": $dark-200,
 +    "background-tertiary": $dark-100
  );
@@ -52,11 +48,8 @@ $colours: (
 # Output
 
 ```css
-$
-colours: 
-(
-    "text"
-: $light-100,
+$colours: (
+    "text": $light-100,
     "background-primary": $dark-300,
 
 
@@ -73,283 +66,39 @@ colours:
 ```
 empty-lines.css:1:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
-  
-  > 1 │ $colours: (
-      │ ^
-    2 │     "text": $light-100,
-    3 │     "background-primary": $dark-300,
-  
-empty-lines.css:1:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Unexpected value or character.
-  
-  > 1 │ $colours: (
-      │           ^
-    2 │     "text": $light-100,
-    3 │     "background-primary": $dark-300,
-  
-  i Expected one of:
-  
-  - hover
-  - focus
-  - active
-  - first-child
-  - last-child
-  - nth-child
-  - nth-last-child
-  - first-of-type
-  - last-of-type
-  - nth-of-type
-  - nth-last-of-type
-  - only-child
-  - only-of-type
-  - checked
-  - disabled
-  - enabled
-  - required
-  - optional
-  - valid
-  - invalid
-  - in-range
-  - out-of-range
-  - read-only
-  - read-write
-  - placeholder-shown
-  - default
-  - checked
-  - indeterminate
-  - blank
-  - empty
-  - root
-  - target
-  - lang
-  - not
-  - is
-  - where
-  - fullscreen
-  - link
-  - visited
-  - any-link
-  - local-link
-  - scope
-  - state
-  - current
-  - past
-  - future
-  
-empty-lines.css:2:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ $colours: (
-  > 2 │     "text": $light-100,
-      │             ^
-    3 │     "background-primary": $dark-300,
-    4 │ 
-  
-empty-lines.css:2:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `light-100`
-  
-    1 │ $colours: (
-  > 2 │     "text": $light-100,
-      │              ^^^^^^^^^
-    3 │     "background-primary": $dark-300,
-    4 │ 
-  
-  i Remove light-100
-  
-empty-lines.css:3:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Expected a selector but instead found '"background-primary"'.
-  
-    1 │ $colours: (
-    2 │     "text": $light-100,
-  > 3 │     "background-primary": $dark-300,
-      │     ^^^^^^^^^^^^^^^^^^^^
-    4 │ 
-  
-  i Expected a selector here.
-  
-    1 │ $colours: (
-    2 │     "text": $light-100,
-  > 3 │     "background-primary": $dark-300,
-      │     ^^^^^^^^^^^^^^^^^^^^
-    4 │ 
-  
-empty-lines.css:3:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `:`
-  
-    1 │ $colours: (
-    2 │     "text": $light-100,
-  > 3 │     "background-primary": $dark-300,
-      │                         ^
-    4 │ 
-  
-  i Remove :
-  
-empty-lines.css:3:27 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ $colours: (
-    2 │     "text": $light-100,
-  > 3 │     "background-primary": $dark-300,
-      │                           ^
-    4 │ 
-  
-empty-lines.css:3:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `dark-300`
-  
-    1 │ $colours: (
-    2 │     "text": $light-100,
-  > 3 │     "background-primary": $dark-300,
-      │                            ^^^^^^^^
-    4 │ 
-  
-  i Remove dark-300
-  
-empty-lines.css:10:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Expected a selector but instead found '"background-secondary"'.
-  
-  > 10 │     "background-secondary": $dark-200,
-       │     ^^^^^^^^^^^^^^^^^^^^^^
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  
-  i Expected a selector here.
-  
-  > 10 │     "background-secondary": $dark-200,
-       │     ^^^^^^^^^^^^^^^^^^^^^^
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  
-empty-lines.css:10:27 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `:`
-  
-  > 10 │     "background-secondary": $dark-200,
-       │                           ^
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  
-  i Remove :
-  
-empty-lines.css:10:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-  > 10 │     "background-secondary": $dark-200,
-       │                             ^
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  
-empty-lines.css:10:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `dark-200`
+  × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
+   > 1 │ $colours: (
+       │ ^^^^^^^^^^^
+   > 2 │     "text": $light-100,
+   > 3 │     "background-primary": $dark-300,
+   > 4 │ 
+        ...
   > 10 │     "background-secondary": $dark-200,
-       │                              ^^^^^^^^
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  
-  i Remove dark-200
-  
-empty-lines.css:11:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Expected a selector but instead found '"background-tertiary"'.
-  
-    10 │     "background-secondary": $dark-200,
-  > 11 │     "background-tertiary": $dark-100
-       │     ^^^^^^^^^^^^^^^^^^^^^
-    12 │ );
-    13 │ 
-  
-  i Expected a selector here.
-  
-    10 │     "background-secondary": $dark-200,
-  > 11 │     "background-tertiary": $dark-100
-       │     ^^^^^^^^^^^^^^^^^^^^^
-    12 │ );
-    13 │ 
-  
-empty-lines.css:11:26 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `:`
-  
-    10 │     "background-secondary": $dark-200,
   > 11 │     "background-tertiary": $dark-100
-       │                          ^
+       │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     12 │ );
     13 │ 
   
-  i Remove :
-  
-empty-lines.css:11:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    10 │     "background-secondary": $dark-200,
-  > 11 │     "background-tertiary": $dark-100
-       │                            ^
-    12 │ );
-    13 │ 
-  
-empty-lines.css:11:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `dark-100`
-  
-    10 │     "background-secondary": $dark-200,
-  > 11 │     "background-tertiary": $dark-100
-       │                             ^^^^^^^^
-    12 │ );
-    13 │ 
-  
-  i Remove dark-100
+  i SCSS only syntax
   
 empty-lines.css:12:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × expected `,` but instead found `)`
+  × Expected a qualified rule, or an at rule but instead found ');'.
   
     10 │     "background-secondary": $dark-200,
     11 │     "background-tertiary": $dark-100
   > 12 │ );
-       │ ^
+       │ ^^
     13 │ 
   
-  i Remove )
-  
-empty-lines.css:12:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `,` but instead found `;`
+  i Expected a qualified rule, or an at rule here.
   
     10 │     "background-secondary": $dark-200,
     11 │     "background-tertiary": $dark-100
   > 12 │ );
-       │  ^
+       │ ^^
     13 │ 
   
-  i Remove ;
-  
-empty-lines.css:13:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × expected `}` but instead the file ends
-  
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  > 13 │ 
-       │ 
-  
-  i the file ends here
-  
-    11 │     "background-tertiary": $dark-100
-    12 │ );
-  > 13 │ 
-       │ 
-  
 
 ```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-mixins.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-mixins.css.snap
index c550d4355110..21500da38b77 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-mixins.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-mixins.css.snap
@@ -107,41 +107,9 @@ a {
 
 # Errors
 ```
-postcss-mixins.css:2:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    1 │ a {
-  > 2 │     @mixin $(theme)-colors;
-      │            ^
-    3 │ }
-    4 │ 
-  
-postcss-mixins.css:5:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ }
-    4 │ 
-  > 5 │ @define-mixin icon $network, $color: blue {
-      │                    ^
-    6 │     .icon.is-$(network) {
-    7 │         color: $color;
-  
-postcss-mixins.css:5:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
-  
-    3 │ }
-    4 │ 
-  > 5 │ @define-mixin icon $network, $color: blue {
-      │                              ^
-    6 │     .icon.is-$(network) {
-    7 │         color: $color;
-  
 postcss-mixins.css:6:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × expected `,` but instead found `$`
   
     5 │ @define-mixin icon $network, $color: blue {
   > 6 │     .icon.is-$(network) {
@@ -149,6 +117,8 @@ postcss-mixins.css:6:14 parse ━━━━━━━━━━━━━━━━
     7 │         color: $color;
     8 │         @mixin-content;
   
+  i Remove $
+  
 postcss-mixins.css:6:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × expected `,` but instead found `network`
@@ -175,18 +145,20 @@ postcss-mixins.css:6:23 parse ━━━━━━━━━━━━━━━━
   
 postcss-mixins.css:7:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variables are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     5 │ @define-mixin icon $network, $color: blue {
     6 │     .icon.is-$(network) {
   > 7 │         color: $color;
-      │                ^
+      │                ^^^^^^
     8 │         @mixin-content;
     9 │     }
   
+  i SCSS only syntax
+  
 postcss-mixins.css:10:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × expected `,` but instead found `$`
   
      8 │         @mixin-content;
      9 │     }
@@ -195,6 +167,8 @@ postcss-mixins.css:10:14 parse ━━━━━━━━━━━━━━━━
     11 │        color: white;
     12 │        background: $color;
   
+  i Remove $
+  
 postcss-mixins.css:10:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × expected `,` but instead found `network`
@@ -236,14 +210,16 @@ postcss-mixins.css:10:24 parse ━━━━━━━━━━━━━━━━
   
 postcss-mixins.css:12:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variables are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     10 │     .icon.is-$(network):hover {
     11 │        color: white;
   > 12 │        background: $color;
-       │                    ^
+       │                    ^^^^^^
     13 │    }
     14 │ }
   
+  i SCSS only syntax
+  
 
 ```
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-simple-vars.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-simple-vars.css.snap
index 742ded974ac3..8dc80d12be8e 100644
--- a/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-simple-vars.css.snap
+++ b/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-simple-vars.css.snap
@@ -52,21 +52,61 @@ color: @@(style)color123;
 ```
 postcss-simple-vars.css:1:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × Unexpected value or character.
   
   > 1 │ background-color: $$(style)Color;
       │                   ^
     2 │ background-color: $$(style)Color Color122;
     3 │ color: @@color;
   
-postcss-simple-vars.css:1:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
+  i Expected one of:
   
-  > 1 │ background-color: $$(style)Color;
-      │                    ^
-    2 │ background-color: $$(style)Color Color122;
-    3 │ color: @@color;
+  - hover
+  - focus
+  - active
+  - first-child
+  - last-child
+  - nth-child
+  - nth-last-child
+  - first-of-type
+  - last-of-type
+  - nth-of-type
+  - nth-last-of-type
+  - only-child
+  - only-of-type
+  - checked
+  - disabled
+  - enabled
+  - required
+  - optional
+  - valid
+  - invalid
+  - in-range
+  - out-of-range
+  - read-only
+  - read-write
+  - placeholder-shown
+  - default
+  - checked
+  - indeterminate
+  - blank
+  - empty
+  - root
+  - target
+  - lang
+  - not
+  - is
+  - where
+  - fullscreen
+  - link
+  - visited
+  - any-link
+  - local-link
+  - scope
+  - state
+  - current
+  - past
+  - future
   
 postcss-simple-vars.css:1:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
@@ -114,23 +154,23 @@ postcss-simple-vars.css:1:33 parse ━━━━━━━━━━━━━━━
   
 postcss-simple-vars.css:2:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × Unexpected value or character.
   
     1 │ background-color: $$(style)Color;
   > 2 │ background-color: $$(style)Color Color122;
-      │                   ^
+      │                   ^^^^^^^^^^^^^^^^^^^^^^^
     3 │ color: @@color;
     4 │ font: 100% $font-stack;
   
-postcss-simple-vars.css:2:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `$`
+  i Expected one of:
   
-    1 │ background-color: $$(style)Color;
-  > 2 │ background-color: $$(style)Color Color122;
-      │                    ^
-    3 │ color: @@color;
-    4 │ font: 100% $font-stack;
+  - identifier
+  - string
+  - number
+  - dimension
+  - ratio
+  - custom property
+  - function
   
 postcss-simple-vars.css:3:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
@@ -155,15 +195,17 @@ postcss-simple-vars.css:3:8 parse ━━━━━━━━━━━━━━━
   
 postcss-simple-vars.css:4:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × SCSS variables are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
   
     2 │ background-color: $$(style)Color Color122;
     3 │ color: @@color;
   > 4 │ font: 100% $font-stack;
-      │            ^
+      │            ^^^^^^^^^^^
     5 │ background-color: darken(@link-color, 10%);
     6 │ border: 1px solid var(--border-color);
   
+  i SCSS only syntax
+  
 postcss-simple-vars.css:5:26 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × Expected a declaration item but instead found '@'.
@@ -199,15 +241,25 @@ postcss-simple-vars.css:5:27 parse ━━━━━━━━━━━━━━━
   
 postcss-simple-vars.css:7:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × Unexpected value or character.
   
     5 │ background-color: darken(@link-color, 10%);
     6 │ border: 1px solid var(--border-color);
   > 7 │ color: $(style)color;
-      │        ^
+      │        ^^^^^^^^^^^^^
     8 │ color: @@(style) color123;
     9 │ color: @@(style)color123;
   
+  i Expected one of:
+  
+  - identifier
+  - string
+  - number
+  - dimension
+  - ratio
+  - custom property
+  - function
+  
 postcss-simple-vars.css:8:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × Unexpected value or character.
diff --git a/crates/biome_css_parser/src/lexer/mod.rs b/crates/biome_css_parser/src/lexer/mod.rs
index c5f2d35f5dab..793a72d3ad81 100644
--- a/crates/biome_css_parser/src/lexer/mod.rs
+++ b/crates/biome_css_parser/src/lexer/mod.rs
@@ -3,7 +3,7 @@
 mod tests;
 
 use crate::CssParserOptions;
-use biome_css_syntax::{CssSyntaxKind, CssSyntaxKind::*, T, TextLen, TextSize};
+use biome_css_syntax::{CssFileSource, CssSyntaxKind, CssSyntaxKind::*, T, TextLen, TextSize};
 use biome_parser::diagnostic::ParseDiagnostic;
 use biome_parser::lexer::{
     LexContext, Lexer, LexerCheckpoint, LexerWithCheckpoint, ReLexer, TokenFlags,
@@ -94,6 +94,8 @@ pub(crate) struct CssLexer<'src> {
     diagnostics: Vec<ParseDiagnostic>,
 
     options: CssParserOptions,
+
+    source_type: CssFileSource,
 }
 
 impl<'src> Lexer<'src> for CssLexer<'src> {
@@ -216,6 +218,7 @@ impl<'src> CssLexer<'src> {
             position: 0,
             diagnostics: vec![],
             options: CssParserOptions::default(),
+            source_type: CssFileSource::default(),
         }
     }
 
@@ -223,6 +226,13 @@ impl<'src> CssLexer<'src> {
         Self { options, ..self }
     }
 
+    pub(crate) fn with_source_type(self, source_type: CssFileSource) -> Self {
+        Self {
+            source_type,
+            ..self
+        }
+    }
+
     /// Bumps the current byte and creates a lexed token of the passed in kind
     fn consume_byte(&mut self, tok: CssSyntaxKind) -> CssSyntaxKind {
         self.advance(1);
@@ -327,6 +337,7 @@ impl<'src> CssLexer<'src> {
                 self.advance(1);
                 self.consume_byte(T!["$="])
             }
+            DOL => self.consume_byte(T![$]),
             UNI if self.options.is_metavariable_enabled() && self.is_metavariable_start() => {
                 self.consume_metavariable(GRIT_METAVARIABLE)
             }
@@ -1097,17 +1108,29 @@ impl<'src> CssLexer<'src> {
                 self.advance(2);
 
                 let mut has_newline = false;
+                let is_scss = self.source_type.is_scss();
+                let mut depth = 1u32;
 
                 while let Some(chr) = self.current_byte() {
                     match chr {
+                        b'/' if is_scss && self.peek_byte() == Some(b'*') => {
+                            self.advance(2);
+                            depth = depth.saturating_add(1);
+                        }
                         b'*' if self.peek_byte() == Some(b'/') => {
                             self.advance(2);
 
-                            if has_newline {
-                                self.after_newline = true;
-                                return MULTILINE_COMMENT;
-                            } else {
-                                return COMMENT;
+                            if is_scss {
+                                depth = depth.saturating_sub(1);
+                            }
+
+                            if !is_scss || depth == 0 {
+                                if has_newline {
+                                    self.after_newline = true;
+                                    return MULTILINE_COMMENT;
+                                } else {
+                                    return COMMENT;
+                                }
                             }
                         }
                         b'\n' | b'\r' => {
@@ -1133,7 +1156,7 @@ impl<'src> CssLexer<'src> {
                     COMMENT
                 }
             }
-            Some(b'/') if self.options.allow_wrong_line_comments => {
+            Some(b'/') if self.options.allow_wrong_line_comments || self.source_type.is_scss() => {
                 self.advance(2);
 
                 while let Some(chr) = self.current_byte() {
diff --git a/crates/biome_css_parser/src/parser.rs b/crates/biome_css_parser/src/parser.rs
index 33a216053297..50bea9c8c9a6 100644
--- a/crates/biome_css_parser/src/parser.rs
+++ b/crates/biome_css_parser/src/parser.rs
@@ -110,7 +110,7 @@ impl<'source> CssParser<'source> {
     ) -> Self {
         Self {
             context: ParserContext::default(),
-            source: CssTokenSource::from_str(source, options),
+            source: CssTokenSource::from_str(source, options, source_type),
             source_type,
             state: CssParserState::new(),
             options,
diff --git a/crates/biome_css_parser/src/syntax/block/declaration_block.rs b/crates/biome_css_parser/src/syntax/block/declaration_block.rs
index 54bc08ada89d..f30a8a6430d7 100644
--- a/crates/biome_css_parser/src/syntax/block/declaration_block.rs
+++ b/crates/biome_css_parser/src/syntax/block/declaration_block.rs
@@ -1,6 +1,6 @@
 use crate::parser::CssParser;
 use crate::syntax::block::ParseBlockBody;
-use crate::syntax::{DeclarationList, is_at_declaration};
+use crate::syntax::{DeclarationList, is_at_any_declaration};
 use biome_css_syntax::CssSyntaxKind;
 use biome_css_syntax::CssSyntaxKind::*;
 use biome_parser::CompletedMarker;
@@ -16,7 +16,7 @@ impl ParseBlockBody for DeclarationBlock {
     const BLOCK_KIND: CssSyntaxKind = CSS_DECLARATION_BLOCK;
 
     fn is_at_element(&self, p: &mut CssParser) -> bool {
-        is_at_declaration(p)
+        is_at_any_declaration(p)
     }
 
     fn parse_list(&mut self, p: &mut CssParser) {
diff --git a/crates/biome_css_parser/src/syntax/declaration.rs b/crates/biome_css_parser/src/syntax/declaration.rs
new file mode 100644
index 000000000000..06a80c8d5798
--- /dev/null
+++ b/crates/biome_css_parser/src/syntax/declaration.rs
@@ -0,0 +1,147 @@
+use crate::parser::CssParser;
+use crate::syntax::CssSyntaxFeatures;
+use crate::syntax::parse_error::{expected_declaration_item, scss_only_syntax_error};
+use crate::syntax::property::{is_at_any_property, parse_any_property};
+use crate::syntax::scss::{is_at_scss_declaration, parse_scss_declaration};
+use biome_css_syntax::CssSyntaxKind::*;
+use biome_css_syntax::{CssSyntaxKind, T};
+use biome_parser::parse_lists::ParseNodeList;
+use biome_parser::parse_recovery::{ParseRecoveryTokenSet, RecoveryResult};
+use biome_parser::prelude::ParsedSyntax;
+use biome_parser::prelude::ParsedSyntax::{Absent, Present};
+use biome_parser::{Parser, SyntaxFeature, token_set};
+
+pub(crate) struct DeclarationList;
+
+impl ParseNodeList for DeclarationList {
+    type Kind = CssSyntaxKind;
+    type Parser<'source> = CssParser<'source>;
+    const LIST_KIND: Self::Kind = CSS_DECLARATION_LIST;
+
+    fn parse_element(&mut self, p: &mut Self::Parser<'_>) -> ParsedSyntax {
+        parse_any_declaration_with_semicolon(p)
+    }
+
+    fn is_at_list_end(&self, p: &mut Self::Parser<'_>) -> bool {
+        p.at(T!['}'])
+    }
+
+    fn recover(
+        &mut self,
+        p: &mut Self::Parser<'_>,
+        parsed_element: ParsedSyntax,
+    ) -> RecoveryResult {
+        parsed_element.or_recover_with_token_set(
+            p,
+            &ParseRecoveryTokenSet::new(CSS_BOGUS, token_set!(T!['}'])),
+            expected_declaration_item,
+        )
+    }
+}
+
+pub(crate) fn is_at_declaration(p: &mut CssParser) -> bool {
+    is_at_any_property(p)
+}
+
+#[inline]
+pub(crate) fn parse_declaration(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_declaration(p) {
+        return Absent;
+    }
+
+    let m = p.start();
+
+    parse_any_property(p).ok();
+    parse_declaration_important(p).ok();
+
+    Present(m.complete(p, CSS_DECLARATION))
+}
+
+#[inline]
+pub(crate) fn is_at_any_declaration_with_semicolon(p: &mut CssParser) -> bool {
+    is_at_any_declaration(p) || is_at_empty_declaration(p)
+}
+
+#[inline]
+pub(crate) fn parse_any_declaration_with_semicolon(p: &mut CssParser) -> ParsedSyntax {
+    if is_at_empty_declaration(p) {
+        parse_empty_declaration(p)
+    } else if is_at_scss_declaration(p) {
+        CssSyntaxFeatures::Scss.parse_exclusive_syntax(p, parse_scss_declaration, |p, marker| {
+            scss_only_syntax_error(p, "SCSS variable declarations", marker.range(p))
+        })
+    } else if is_at_any_declaration_with_semicolon(p) {
+        parse_declaration_with_semicolon(p)
+    } else {
+        Absent
+    }
+}
+
+#[inline]
+pub(crate) fn is_at_any_declaration(p: &mut CssParser) -> bool {
+    is_at_declaration(p) || is_at_scss_declaration(p)
+}
+
+/// Parses a CSS declaration that may optionally end with a semicolon.
+///
+/// This function attempts to parse a single CSS declaration from the current position
+/// of the parser. It handles the optional semicolon (';') at the end of the declaration,
+/// adhering to CSS syntax rules where the semicolon is mandatory for all declarations
+/// except the last one in a block. In the case of the last declaration before a closing
+/// brace ('}'), the semicolon is optional. If the semicolon is omitted for declarations
+/// that are not at the end, the parser will raise an error.
+#[inline]
+pub(crate) fn parse_declaration_with_semicolon(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_declaration(p) {
+        return Absent;
+    }
+
+    let m = p.start();
+
+    parse_declaration(p).ok();
+
+    // If the next token is a closing brace ('}'), the semicolon is optional.
+    // Otherwise, a semicolon is expected and the parser will enforce its presence.
+    // div { color: red; }
+    // div { color: red }
+    if !p.at(T!['}']) {
+        if p.nth_at(1, T!['}']) {
+            p.eat(T![;]);
+        } else {
+            p.expect(T![;]);
+        }
+    }
+
+    Present(m.complete(p, CSS_DECLARATION_WITH_SEMICOLON))
+}
+
+#[inline]
+pub(crate) fn is_at_empty_declaration(p: &mut CssParser) -> bool {
+    p.at(T![;])
+}
+
+#[inline]
+pub(crate) fn parse_empty_declaration(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_empty_declaration(p) {
+        return Absent;
+    }
+    let m = p.start();
+    p.bump(T![;]);
+    Present(m.complete(p, CSS_EMPTY_DECLARATION))
+}
+
+#[inline]
+fn is_at_declaration_important(p: &mut CssParser) -> bool {
+    p.at(T![!]) && p.nth_at(1, T![important])
+}
+
+#[inline]
+fn parse_declaration_important(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_declaration_important(p) {
+        return Absent;
+    }
+    let m = p.start();
+    p.bump(T![!]);
+    p.bump(T![important]);
+    Present(m.complete(p, CSS_DECLARATION_IMPORTANT))
+}
diff --git a/crates/biome_css_parser/src/syntax/mod.rs b/crates/biome_css_parser/src/syntax/mod.rs
index 7e165e93bd76..6b3fee21955b 100644
--- a/crates/biome_css_parser/src/syntax/mod.rs
+++ b/crates/biome_css_parser/src/syntax/mod.rs
@@ -1,8 +1,10 @@
 mod at_rule;
 mod block;
 mod css_modules;
+mod declaration;
 mod parse_error;
 mod property;
+mod scss;
 mod selector;
 mod util;
 mod value;
@@ -12,11 +14,14 @@ use crate::parser::CssParser;
 use crate::syntax::at_rule::{is_at_at_rule, parse_at_rule};
 use crate::syntax::block::{DeclarationOrRuleList, parse_declaration_or_rule_list_block};
 use crate::syntax::parse_error::{
-    expected_any_rule, expected_non_css_wide_keyword_identifier, tailwind_disabled,
+    expected_any_rule, expected_component_value, expected_non_css_wide_keyword_identifier,
+    scss_only_syntax_error, tailwind_disabled,
 };
 use crate::syntax::property::color::{is_at_color, parse_color};
 use crate::syntax::property::unicode_range::{is_at_unicode_range, parse_unicode_range};
-use crate::syntax::property::{is_at_any_property, parse_any_property};
+use crate::syntax::scss::{
+    is_at_scss_declaration, is_at_scss_identifier, parse_scss_declaration, parse_scss_identifier,
+};
 use crate::syntax::selector::SelectorList;
 use crate::syntax::selector::is_nth_at_selector;
 use crate::syntax::selector::relative_selector::{RelativeSelectorList, is_at_relative_selector};
@@ -33,9 +38,9 @@ use biome_parser::{Parser, SyntaxFeature, token_set};
 use value::dimension::{is_at_any_dimension, parse_any_dimension};
 use value::function::{is_at_any_function, parse_any_function};
 
-use self::parse_error::{expected_component_value, expected_declaration_item};
-
 pub(crate) enum CssSyntaxFeatures {
+    /// Enable support for SCSS-specific syntax.
+    Scss,
     /// Enable support for Tailwind CSS directives and syntax.
     Tailwind,
 
@@ -46,11 +51,17 @@ pub(crate) enum CssSyntaxFeatures {
     CssModulesWithVue,
 }
 
+pub(crate) use declaration::{
+    DeclarationList, is_at_any_declaration, is_at_any_declaration_with_semicolon,
+    is_at_declaration, parse_any_declaration_with_semicolon, parse_declaration,
+};
+
 impl SyntaxFeature for CssSyntaxFeatures {
     type Parser<'source> = CssParser<'source>;
 
     fn is_supported(&self, p: &Self::Parser<'_>) -> bool {
         match self {
+            Self::Scss => p.source_type.is_scss(),
             Self::Tailwind => p.options().is_tailwind_directives_enabled(),
             Self::CssModules => p.options().is_css_modules_enabled(),
             Self::CssModulesWithVue => p.options().is_css_modules_vue_enabled(),
@@ -88,7 +99,7 @@ impl RuleList {
 
 #[inline]
 pub(crate) fn is_at_rule_list_element(p: &mut CssParser) -> bool {
-    is_at_at_rule(p) || is_at_qualified_rule(p)
+    is_at_at_rule(p) || is_at_scss_declaration(p) || is_at_qualified_rule(p)
 }
 
 struct RuleListParseRecovery {
@@ -119,6 +130,14 @@ impl ParseNodeList for RuleList {
     fn parse_element(&mut self, p: &mut Self::Parser<'_>) -> ParsedSyntax {
         if is_at_at_rule(p) {
             parse_at_rule(p)
+        } else if is_at_scss_declaration(p) {
+            CssSyntaxFeatures::Scss.parse_exclusive_syntax(
+                p,
+                parse_scss_declaration,
+                |p, marker| {
+                    scss_only_syntax_error(p, "SCSS variable declarations", marker.range(p))
+                },
+            )
         } else if is_at_qualified_rule(p) {
             parse_qualified_rule(p)
         } else {
@@ -191,131 +210,6 @@ pub(crate) fn parse_nested_qualified_rule(p: &mut CssParser) -> ParsedSyntax {
     Present(m.complete(p, CSS_NESTED_QUALIFIED_RULE))
 }
 
-pub(crate) struct DeclarationList;
-
-impl ParseNodeList for DeclarationList {
-    type Kind = CssSyntaxKind;
-    type Parser<'source> = CssParser<'source>;
-    const LIST_KIND: Self::Kind = CSS_DECLARATION_LIST;
-
-    fn parse_element(&mut self, p: &mut Self::Parser<'_>) -> ParsedSyntax {
-        parse_declaration_with_semicolon(p)
-    }
-
-    fn is_at_list_end(&self, p: &mut Self::Parser<'_>) -> bool {
-        p.at(T!['}'])
-    }
-
-    fn recover(
-        &mut self,
-        p: &mut Self::Parser<'_>,
-        parsed_element: ParsedSyntax,
-    ) -> RecoveryResult {
-        parsed_element.or_recover_with_token_set(
-            p,
-            &ParseRecoveryTokenSet::new(CSS_BOGUS, token_set!(T!['}'])),
-            expected_declaration_item,
-        )
-    }
-}
-
-pub(crate) fn is_at_declaration(p: &mut CssParser) -> bool {
-    is_at_any_property(p)
-}
-#[inline]
-pub(crate) fn parse_declaration(p: &mut CssParser) -> ParsedSyntax {
-    if !is_at_declaration(p) {
-        return Absent;
-    }
-
-    let m = p.start();
-
-    parse_any_property(p).ok();
-    parse_declaration_important(p).ok();
-
-    Present(m.complete(p, CSS_DECLARATION))
-}
-
-#[inline]
-pub(crate) fn is_at_any_declaration_with_semicolon(p: &mut CssParser) -> bool {
-    is_at_declaration(p) || is_at_empty_declaration(p)
-}
-
-#[inline]
-pub(crate) fn parse_any_declaration_with_semicolon(p: &mut CssParser) -> ParsedSyntax {
-    if is_at_empty_declaration(p) {
-        parse_empty_declaration(p)
-    } else if is_at_any_declaration_with_semicolon(p) {
-        parse_declaration_with_semicolon(p)
-    } else {
-        Absent
-    }
-}
-
-/// Parses a CSS declaration that may optionally end with a semicolon.
-///
-/// This function attempts to parse a single CSS declaration from the current position
-/// of the parser. It handles the optional semicolon (';') at the end of the declaration,
-/// adhering to CSS syntax rules where the semicolon is mandatory for all declarations
-/// except the last one in a block. In the case of the last declaration before a closing
-/// brace ('}'), the semicolon is optional. If the semicolon is omitted for declarations
-/// that are not at the end, the parser will raise an error.
-#[inline]
-pub(crate) fn parse_declaration_with_semicolon(p: &mut CssParser) -> ParsedSyntax {
-    if !is_at_declaration(p) {
-        return Absent;
-    }
-
-    let m = p.start();
-
-    parse_declaration(p).ok();
-
-    // If the next token is a closing brace ('}') or an EOF, the semicolon is optional.
-    // Otherwise, a semicolon is expected and the parser will enforce its presence.
-    // div { color: red; }
-    // div { color: red }
-    if !p.at(T!['}']) || p.at(EOF) {
-        if p.nth_at(1, T!['}']) || p.nth_at(1, EOF) {
-            p.eat(T![;]);
-        } else {
-            p.expect(T![;]);
-        }
-    }
-
-    Present(m.complete(p, CSS_DECLARATION_WITH_SEMICOLON))
-}
-
-#[inline]
-pub(crate) fn is_at_empty_declaration(p: &mut CssParser) -> bool {
-    p.at(T![;])
-}
-
-#[inline]
-pub(crate) fn parse_empty_declaration(p: &mut CssParser) -> ParsedSyntax {
-    if !is_at_empty_declaration(p) {
-        return Absent;
-    }
-    let m = p.start();
-    p.bump(T![;]);
-    Present(m.complete(p, CSS_EMPTY_DECLARATION))
-}
-
-#[inline]
-fn is_at_declaration_important(p: &mut CssParser) -> bool {
-    p.at(T![!]) && p.nth_at(1, T![important])
-}
-
-#[inline]
-fn parse_declaration_important(p: &mut CssParser) -> ParsedSyntax {
-    if !is_at_declaration_important(p) {
-        return Absent;
-    }
-    let m = p.start();
-    p.bump(T![!]);
-    p.bump(T![important]);
-    Present(m.complete(p, CSS_DECLARATION_IMPORTANT))
-}
-
 #[inline]
 fn is_at_metavariable(p: &mut CssParser) -> bool {
     p.at(GRIT_METAVARIABLE)
@@ -339,6 +233,7 @@ fn parse_metavariable(p: &mut CssParser) -> ParsedSyntax {
 #[inline]
 pub(crate) fn is_at_any_value(p: &mut CssParser) -> bool {
     is_at_any_function(p)
+        || is_at_scss_identifier(p)
         || is_at_identifier(p)
         || p.at(CSS_STRING_LITERAL)
         || is_at_any_dimension(p)
@@ -352,7 +247,11 @@ pub(crate) fn is_at_any_value(p: &mut CssParser) -> bool {
 
 #[inline]
 pub(crate) fn parse_any_value(p: &mut CssParser) -> ParsedSyntax {
-    if is_at_any_function(p) {
+    if is_at_scss_identifier(p) {
+        CssSyntaxFeatures::Scss.parse_exclusive_syntax(p, parse_scss_identifier, |p, m| {
+            scss_only_syntax_error(p, "SCSS variables", m.range(p))
+        })
+    } else if is_at_any_function(p) {
         parse_any_function(p)
     } else if is_at_dashed_identifier(p) {
         if p.nth_at(1, T![-]) && p.nth_at(2, T![*]) {
diff --git a/crates/biome_css_parser/src/syntax/parse_error.rs b/crates/biome_css_parser/src/syntax/parse_error.rs
index 440a0a981759..4893542fa550 100644
--- a/crates/biome_css_parser/src/syntax/parse_error.rs
+++ b/crates/biome_css_parser/src/syntax/parse_error.rs
@@ -243,3 +243,17 @@ pub(crate) fn tailwind_disabled(p: &CssParser, range: TextRange) -> ParseDiagnos
 pub(crate) fn expected_tw_source(p: &CssParser, range: TextRange) -> ParseDiagnostic {
     expected_any(&["string literal", "inline(\"...\")"], range, p)
 }
+
+pub(crate) fn scss_only_syntax_error(
+    p: &CssParser,
+    syntax: &str,
+    range: TextRange,
+) -> ParseDiagnostic {
+    p.err_builder(
+        format!(
+            "{syntax} are an SCSS only feature. Convert your file to an SCSS file or remove the syntax."
+        ),
+        range,
+    )
+        .with_hint(markup! { "SCSS only syntax" })
+}
diff --git a/crates/biome_css_parser/src/syntax/scss/declaration.rs b/crates/biome_css_parser/src/syntax/scss/declaration.rs
new file mode 100644
index 000000000000..2288681ae9a4
--- /dev/null
+++ b/crates/biome_css_parser/src/syntax/scss/declaration.rs
@@ -0,0 +1,137 @@
+use super::is_at_scss_identifier;
+use super::parse_scss_identifier;
+use crate::parser::CssParser;
+use crate::syntax::property::GenericComponentValueList;
+use crate::syntax::{is_at_identifier, is_nth_at_identifier, parse_regular_identifier};
+use biome_css_syntax::CssSyntaxKind::{
+    EOF, SCSS_DECLARATION, SCSS_NAMESPACED_IDENTIFIER, SCSS_VARIABLE_MODIFIER,
+    SCSS_VARIABLE_MODIFIER_LIST,
+};
+use biome_css_syntax::{CssSyntaxKind, T};
+use biome_parser::diagnostic::expected_token_any;
+use biome_parser::parse_lists::ParseNodeList;
+use biome_parser::parse_recovery::{RecoveryError, RecoveryResult};
+use biome_parser::prelude::ParsedSyntax;
+use biome_parser::prelude::ParsedSyntax::{Absent, Present};
+use biome_parser::{Parser, TokenSet, token_set};
+
+#[inline]
+pub(crate) fn is_at_scss_declaration(p: &mut CssParser) -> bool {
+    if is_at_scss_identifier(p) {
+        p.nth_at(2, T![:])
+    } else if is_at_scss_namespaced_identifier(p) {
+        p.nth_at(4, T![:])
+    } else {
+        false
+    }
+}
+
+#[inline]
+pub(crate) fn parse_scss_declaration(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_scss_declaration(p) {
+        return Absent;
+    }
+
+    let m = p.start();
+
+    parse_scss_declaration_name(p).ok();
+    p.expect(T![:]);
+
+    GenericComponentValueList.parse_list(p);
+    ScssVariableModifierList.parse_list(p);
+
+    if !p.at(T!['}']) && !p.at(EOF) {
+        if p.nth_at(1, T!['}']) {
+            p.eat(T![;]);
+        } else {
+            p.expect(T![;]);
+        }
+    }
+
+    Present(m.complete(p, SCSS_DECLARATION))
+}
+
+#[inline]
+fn is_at_scss_namespaced_identifier(p: &mut CssParser) -> bool {
+    is_nth_at_identifier(p, 0)
+        && p.nth_at(1, T![.])
+        && p.nth_at(2, T![$])
+        && is_nth_at_identifier(p, 3)
+}
+
+#[inline]
+fn parse_scss_namespaced_identifier(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_scss_namespaced_identifier(p) {
+        return Absent;
+    }
+
+    let m = p.start();
+    parse_regular_identifier(p).ok();
+    p.expect(T![.]);
+    parse_scss_identifier(p).ok();
+    Present(m.complete(p, SCSS_NAMESPACED_IDENTIFIER))
+}
+
+#[inline]
+fn parse_scss_declaration_name(p: &mut CssParser) -> ParsedSyntax {
+    if is_at_scss_namespaced_identifier(p) {
+        parse_scss_namespaced_identifier(p)
+    } else {
+        parse_scss_identifier(p)
+    }
+}
+
+#[inline]
+fn is_at_scss_variable_modifier(p: &mut CssParser) -> bool {
+    p.at(T![!])
+}
+
+const SCSS_VARIABLE_MODIFIER_SET: TokenSet<CssSyntaxKind> = token_set!(T![default], T![global]);
+
+#[inline]
+fn parse_scss_variable_modifier(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_scss_variable_modifier(p) {
+        return Absent;
+    }
+
+    let m = p.start();
+    p.bump(T![!]);
+
+    if p.at_ts(SCSS_VARIABLE_MODIFIER_SET) {
+        p.bump_ts(SCSS_VARIABLE_MODIFIER_SET);
+    } else {
+        p.error(expected_token_any(&[T![default], T![global]]));
+        if is_at_identifier(p) {
+            p.bump_any();
+        }
+    }
+
+    Present(m.complete(p, SCSS_VARIABLE_MODIFIER))
+}
+
+struct ScssVariableModifierList;
+
+impl ParseNodeList for ScssVariableModifierList {
+    type Kind = CssSyntaxKind;
+    type Parser<'source> = CssParser<'source>;
+    const LIST_KIND: Self::Kind = SCSS_VARIABLE_MODIFIER_LIST;
+
+    fn parse_element(&mut self, p: &mut Self::Parser<'_>) -> ParsedSyntax {
+        parse_scss_variable_modifier(p)
+    }
+
+    fn is_at_list_end(&self, p: &mut Self::Parser<'_>) -> bool {
+        !is_at_scss_variable_modifier(p)
+    }
+
+    fn recover(
+        &mut self,
+        _p: &mut Self::Parser<'_>,
+        parsed_element: ParsedSyntax,
+    ) -> RecoveryResult {
+        match parsed_element {
+            Absent => Err(RecoveryError::AlreadyRecovered),
+            Present(m) => Ok(m),
+        }
+    }
+}
diff --git a/crates/biome_css_parser/src/syntax/scss/mod.rs b/crates/biome_css_parser/src/syntax/scss/mod.rs
new file mode 100644
index 000000000000..693435b7efd0
--- /dev/null
+++ b/crates/biome_css_parser/src/syntax/scss/mod.rs
@@ -0,0 +1,28 @@
+mod declaration;
+
+use crate::parser::CssParser;
+use crate::syntax::{is_nth_at_identifier, parse_regular_identifier};
+use biome_css_syntax::CssSyntaxKind::SCSS_IDENTIFIER;
+use biome_css_syntax::T;
+use biome_parser::Parser;
+use biome_parser::prelude::ParsedSyntax;
+use biome_parser::prelude::ParsedSyntax::{Absent, Present};
+
+pub(crate) use declaration::{is_at_scss_declaration, parse_scss_declaration};
+
+#[inline]
+pub(crate) fn is_at_scss_identifier(p: &mut CssParser) -> bool {
+    p.at(T![$]) && is_nth_at_identifier(p, 1)
+}
+
+#[inline]
+pub(crate) fn parse_scss_identifier(p: &mut CssParser) -> ParsedSyntax {
+    if !is_at_scss_identifier(p) {
+        return Absent;
+    }
+
+    let m = p.start();
+    p.bump(T![$]);
+    parse_regular_identifier(p).ok();
+    Present(m.complete(p, SCSS_IDENTIFIER))
+}
diff --git a/crates/biome_css_parser/src/token_source.rs b/crates/biome_css_parser/src/token_source.rs
index e1497f2eee78..a1913d62f691 100644
--- a/crates/biome_css_parser/src/token_source.rs
+++ b/crates/biome_css_parser/src/token_source.rs
@@ -1,7 +1,7 @@
 use crate::CssParserOptions;
 use crate::lexer::{CssLexContext, CssLexer, CssReLexContext};
 use biome_css_syntax::CssSyntaxKind::EOF;
-use biome_css_syntax::{CssSyntaxKind, TextRange};
+use biome_css_syntax::{CssFileSource, CssSyntaxKind, TextRange};
 use biome_parser::diagnostic::ParseDiagnostic;
 use biome_parser::lexer::BufferedLexer;
 use biome_parser::prelude::{BumpWithContext, TokenSource};
@@ -27,8 +27,14 @@ impl<'src> CssTokenSource<'src> {
     }
 
     /// Creates a new token source for the given string
-    pub fn from_str(source: &'src str, options: CssParserOptions) -> Self {
-        let lexer = CssLexer::from_str(source).with_options(options);
+    pub fn from_str(
+        source: &'src str,
+        options: CssParserOptions,
+        source_type: CssFileSource,
+    ) -> Self {
+        let lexer = CssLexer::from_str(source)
+            .with_options(options)
+            .with_source_type(source_type);
 
         let buffered = BufferedLexer::new(lexer);
         let mut source = CssTokenSource::new(buffered);
diff --git a/crates/biome_css_parser/tests/css_test_suite/error/at_rule/at_rule_media_error.css.snap b/crates/biome_css_parser/tests/css_test_suite/error/at_rule/at_rule_media_error.css.snap
index 26b9f50c861a..6c5b44b1baf4 100644
--- a/crates/biome_css_parser/tests/css_test_suite/error/at_rule/at_rule_media_error.css.snap
+++ b/crates/biome_css_parser/tests/css_test_suite/error/at_rule/at_rule_media_error.css.snap
@@ -54,7 +54,7 @@ CssRoot {
                         missing separator,
                         CssBogusMediaQuery {
                             items: [
-                                ERROR_TOKEN@27..28 "$" [] [],
+                                DOLLAR@27..28 "$" [] [],
                                 IDENT@28..39 "-breakpoint" [] [],
                                 R_PAREN@39..41 ")" [] [Whitespace(" ")],
                             ],
@@ -352,7 +352,7 @@ CssRoot {
                 2: (empty)
             1: (empty)
             2: CSS_BOGUS_MEDIA_QUERY@27..41
-              0: ERROR_TOKEN@27..28 "$" [] []
+              0: DOLLAR@27..28 "$" [] []
               1: IDENT@28..39 "-breakpoint" [] []
               2: R_PAREN@39..41 ")" [] [Whitespace(" ")]
         1: CSS_RULE_BLOCK@41..43
@@ -535,13 +535,15 @@ CssRoot {
 ```
 at_rule_media_error.css:1:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × unexpected character `$`
+  × expected `)` but instead found `$`
   
   > 1 │ @media (--umrel-breakpoints$-breakpoint) {}
       │                            ^
     2 │ 
     3 │ @media only screen and width <= 500px {
   
+  i Remove $
+  
 at_rule_media_error.css:3:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × expected `,` but instead found `width`
diff --git a/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/invalid-modifier.scss b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/invalid-modifier.scss
new file mode 100644
index 000000000000..925312f8a1ca
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/invalid-modifier.scss
@@ -0,0 +1,14 @@
+// Invalid modifier - using unknown identifier instead of !default or !global
+$color: red !important;
+
+// Invalid modifier - just a random word
+$width: 100px !random;
+
+// Invalid modifier - typo in default
+$height: 50vh !defalt;
+
+// Invalid modifier - typo in global
+$font-size: 16px !globl;
+
+// Multiple invalid modifiers
+$margin: 10px !wrong !invalid;
diff --git a/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/invalid-modifier.scss.snap b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/invalid-modifier.scss.snap
new file mode 100644
index 000000000000..aab7ab0ae29d
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/invalid-modifier.scss.snap
@@ -0,0 +1,342 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+// Invalid modifier - using unknown identifier instead of !default or !global
+$color: red !important;
+
+// Invalid modifier - just a random word
+$width: 100px !random;
+
+// Invalid modifier - typo in default
+$height: 50vh !defalt;
+
+// Invalid modifier - typo in global
+$font-size: 16px !globl;
+
+// Multiple invalid modifiers
+$margin: 10px !wrong !invalid;
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        CssBogusRule {
+            items: [
+                ScssIdentifier {
+                    dollar_token: DOLLAR@0..79 "$" [Comments("// Invalid modifier - ..."), Newline("\n")] [],
+                    name: CssIdentifier {
+                        value_token: IDENT@79..84 "color" [] [],
+                    },
+                },
+                COLON@84..86 ":" [] [Whitespace(" ")],
+                CssGenericComponentValueList [
+                    CssIdentifier {
+                        value_token: IDENT@86..90 "red" [] [Whitespace(" ")],
+                    },
+                ],
+                CssBogus {
+                    items: [
+                        CssBogus {
+                            items: [
+                                BANG@90..91 "!" [] [],
+                                IMPORTANT_KW@91..100 "important" [] [],
+                            ],
+                        },
+                    ],
+                },
+                SEMICOLON@100..101 ";" [] [],
+            ],
+        },
+        CssBogusRule {
+            items: [
+                ScssIdentifier {
+                    dollar_token: DOLLAR@101..145 "$" [Newline("\n"), Newline("\n"), Comments("// Invalid modifier - ..."), Newline("\n")] [],
+                    name: CssIdentifier {
+                        value_token: IDENT@145..150 "width" [] [],
+                    },
+                },
+                COLON@150..152 ":" [] [Whitespace(" ")],
+                CssGenericComponentValueList [
+                    CssRegularDimension {
+                        value_token: CSS_NUMBER_LITERAL@152..155 "100" [] [],
+                        unit_token: IDENT@155..158 "px" [] [Whitespace(" ")],
+                    },
+                ],
+                CssBogus {
+                    items: [
+                        CssBogus {
+                            items: [
+                                BANG@158..159 "!" [] [],
+                                IDENT@159..165 "random" [] [],
+                            ],
+                        },
+                    ],
+                },
+                SEMICOLON@165..166 ";" [] [],
+            ],
+        },
+        CssBogusRule {
+            items: [
+                ScssIdentifier {
+                    dollar_token: DOLLAR@166..207 "$" [Newline("\n"), Newline("\n"), Comments("// Invalid modifier - ..."), Newline("\n")] [],
+                    name: CssIdentifier {
+                        value_token: IDENT@207..213 "height" [] [],
+                    },
+                },
+                COLON@213..215 ":" [] [Whitespace(" ")],
+                CssGenericComponentValueList [
+                    CssRegularDimension {
+                        value_token: CSS_NUMBER_LITERAL@215..217 "50" [] [],
+                        unit_token: IDENT@217..220 "vh" [] [Whitespace(" ")],
+                    },
+                ],
+                CssBogus {
+                    items: [
+                        CssBogus {
+                            items: [
+                                BANG@220..221 "!" [] [],
+                                IDENT@221..227 "defalt" [] [],
+                            ],
+                        },
+                    ],
+                },
+                SEMICOLON@227..228 ";" [] [],
+            ],
+        },
+        CssBogusRule {
+            items: [
+                ScssIdentifier {
+                    dollar_token: DOLLAR@228..268 "$" [Newline("\n"), Newline("\n"), Comments("// Invalid modifier - ..."), Newline("\n")] [],
+                    name: CssIdentifier {
+                        value_token: IDENT@268..277 "font-size" [] [],
+                    },
+                },
+                COLON@277..279 ":" [] [Whitespace(" ")],
+                CssGenericComponentValueList [
+                    CssRegularDimension {
+                        value_token: CSS_NUMBER_LITERAL@279..281 "16" [] [],
+                        unit_token: IDENT@281..284 "px" [] [Whitespace(" ")],
+                    },
+                ],
+                CssBogus {
+                    items: [
+                        CssBogus {
+                            items: [
+                                BANG@284..285 "!" [] [],
+                                IDENT@285..290 "globl" [] [],
+                            ],
+                        },
+                    ],
+                },
+                SEMICOLON@290..291 ";" [] [],
+            ],
+        },
+        CssBogusRule {
+            items: [
+                ScssIdentifier {
+                    dollar_token: DOLLAR@291..324 "$" [Newline("\n"), Newline("\n"), Comments("// Multiple invalid m ..."), Newline("\n")] [],
+                    name: CssIdentifier {
+                        value_token: IDENT@324..330 "margin" [] [],
+                    },
+                },
+                COLON@330..332 ":" [] [Whitespace(" ")],
+                CssGenericComponentValueList [
+                    CssRegularDimension {
+                        value_token: CSS_NUMBER_LITERAL@332..334 "10" [] [],
+                        unit_token: IDENT@334..337 "px" [] [Whitespace(" ")],
+                    },
+                ],
+                CssBogus {
+                    items: [
+                        CssBogus {
+                            items: [
+                                BANG@337..338 "!" [] [],
+                                IDENT@338..344 "wrong" [] [Whitespace(" ")],
+                            ],
+                        },
+                        CssBogus {
+                            items: [
+                                BANG@344..345 "!" [] [],
+                                IDENT@345..352 "invalid" [] [],
+                            ],
+                        },
+                    ],
+                },
+                SEMICOLON@352..353 ";" [] [],
+            ],
+        },
+    ],
+    eof_token: EOF@353..354 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..354
+  0: (empty)
+  1: CSS_RULE_LIST@0..353
+    0: CSS_BOGUS_RULE@0..101
+      0: SCSS_IDENTIFIER@0..84
+        0: DOLLAR@0..79 "$" [Comments("// Invalid modifier - ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@79..84
+          0: IDENT@79..84 "color" [] []
+      1: COLON@84..86 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@86..90
+        0: CSS_IDENTIFIER@86..90
+          0: IDENT@86..90 "red" [] [Whitespace(" ")]
+      3: CSS_BOGUS@90..100
+        0: CSS_BOGUS@90..100
+          0: BANG@90..91 "!" [] []
+          1: IMPORTANT_KW@91..100 "important" [] []
+      4: SEMICOLON@100..101 ";" [] []
+    1: CSS_BOGUS_RULE@101..166
+      0: SCSS_IDENTIFIER@101..150
+        0: DOLLAR@101..145 "$" [Newline("\n"), Newline("\n"), Comments("// Invalid modifier - ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@145..150
+          0: IDENT@145..150 "width" [] []
+      1: COLON@150..152 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@152..158
+        0: CSS_REGULAR_DIMENSION@152..158
+          0: CSS_NUMBER_LITERAL@152..155 "100" [] []
+          1: IDENT@155..158 "px" [] [Whitespace(" ")]
+      3: CSS_BOGUS@158..165
+        0: CSS_BOGUS@158..165
+          0: BANG@158..159 "!" [] []
+          1: IDENT@159..165 "random" [] []
+      4: SEMICOLON@165..166 ";" [] []
+    2: CSS_BOGUS_RULE@166..228
+      0: SCSS_IDENTIFIER@166..213
+        0: DOLLAR@166..207 "$" [Newline("\n"), Newline("\n"), Comments("// Invalid modifier - ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@207..213
+          0: IDENT@207..213 "height" [] []
+      1: COLON@213..215 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@215..220
+        0: CSS_REGULAR_DIMENSION@215..220
+          0: CSS_NUMBER_LITERAL@215..217 "50" [] []
+          1: IDENT@217..220 "vh" [] [Whitespace(" ")]
+      3: CSS_BOGUS@220..227
+        0: CSS_BOGUS@220..227
+          0: BANG@220..221 "!" [] []
+          1: IDENT@221..227 "defalt" [] []
+      4: SEMICOLON@227..228 ";" [] []
+    3: CSS_BOGUS_RULE@228..291
+      0: SCSS_IDENTIFIER@228..277
+        0: DOLLAR@228..268 "$" [Newline("\n"), Newline("\n"), Comments("// Invalid modifier - ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@268..277
+          0: IDENT@268..277 "font-size" [] []
+      1: COLON@277..279 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@279..284
+        0: CSS_REGULAR_DIMENSION@279..284
+          0: CSS_NUMBER_LITERAL@279..281 "16" [] []
+          1: IDENT@281..284 "px" [] [Whitespace(" ")]
+      3: CSS_BOGUS@284..290
+        0: CSS_BOGUS@284..290
+          0: BANG@284..285 "!" [] []
+          1: IDENT@285..290 "globl" [] []
+      4: SEMICOLON@290..291 ";" [] []
+    4: CSS_BOGUS_RULE@291..353
+      0: SCSS_IDENTIFIER@291..330
+        0: DOLLAR@291..324 "$" [Newline("\n"), Newline("\n"), Comments("// Multiple invalid m ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@324..330
+          0: IDENT@324..330 "margin" [] []
+      1: COLON@330..332 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@332..337
+        0: CSS_REGULAR_DIMENSION@332..337
+          0: CSS_NUMBER_LITERAL@332..334 "10" [] []
+          1: IDENT@334..337 "px" [] [Whitespace(" ")]
+      3: CSS_BOGUS@337..352
+        0: CSS_BOGUS@337..344
+          0: BANG@337..338 "!" [] []
+          1: IDENT@338..344 "wrong" [] [Whitespace(" ")]
+        1: CSS_BOGUS@344..352
+          0: BANG@344..345 "!" [] []
+          1: IDENT@345..352 "invalid" [] []
+      4: SEMICOLON@352..353 ";" [] []
+  2: EOF@353..354 "" [Newline("\n")] []
+
+```
+
+## Diagnostics
+
+```
+invalid-modifier.scss:2:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `important`
+  
+    1 │ // Invalid modifier - using unknown identifier instead of !default or !global
+  > 2 │ $color: red !important;
+      │              ^^^^^^^^^
+    3 │ 
+    4 │ // Invalid modifier - just a random word
+  
+  i Remove important
+  
+invalid-modifier.scss:5:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `random`
+  
+    4 │ // Invalid modifier - just a random word
+  > 5 │ $width: 100px !random;
+      │                ^^^^^^
+    6 │ 
+    7 │ // Invalid modifier - typo in default
+  
+  i Remove random
+  
+invalid-modifier.scss:8:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `defalt`
+  
+     7 │ // Invalid modifier - typo in default
+   > 8 │ $height: 50vh !defalt;
+       │                ^^^^^^
+     9 │ 
+    10 │ // Invalid modifier - typo in global
+  
+  i Remove defalt
+  
+invalid-modifier.scss:11:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `globl`
+  
+    10 │ // Invalid modifier - typo in global
+  > 11 │ $font-size: 16px !globl;
+       │                   ^^^^^
+    12 │ 
+    13 │ // Multiple invalid modifiers
+  
+  i Remove globl
+  
+invalid-modifier.scss:14:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `wrong`
+  
+    13 │ // Multiple invalid modifiers
+  > 14 │ $margin: 10px !wrong !invalid;
+       │                ^^^^^
+    15 │ 
+  
+  i Remove wrong
+  
+invalid-modifier.scss:14:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `invalid`
+  
+    13 │ // Multiple invalid modifiers
+  > 14 │ $margin: 10px !wrong !invalid;
+       │                       ^^^^^^^
+    15 │ 
+  
+  i Remove invalid
+  
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/missing-modifier.scss b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/missing-modifier.scss
new file mode 100644
index 000000000000..ec29f0ef66cc
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/missing-modifier.scss
@@ -0,0 +1,8 @@
+// Exclamation mark but no modifier
+$color: red !;
+
+// Exclamation mark with space but no modifier
+$width: 100px ! ;
+
+// Exclamation mark at the end
+$height: 50vh !
diff --git a/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/missing-modifier.scss.snap b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/missing-modifier.scss.snap
new file mode 100644
index 000000000000..ceb352418a2c
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/error/scss/declaration/missing-modifier.scss.snap
@@ -0,0 +1,193 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+// Exclamation mark but no modifier
+$color: red !;
+
+// Exclamation mark with space but no modifier
+$width: 100px ! ;
+
+// Exclamation mark at the end
+$height: 50vh !
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@0..37 "$" [Comments("// Exclamation mark b ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@37..42 "color" [] [],
+                },
+            },
+            colon_token: COLON@42..44 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@44..48 "red" [] [Whitespace(" ")],
+                },
+            ],
+            modifiers: ScssVariableModifierList [
+                ScssVariableModifier {
+                    excl_token: BANG@48..49 "!" [] [],
+                    value: missing (required),
+                },
+            ],
+            semicolon_token: SEMICOLON@49..50 ";" [] [],
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@50..100 "$" [Newline("\n"), Newline("\n"), Comments("// Exclamation mark w ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@100..105 "width" [] [],
+                },
+            },
+            colon_token: COLON@105..107 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssRegularDimension {
+                    value_token: CSS_NUMBER_LITERAL@107..110 "100" [] [],
+                    unit_token: IDENT@110..113 "px" [] [Whitespace(" ")],
+                },
+            ],
+            modifiers: ScssVariableModifierList [
+                ScssVariableModifier {
+                    excl_token: BANG@113..115 "!" [] [Whitespace(" ")],
+                    value: missing (required),
+                },
+            ],
+            semicolon_token: SEMICOLON@115..116 ";" [] [],
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@116..150 "$" [Newline("\n"), Newline("\n"), Comments("// Exclamation mark a ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@150..156 "height" [] [],
+                },
+            },
+            colon_token: COLON@156..158 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssRegularDimension {
+                    value_token: CSS_NUMBER_LITERAL@158..160 "50" [] [],
+                    unit_token: IDENT@160..163 "vh" [] [Whitespace(" ")],
+                },
+            ],
+            modifiers: ScssVariableModifierList [
+                ScssVariableModifier {
+                    excl_token: BANG@163..164 "!" [] [],
+                    value: missing (required),
+                },
+            ],
+            semicolon_token: missing (optional),
+        },
+    ],
+    eof_token: EOF@164..165 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..165
+  0: (empty)
+  1: CSS_RULE_LIST@0..164
+    0: SCSS_DECLARATION@0..50
+      0: SCSS_IDENTIFIER@0..42
+        0: DOLLAR@0..37 "$" [Comments("// Exclamation mark b ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@37..42
+          0: IDENT@37..42 "color" [] []
+      1: COLON@42..44 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@44..48
+        0: CSS_IDENTIFIER@44..48
+          0: IDENT@44..48 "red" [] [Whitespace(" ")]
+      3: SCSS_VARIABLE_MODIFIER_LIST@48..49
+        0: SCSS_VARIABLE_MODIFIER@48..49
+          0: BANG@48..49 "!" [] []
+          1: (empty)
+      4: SEMICOLON@49..50 ";" [] []
+    1: SCSS_DECLARATION@50..116
+      0: SCSS_IDENTIFIER@50..105
+        0: DOLLAR@50..100 "$" [Newline("\n"), Newline("\n"), Comments("// Exclamation mark w ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@100..105
+          0: IDENT@100..105 "width" [] []
+      1: COLON@105..107 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@107..113
+        0: CSS_REGULAR_DIMENSION@107..113
+          0: CSS_NUMBER_LITERAL@107..110 "100" [] []
+          1: IDENT@110..113 "px" [] [Whitespace(" ")]
+      3: SCSS_VARIABLE_MODIFIER_LIST@113..115
+        0: SCSS_VARIABLE_MODIFIER@113..115
+          0: BANG@113..115 "!" [] [Whitespace(" ")]
+          1: (empty)
+      4: SEMICOLON@115..116 ";" [] []
+    2: SCSS_DECLARATION@116..164
+      0: SCSS_IDENTIFIER@116..156
+        0: DOLLAR@116..150 "$" [Newline("\n"), Newline("\n"), Comments("// Exclamation mark a ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@150..156
+          0: IDENT@150..156 "height" [] []
+      1: COLON@156..158 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@158..163
+        0: CSS_REGULAR_DIMENSION@158..163
+          0: CSS_NUMBER_LITERAL@158..160 "50" [] []
+          1: IDENT@160..163 "vh" [] [Whitespace(" ")]
+      3: SCSS_VARIABLE_MODIFIER_LIST@163..164
+        0: SCSS_VARIABLE_MODIFIER@163..164
+          0: BANG@163..164 "!" [] []
+          1: (empty)
+      4: (empty)
+  2: EOF@164..165 "" [Newline("\n")] []
+
+```
+
+## Diagnostics
+
+```
+missing-modifier.scss:2:14 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `;`
+  
+    1 │ // Exclamation mark but no modifier
+  > 2 │ $color: red !;
+      │              ^
+    3 │ 
+    4 │ // Exclamation mark with space but no modifier
+  
+  i Remove ;
+  
+missing-modifier.scss:5:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead found `;`
+  
+    4 │ // Exclamation mark with space but no modifier
+  > 5 │ $width: 100px ! ;
+      │                 ^
+    6 │ 
+    7 │ // Exclamation mark at the end
+  
+  i Remove ;
+  
+missing-modifier.scss:9:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × expected 'default', or 'global' but instead the file ends
+  
+    7 │ // Exclamation mark at the end
+    8 │ $height: 50vh !
+  > 9 │ 
+      │ 
+  
+  i the file ends here
+  
+    7 │ // Exclamation mark at the end
+    8 │ $height: 50vh !
+  > 9 │ 
+      │ 
+  
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/line.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/line.scss
new file mode 100644
index 000000000000..38d3feb81cdd
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/line.scss
@@ -0,0 +1,9 @@
+foo {a: 1  // flang }
+   }
+
+.foo bar[val="//"] {
+  baz: bang; //}
+}
+
+
+
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/line.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/line.scss.snap
new file mode 100644
index 000000000000..64ad8053de0e
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/line.scss.snap
@@ -0,0 +1,220 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+foo {a: 1  // flang }
+   }
+
+.foo bar[val="//"] {
+  baz: bang; //}
+}
+
+
+
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: CssTypeSelector {
+                        namespace: missing (optional),
+                        ident: CssIdentifier {
+                            value_token: IDENT@0..4 "foo" [] [Whitespace(" ")],
+                        },
+                    },
+                    sub_selectors: CssSubSelectorList [],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@4..5 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@5..6 "a" [] [],
+                                },
+                                colon_token: COLON@6..8 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssNumber {
+                                        value_token: CSS_NUMBER_LITERAL@8..21 "1" [] [Whitespace("  "), Comments("// flang }")],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: missing (optional),
+                    },
+                ],
+                r_curly_token: R_CURLY@21..26 "}" [Newline("\n"), Whitespace("   ")] [],
+            },
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssComplexSelector {
+                    left: CssCompoundSelector {
+                        nesting_selectors: CssNestedSelectorList [],
+                        simple_selector: missing (optional),
+                        sub_selectors: CssSubSelectorList [
+                            CssClassSelector {
+                                dot_token: DOT@26..29 "." [Newline("\n"), Newline("\n")] [],
+                                name: CssCustomIdentifier {
+                                    value_token: IDENT@29..32 "foo" [] [],
+                                },
+                            },
+                        ],
+                    },
+                    combinator: CSS_SPACE_LITERAL@32..33 " " [] [],
+                    right: CssCompoundSelector {
+                        nesting_selectors: CssNestedSelectorList [],
+                        simple_selector: CssTypeSelector {
+                            namespace: missing (optional),
+                            ident: CssIdentifier {
+                                value_token: IDENT@33..36 "bar" [] [],
+                            },
+                        },
+                        sub_selectors: CssSubSelectorList [
+                            CssAttributeSelector {
+                                l_brack_token: L_BRACK@36..37 "[" [] [],
+                                name: CssAttributeName {
+                                    namespace: missing (optional),
+                                    name: CssIdentifier {
+                                        value_token: IDENT@37..40 "val" [] [],
+                                    },
+                                },
+                                matcher: CssAttributeMatcher {
+                                    operator: EQ@40..41 "=" [] [],
+                                    value: CssAttributeMatcherValue {
+                                        name: CssString {
+                                            value_token: CSS_STRING_LITERAL@41..45 "\"//\"" [] [],
+                                        },
+                                    },
+                                    modifier: missing (optional),
+                                },
+                                r_brack_token: R_BRACK@45..47 "]" [] [Whitespace(" ")],
+                            },
+                        ],
+                    },
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@47..48 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@48..54 "baz" [Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@54..56 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssIdentifier {
+                                        value_token: IDENT@56..60 "bang" [] [],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@60..65 ";" [] [Whitespace(" "), Comments("//}")],
+                    },
+                ],
+                r_curly_token: R_CURLY@65..67 "}" [Newline("\n")] [],
+            },
+        },
+    ],
+    eof_token: EOF@67..71 "" [Newline("\n"), Newline("\n"), Newline("\n"), Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..71
+  0: (empty)
+  1: CSS_RULE_LIST@0..67
+    0: CSS_QUALIFIED_RULE@0..26
+      0: CSS_SELECTOR_LIST@0..4
+        0: CSS_COMPOUND_SELECTOR@0..4
+          0: CSS_NESTED_SELECTOR_LIST@0..0
+          1: CSS_TYPE_SELECTOR@0..4
+            0: (empty)
+            1: CSS_IDENTIFIER@0..4
+              0: IDENT@0..4 "foo" [] [Whitespace(" ")]
+          2: CSS_SUB_SELECTOR_LIST@4..4
+      1: CSS_DECLARATION_OR_RULE_BLOCK@4..26
+        0: L_CURLY@4..5 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@5..21
+          0: CSS_DECLARATION_WITH_SEMICOLON@5..21
+            0: CSS_DECLARATION@5..21
+              0: CSS_GENERIC_PROPERTY@5..21
+                0: CSS_IDENTIFIER@5..6
+                  0: IDENT@5..6 "a" [] []
+                1: COLON@6..8 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@8..21
+                  0: CSS_NUMBER@8..21
+                    0: CSS_NUMBER_LITERAL@8..21 "1" [] [Whitespace("  "), Comments("// flang }")]
+              1: (empty)
+            1: (empty)
+        2: R_CURLY@21..26 "}" [Newline("\n"), Whitespace("   ")] []
+    1: CSS_QUALIFIED_RULE@26..67
+      0: CSS_SELECTOR_LIST@26..47
+        0: CSS_COMPLEX_SELECTOR@26..47
+          0: CSS_COMPOUND_SELECTOR@26..32
+            0: CSS_NESTED_SELECTOR_LIST@26..26
+            1: (empty)
+            2: CSS_SUB_SELECTOR_LIST@26..32
+              0: CSS_CLASS_SELECTOR@26..32
+                0: DOT@26..29 "." [Newline("\n"), Newline("\n")] []
+                1: CSS_CUSTOM_IDENTIFIER@29..32
+                  0: IDENT@29..32 "foo" [] []
+          1: CSS_SPACE_LITERAL@32..33 " " [] []
+          2: CSS_COMPOUND_SELECTOR@33..47
+            0: CSS_NESTED_SELECTOR_LIST@33..33
+            1: CSS_TYPE_SELECTOR@33..36
+              0: (empty)
+              1: CSS_IDENTIFIER@33..36
+                0: IDENT@33..36 "bar" [] []
+            2: CSS_SUB_SELECTOR_LIST@36..47
+              0: CSS_ATTRIBUTE_SELECTOR@36..47
+                0: L_BRACK@36..37 "[" [] []
+                1: CSS_ATTRIBUTE_NAME@37..40
+                  0: (empty)
+                  1: CSS_IDENTIFIER@37..40
+                    0: IDENT@37..40 "val" [] []
+                2: CSS_ATTRIBUTE_MATCHER@40..45
+                  0: EQ@40..41 "=" [] []
+                  1: CSS_ATTRIBUTE_MATCHER_VALUE@41..45
+                    0: CSS_STRING@41..45
+                      0: CSS_STRING_LITERAL@41..45 "\"//\"" [] []
+                  2: (empty)
+                3: R_BRACK@45..47 "]" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@47..67
+        0: L_CURLY@47..48 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@48..65
+          0: CSS_DECLARATION_WITH_SEMICOLON@48..65
+            0: CSS_DECLARATION@48..60
+              0: CSS_GENERIC_PROPERTY@48..60
+                0: CSS_IDENTIFIER@48..54
+                  0: IDENT@48..54 "baz" [Newline("\n"), Whitespace("  ")] []
+                1: COLON@54..56 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@56..60
+                  0: CSS_IDENTIFIER@56..60
+                    0: IDENT@56..60 "bang" [] []
+              1: (empty)
+            1: SEMICOLON@60..65 ";" [] [Whitespace(" "), Comments("//}")]
+        2: R_CURLY@65..67 "}" [Newline("\n")] []
+  2: EOF@67..71 "" [Newline("\n"), Newline("\n"), Newline("\n"), Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/multiline.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/multiline.scss
new file mode 100644
index 000000000000..fd658416add1
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/multiline.scss
@@ -0,0 +1,47 @@
+/* Standard CSS multiline comment
+   in SCSS context */
+$var: value;
+
+/* Comment before selector */
+.foo {
+  color: red;
+}
+
+/* Multi-line comment
+   with multiple lines
+   and more content */
+$another-var: blue;
+
+// SCSS line comment
+$line-comment: true;
+
+/* Nested /* comment */ attempt */
+.nested {
+  /* Comment inside rule */
+  background: white;
+}
+
+/**
+ * Documentation style comment
+ * @param $size - The size value
+ * @returns Computed size
+ */
+@function compute-size($size) {
+  @return $size * 2;
+}
+
+/* Comment with special chars: @#$%^&*() */
+$special: 10px;
+
+/*
+ * Comment before mixin
+ */
+@mixin test-mixin {
+  /* Comment inside mixin */
+  margin: 0;
+}
+
+/* Comment at end of file */
+
+
+
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/multiline.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/multiline.scss.snap
new file mode 100644
index 000000000000..9aa3bee1e045
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/multiline.scss.snap
@@ -0,0 +1,440 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+/* Standard CSS multiline comment
+   in SCSS context */
+$var: value;
+
+/* Comment before selector */
+.foo {
+  color: red;
+}
+
+/* Multi-line comment
+   with multiple lines
+   and more content */
+$another-var: blue;
+
+// SCSS line comment
+$line-comment: true;
+
+/* Nested /* comment */ attempt */
+.nested {
+  /* Comment inside rule */
+  background: white;
+}
+
+/**
+ * Documentation style comment
+ * @param $size - The size value
+ * @returns Computed size
+ */
+@function compute-size($size) {
+  @return $size * 2;
+}
+
+/* Comment with special chars: @#$%^&*() */
+$special: 10px;
+
+/*
+ * Comment before mixin
+ */
+@mixin test-mixin {
+  /* Comment inside mixin */
+  margin: 0;
+}
+
+/* Comment at end of file */
+
+
+
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@0..57 "$" [Comments("/* Standard CSS multi ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@57..60 "var" [] [],
+                },
+            },
+            colon_token: COLON@60..62 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@62..67 "value" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@67..68 ";" [] [],
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@68..101 "." [Newline("\n"), Newline("\n"), Comments("/* Comment before sel ..."), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@101..105 "foo" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@105..106 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@106..114 "color" [Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@114..116 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssIdentifier {
+                                        value_token: IDENT@116..119 "red" [] [],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@119..120 ";" [] [],
+                    },
+                ],
+                r_curly_token: R_CURLY@120..122 "}" [Newline("\n")] [],
+            },
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@122..193 "$" [Newline("\n"), Newline("\n"), Comments("/* Multi-line comment ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@193..204 "another-var" [] [],
+                },
+            },
+            colon_token: COLON@204..206 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@206..210 "blue" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@210..211 ";" [] [],
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@211..235 "$" [Newline("\n"), Newline("\n"), Comments("// SCSS line comment"), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@235..247 "line-comment" [] [],
+                },
+            },
+            colon_token: COLON@247..249 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@249..253 "true" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@253..254 ";" [] [],
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@254..292 "." [Newline("\n"), Newline("\n"), Comments("/* Nested /* comment  ..."), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@292..299 "nested" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@299..300 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@300..341 "background" [Newline("\n"), Whitespace("  "), Comments("/* Comment inside rul ..."), Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@341..343 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssIdentifier {
+                                        value_token: IDENT@343..348 "white" [] [],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@348..349 ";" [] [],
+                    },
+                ],
+                r_curly_token: R_CURLY@349..351 "}" [Newline("\n")] [],
+            },
+        },
+        CssAtRule {
+            at_token: AT@351..452 "@" [Newline("\n"), Newline("\n"), Comments("/**\n * Documentation  ..."), Newline("\n")] [],
+            rule: CssUnknownBlockAtRule {
+                name: CssIdentifier {
+                    value_token: IDENT@452..461 "function" [] [Whitespace(" ")],
+                },
+                components: CssUnknownAtRuleComponentList {
+                    items: [
+                        IDENT@461..473 "compute-size" [] [],
+                        L_PAREN@473..474 "(" [] [],
+                        DOLLAR@474..475 "$" [] [],
+                        IDENT@475..479 "size" [] [],
+                        R_PAREN@479..481 ")" [] [Whitespace(" ")],
+                    ],
+                },
+                block: CssDeclarationOrRuleBlock {
+                    l_curly_token: L_CURLY@481..482 "{" [] [],
+                    items: CssDeclarationOrRuleList [
+                        CssAtRule {
+                            at_token: AT@482..486 "@" [Newline("\n"), Whitespace("  ")] [],
+                            rule: CssUnknownValueAtRule {
+                                name: CssIdentifier {
+                                    value_token: IDENT@486..493 "return" [] [Whitespace(" ")],
+                                },
+                                components: CssUnknownAtRuleComponentList {
+                                    items: [
+                                        DOLLAR@493..494 "$" [] [],
+                                        IDENT@494..499 "size" [] [Whitespace(" ")],
+                                        STAR@499..501 "*" [] [Whitespace(" ")],
+                                        CSS_NUMBER_LITERAL@501..502 "2" [] [],
+                                    ],
+                                },
+                                semicolon_token: SEMICOLON@502..503 ";" [] [],
+                            },
+                        },
+                    ],
+                    r_curly_token: R_CURLY@503..505 "}" [Newline("\n")] [],
+                },
+            },
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@505..552 "$" [Newline("\n"), Newline("\n"), Comments("/* Comment with speci ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@552..559 "special" [] [],
+                },
+            },
+            colon_token: COLON@559..561 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssRegularDimension {
+                    value_token: CSS_NUMBER_LITERAL@561..563 "10" [] [],
+                    unit_token: IDENT@563..565 "px" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@565..566 ";" [] [],
+        },
+        CssAtRule {
+            at_token: AT@566..600 "@" [Newline("\n"), Newline("\n"), Comments("/*\n * Comment before  ..."), Newline("\n")] [],
+            rule: CssUnknownBlockAtRule {
+                name: CssIdentifier {
+                    value_token: IDENT@600..606 "mixin" [] [Whitespace(" ")],
+                },
+                components: CssUnknownAtRuleComponentList {
+                    items: [
+                        IDENT@606..617 "test-mixin" [] [Whitespace(" ")],
+                    ],
+                },
+                block: CssDeclarationOrRuleBlock {
+                    l_curly_token: L_CURLY@617..618 "{" [] [],
+                    items: CssDeclarationOrRuleList [
+                        CssDeclarationWithSemicolon {
+                            declaration: CssDeclaration {
+                                property: CssGenericProperty {
+                                    name: CssIdentifier {
+                                        value_token: IDENT@618..656 "margin" [Newline("\n"), Whitespace("  "), Comments("/* Comment inside mix ..."), Newline("\n"), Whitespace("  ")] [],
+                                    },
+                                    colon_token: COLON@656..658 ":" [] [Whitespace(" ")],
+                                    value: CssGenericComponentValueList [
+                                        CssNumber {
+                                            value_token: CSS_NUMBER_LITERAL@658..659 "0" [] [],
+                                        },
+                                    ],
+                                },
+                                important: missing (optional),
+                            },
+                            semicolon_token: SEMICOLON@659..660 ";" [] [],
+                        },
+                    ],
+                    r_curly_token: R_CURLY@660..662 "}" [Newline("\n")] [],
+                },
+            },
+        },
+    ],
+    eof_token: EOF@662..696 "" [Newline("\n"), Newline("\n"), Comments("/* Comment at end of  ..."), Newline("\n"), Newline("\n"), Newline("\n"), Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..696
+  0: (empty)
+  1: CSS_RULE_LIST@0..662
+    0: SCSS_DECLARATION@0..68
+      0: SCSS_IDENTIFIER@0..60
+        0: DOLLAR@0..57 "$" [Comments("/* Standard CSS multi ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@57..60
+          0: IDENT@57..60 "var" [] []
+      1: COLON@60..62 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@62..67
+        0: CSS_IDENTIFIER@62..67
+          0: IDENT@62..67 "value" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@67..67
+      4: SEMICOLON@67..68 ";" [] []
+    1: CSS_QUALIFIED_RULE@68..122
+      0: CSS_SELECTOR_LIST@68..105
+        0: CSS_COMPOUND_SELECTOR@68..105
+          0: CSS_NESTED_SELECTOR_LIST@68..68
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@68..105
+            0: CSS_CLASS_SELECTOR@68..105
+              0: DOT@68..101 "." [Newline("\n"), Newline("\n"), Comments("/* Comment before sel ..."), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@101..105
+                0: IDENT@101..105 "foo" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@105..122
+        0: L_CURLY@105..106 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@106..120
+          0: CSS_DECLARATION_WITH_SEMICOLON@106..120
+            0: CSS_DECLARATION@106..119
+              0: CSS_GENERIC_PROPERTY@106..119
+                0: CSS_IDENTIFIER@106..114
+                  0: IDENT@106..114 "color" [Newline("\n"), Whitespace("  ")] []
+                1: COLON@114..116 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@116..119
+                  0: CSS_IDENTIFIER@116..119
+                    0: IDENT@116..119 "red" [] []
+              1: (empty)
+            1: SEMICOLON@119..120 ";" [] []
+        2: R_CURLY@120..122 "}" [Newline("\n")] []
+    2: SCSS_DECLARATION@122..211
+      0: SCSS_IDENTIFIER@122..204
+        0: DOLLAR@122..193 "$" [Newline("\n"), Newline("\n"), Comments("/* Multi-line comment ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@193..204
+          0: IDENT@193..204 "another-var" [] []
+      1: COLON@204..206 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@206..210
+        0: CSS_IDENTIFIER@206..210
+          0: IDENT@206..210 "blue" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@210..210
+      4: SEMICOLON@210..211 ";" [] []
+    3: SCSS_DECLARATION@211..254
+      0: SCSS_IDENTIFIER@211..247
+        0: DOLLAR@211..235 "$" [Newline("\n"), Newline("\n"), Comments("// SCSS line comment"), Newline("\n")] []
+        1: CSS_IDENTIFIER@235..247
+          0: IDENT@235..247 "line-comment" [] []
+      1: COLON@247..249 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@249..253
+        0: CSS_IDENTIFIER@249..253
+          0: IDENT@249..253 "true" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@253..253
+      4: SEMICOLON@253..254 ";" [] []
+    4: CSS_QUALIFIED_RULE@254..351
+      0: CSS_SELECTOR_LIST@254..299
+        0: CSS_COMPOUND_SELECTOR@254..299
+          0: CSS_NESTED_SELECTOR_LIST@254..254
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@254..299
+            0: CSS_CLASS_SELECTOR@254..299
+              0: DOT@254..292 "." [Newline("\n"), Newline("\n"), Comments("/* Nested /* comment  ..."), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@292..299
+                0: IDENT@292..299 "nested" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@299..351
+        0: L_CURLY@299..300 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@300..349
+          0: CSS_DECLARATION_WITH_SEMICOLON@300..349
+            0: CSS_DECLARATION@300..348
+              0: CSS_GENERIC_PROPERTY@300..348
+                0: CSS_IDENTIFIER@300..341
+                  0: IDENT@300..341 "background" [Newline("\n"), Whitespace("  "), Comments("/* Comment inside rul ..."), Newline("\n"), Whitespace("  ")] []
+                1: COLON@341..343 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@343..348
+                  0: CSS_IDENTIFIER@343..348
+                    0: IDENT@343..348 "white" [] []
+              1: (empty)
+            1: SEMICOLON@348..349 ";" [] []
+        2: R_CURLY@349..351 "}" [Newline("\n")] []
+    5: CSS_AT_RULE@351..505
+      0: AT@351..452 "@" [Newline("\n"), Newline("\n"), Comments("/**\n * Documentation  ..."), Newline("\n")] []
+      1: CSS_UNKNOWN_BLOCK_AT_RULE@452..505
+        0: CSS_IDENTIFIER@452..461
+          0: IDENT@452..461 "function" [] [Whitespace(" ")]
+        1: CSS_UNKNOWN_AT_RULE_COMPONENT_LIST@461..481
+          0: IDENT@461..473 "compute-size" [] []
+          1: L_PAREN@473..474 "(" [] []
+          2: DOLLAR@474..475 "$" [] []
+          3: IDENT@475..479 "size" [] []
+          4: R_PAREN@479..481 ")" [] [Whitespace(" ")]
+        2: CSS_DECLARATION_OR_RULE_BLOCK@481..505
+          0: L_CURLY@481..482 "{" [] []
+          1: CSS_DECLARATION_OR_RULE_LIST@482..503
+            0: CSS_AT_RULE@482..503
+              0: AT@482..486 "@" [Newline("\n"), Whitespace("  ")] []
+              1: CSS_UNKNOWN_VALUE_AT_RULE@486..503
+                0: CSS_IDENTIFIER@486..493
+                  0: IDENT@486..493 "return" [] [Whitespace(" ")]
+                1: CSS_UNKNOWN_AT_RULE_COMPONENT_LIST@493..502
+                  0: DOLLAR@493..494 "$" [] []
+                  1: IDENT@494..499 "size" [] [Whitespace(" ")]
+                  2: STAR@499..501 "*" [] [Whitespace(" ")]
+                  3: CSS_NUMBER_LITERAL@501..502 "2" [] []
+                2: SEMICOLON@502..503 ";" [] []
+          2: R_CURLY@503..505 "}" [Newline("\n")] []
+    6: SCSS_DECLARATION@505..566
+      0: SCSS_IDENTIFIER@505..559
+        0: DOLLAR@505..552 "$" [Newline("\n"), Newline("\n"), Comments("/* Comment with speci ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@552..559
+          0: IDENT@552..559 "special" [] []
+      1: COLON@559..561 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@561..565
+        0: CSS_REGULAR_DIMENSION@561..565
+          0: CSS_NUMBER_LITERAL@561..563 "10" [] []
+          1: IDENT@563..565 "px" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@565..565
+      4: SEMICOLON@565..566 ";" [] []
+    7: CSS_AT_RULE@566..662
+      0: AT@566..600 "@" [Newline("\n"), Newline("\n"), Comments("/*\n * Comment before  ..."), Newline("\n")] []
+      1: CSS_UNKNOWN_BLOCK_AT_RULE@600..662
+        0: CSS_IDENTIFIER@600..606
+          0: IDENT@600..606 "mixin" [] [Whitespace(" ")]
+        1: CSS_UNKNOWN_AT_RULE_COMPONENT_LIST@606..617
+          0: IDENT@606..617 "test-mixin" [] [Whitespace(" ")]
+        2: CSS_DECLARATION_OR_RULE_BLOCK@617..662
+          0: L_CURLY@617..618 "{" [] []
+          1: CSS_DECLARATION_OR_RULE_LIST@618..660
+            0: CSS_DECLARATION_WITH_SEMICOLON@618..660
+              0: CSS_DECLARATION@618..659
+                0: CSS_GENERIC_PROPERTY@618..659
+                  0: CSS_IDENTIFIER@618..656
+                    0: IDENT@618..656 "margin" [Newline("\n"), Whitespace("  "), Comments("/* Comment inside mix ..."), Newline("\n"), Whitespace("  ")] []
+                  1: COLON@656..658 ":" [] [Whitespace(" ")]
+                  2: CSS_GENERIC_COMPONENT_VALUE_LIST@658..659
+                    0: CSS_NUMBER@658..659
+                      0: CSS_NUMBER_LITERAL@658..659 "0" [] []
+                1: (empty)
+              1: SEMICOLON@659..660 ";" [] []
+          2: R_CURLY@660..662 "}" [Newline("\n")] []
+  2: EOF@662..696 "" [Newline("\n"), Newline("\n"), Comments("/* Comment at end of  ..."), Newline("\n"), Newline("\n"), Newline("\n"), Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/nested.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/nested.scss
new file mode 100644
index 000000000000..98ed41e4fad5
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/nested.scss
@@ -0,0 +1,25 @@
+/* Outer comment
+   /* Inner nested comment */
+   Still in outer comment
+*/
+.simple { color: red; }
+
+/* Level 1
+   /* Level 2
+      /* Level 3 */
+   */
+*/
+.deep { background: blue; }
+
+/* Start /* nested /* deeply */ nested */ end */
+$var: value;
+
+/* Outer
+   /* Inner with newline
+   */
+   Back to outer
+*/
+.test { margin: 0; }
+
+
+
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/nested.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/nested.scss.snap
new file mode 100644
index 000000000000..94c7ff4f100d
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/comment/nested.scss.snap
@@ -0,0 +1,275 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+/* Outer comment
+   /* Inner nested comment */
+   Still in outer comment
+*/
+.simple { color: red; }
+
+/* Level 1
+   /* Level 2
+      /* Level 3 */
+   */
+*/
+.deep { background: blue; }
+
+/* Start /* nested /* deeply */ nested */ end */
+$var: value;
+
+/* Outer
+   /* Inner with newline
+   */
+   Back to outer
+*/
+.test { margin: 0; }
+
+
+
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@0..77 "." [Comments("/* Outer comment\n   / ..."), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@77..84 "simple" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@84..86 "{" [] [Whitespace(" ")],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@86..91 "color" [] [],
+                                },
+                                colon_token: COLON@91..93 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssIdentifier {
+                                        value_token: IDENT@93..96 "red" [] [],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@96..98 ";" [] [Whitespace(" ")],
+                    },
+                ],
+                r_curly_token: R_CURLY@98..99 "}" [] [],
+            },
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@99..156 "." [Newline("\n"), Newline("\n"), Comments("/* Level 1\n   /* Leve ..."), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@156..161 "deep" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@161..163 "{" [] [Whitespace(" ")],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@163..173 "background" [] [],
+                                },
+                                colon_token: COLON@173..175 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssIdentifier {
+                                        value_token: IDENT@175..179 "blue" [] [],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@179..181 ";" [] [Whitespace(" ")],
+                    },
+                ],
+                r_curly_token: R_CURLY@181..182 "}" [] [],
+            },
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@182..234 "$" [Newline("\n"), Newline("\n"), Comments("/* Start /* nested /* ..."), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@234..237 "var" [] [],
+                },
+            },
+            colon_token: COLON@237..239 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@239..244 "value" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@244..245 ";" [] [],
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@245..308 "." [Newline("\n"), Newline("\n"), Comments("/* Outer\n   /* Inner  ..."), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@308..313 "test" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@313..315 "{" [] [Whitespace(" ")],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@315..321 "margin" [] [],
+                                },
+                                colon_token: COLON@321..323 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssNumber {
+                                        value_token: CSS_NUMBER_LITERAL@323..324 "0" [] [],
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@324..326 ";" [] [Whitespace(" ")],
+                    },
+                ],
+                r_curly_token: R_CURLY@326..327 "}" [] [],
+            },
+        },
+    ],
+    eof_token: EOF@327..331 "" [Newline("\n"), Newline("\n"), Newline("\n"), Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..331
+  0: (empty)
+  1: CSS_RULE_LIST@0..327
+    0: CSS_QUALIFIED_RULE@0..99
+      0: CSS_SELECTOR_LIST@0..84
+        0: CSS_COMPOUND_SELECTOR@0..84
+          0: CSS_NESTED_SELECTOR_LIST@0..0
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@0..84
+            0: CSS_CLASS_SELECTOR@0..84
+              0: DOT@0..77 "." [Comments("/* Outer comment\n   / ..."), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@77..84
+                0: IDENT@77..84 "simple" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@84..99
+        0: L_CURLY@84..86 "{" [] [Whitespace(" ")]
+        1: CSS_DECLARATION_OR_RULE_LIST@86..98
+          0: CSS_DECLARATION_WITH_SEMICOLON@86..98
+            0: CSS_DECLARATION@86..96
+              0: CSS_GENERIC_PROPERTY@86..96
+                0: CSS_IDENTIFIER@86..91
+                  0: IDENT@86..91 "color" [] []
+                1: COLON@91..93 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@93..96
+                  0: CSS_IDENTIFIER@93..96
+                    0: IDENT@93..96 "red" [] []
+              1: (empty)
+            1: SEMICOLON@96..98 ";" [] [Whitespace(" ")]
+        2: R_CURLY@98..99 "}" [] []
+    1: CSS_QUALIFIED_RULE@99..182
+      0: CSS_SELECTOR_LIST@99..161
+        0: CSS_COMPOUND_SELECTOR@99..161
+          0: CSS_NESTED_SELECTOR_LIST@99..99
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@99..161
+            0: CSS_CLASS_SELECTOR@99..161
+              0: DOT@99..156 "." [Newline("\n"), Newline("\n"), Comments("/* Level 1\n   /* Leve ..."), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@156..161
+                0: IDENT@156..161 "deep" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@161..182
+        0: L_CURLY@161..163 "{" [] [Whitespace(" ")]
+        1: CSS_DECLARATION_OR_RULE_LIST@163..181
+          0: CSS_DECLARATION_WITH_SEMICOLON@163..181
+            0: CSS_DECLARATION@163..179
+              0: CSS_GENERIC_PROPERTY@163..179
+                0: CSS_IDENTIFIER@163..173
+                  0: IDENT@163..173 "background" [] []
+                1: COLON@173..175 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@175..179
+                  0: CSS_IDENTIFIER@175..179
+                    0: IDENT@175..179 "blue" [] []
+              1: (empty)
+            1: SEMICOLON@179..181 ";" [] [Whitespace(" ")]
+        2: R_CURLY@181..182 "}" [] []
+    2: SCSS_DECLARATION@182..245
+      0: SCSS_IDENTIFIER@182..237
+        0: DOLLAR@182..234 "$" [Newline("\n"), Newline("\n"), Comments("/* Start /* nested /* ..."), Newline("\n")] []
+        1: CSS_IDENTIFIER@234..237
+          0: IDENT@234..237 "var" [] []
+      1: COLON@237..239 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@239..244
+        0: CSS_IDENTIFIER@239..244
+          0: IDENT@239..244 "value" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@244..244
+      4: SEMICOLON@244..245 ";" [] []
+    3: CSS_QUALIFIED_RULE@245..327
+      0: CSS_SELECTOR_LIST@245..313
+        0: CSS_COMPOUND_SELECTOR@245..313
+          0: CSS_NESTED_SELECTOR_LIST@245..245
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@245..313
+            0: CSS_CLASS_SELECTOR@245..313
+              0: DOT@245..308 "." [Newline("\n"), Newline("\n"), Comments("/* Outer\n   /* Inner  ..."), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@308..313
+                0: IDENT@308..313 "test" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@313..327
+        0: L_CURLY@313..315 "{" [] [Whitespace(" ")]
+        1: CSS_DECLARATION_OR_RULE_LIST@315..326
+          0: CSS_DECLARATION_WITH_SEMICOLON@315..326
+            0: CSS_DECLARATION@315..324
+              0: CSS_GENERIC_PROPERTY@315..324
+                0: CSS_IDENTIFIER@315..321
+                  0: IDENT@315..321 "margin" [] []
+                1: COLON@321..323 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@323..324
+                  0: CSS_NUMBER@323..324
+                    0: CSS_NUMBER_LITERAL@323..324 "0" [] []
+              1: (empty)
+            1: SEMICOLON@324..326 ";" [] [Whitespace(" ")]
+        2: R_CURLY@326..327 "}" [] []
+  2: EOF@327..331 "" [Newline("\n"), Newline("\n"), Newline("\n"), Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/global-flag.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/global-flag.scss
new file mode 100644
index 000000000000..6bd3db87cbe3
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/global-flag.scss
@@ -0,0 +1,19 @@
+// Global flag usage
+$global-var: initial;
+
+.component {
+  // Override global variable
+  $global-var: modified !global;
+
+  // Combined flags
+  $another-var: value !default !global;
+  $third-var: value !global !default;
+
+  color: $global-var;
+}
+
+// Global flag with important (SCSS allows both)
+.important-test {
+  $important-var: red !global;
+  color: $important-var !important;
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/global-flag.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/global-flag.scss.snap
new file mode 100644
index 000000000000..d71c8c50c01f
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/global-flag.scss.snap
@@ -0,0 +1,374 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+// Global flag usage
+$global-var: initial;
+
+.component {
+  // Override global variable
+  $global-var: modified !global;
+
+  // Combined flags
+  $another-var: value !default !global;
+  $third-var: value !global !default;
+
+  color: $global-var;
+}
+
+// Global flag with important (SCSS allows both)
+.important-test {
+  $important-var: red !global;
+  color: $important-var !important;
+}
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@0..22 "$" [Comments("// Global flag usage"), Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@22..32 "global-var" [] [],
+                },
+            },
+            colon_token: COLON@32..34 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@34..41 "initial" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@41..42 ";" [] [],
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@42..45 "." [Newline("\n"), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@45..55 "component" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@55..56 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    ScssDeclaration {
+                        name: ScssIdentifier {
+                            dollar_token: DOLLAR@56..90 "$" [Newline("\n"), Whitespace("  "), Comments("// Override global va ..."), Newline("\n"), Whitespace("  ")] [],
+                            name: CssIdentifier {
+                                value_token: IDENT@90..100 "global-var" [] [],
+                            },
+                        },
+                        colon_token: COLON@100..102 ":" [] [Whitespace(" ")],
+                        value: CssGenericComponentValueList [
+                            CssIdentifier {
+                                value_token: IDENT@102..111 "modified" [] [Whitespace(" ")],
+                            },
+                        ],
+                        modifiers: ScssVariableModifierList [
+                            ScssVariableModifier {
+                                excl_token: BANG@111..112 "!" [] [],
+                                value: GLOBAL_KW@112..118 "global" [] [],
+                            },
+                        ],
+                        semicolon_token: SEMICOLON@118..119 ";" [] [],
+                    },
+                    ScssDeclaration {
+                        name: ScssIdentifier {
+                            dollar_token: DOLLAR@119..144 "$" [Newline("\n"), Newline("\n"), Whitespace("  "), Comments("// Combined flags"), Newline("\n"), Whitespace("  ")] [],
+                            name: CssIdentifier {
+                                value_token: IDENT@144..155 "another-var" [] [],
+                            },
+                        },
+                        colon_token: COLON@155..157 ":" [] [Whitespace(" ")],
+                        value: CssGenericComponentValueList [
+                            CssIdentifier {
+                                value_token: IDENT@157..163 "value" [] [Whitespace(" ")],
+                            },
+                        ],
+                        modifiers: ScssVariableModifierList [
+                            ScssVariableModifier {
+                                excl_token: BANG@163..164 "!" [] [],
+                                value: DEFAULT_KW@164..172 "default" [] [Whitespace(" ")],
+                            },
+                            ScssVariableModifier {
+                                excl_token: BANG@172..173 "!" [] [],
+                                value: GLOBAL_KW@173..179 "global" [] [],
+                            },
+                        ],
+                        semicolon_token: SEMICOLON@179..180 ";" [] [],
+                    },
+                    ScssDeclaration {
+                        name: ScssIdentifier {
+                            dollar_token: DOLLAR@180..184 "$" [Newline("\n"), Whitespace("  ")] [],
+                            name: CssIdentifier {
+                                value_token: IDENT@184..193 "third-var" [] [],
+                            },
+                        },
+                        colon_token: COLON@193..195 ":" [] [Whitespace(" ")],
+                        value: CssGenericComponentValueList [
+                            CssIdentifier {
+                                value_token: IDENT@195..201 "value" [] [Whitespace(" ")],
+                            },
+                        ],
+                        modifiers: ScssVariableModifierList [
+                            ScssVariableModifier {
+                                excl_token: BANG@201..202 "!" [] [],
+                                value: GLOBAL_KW@202..209 "global" [] [Whitespace(" ")],
+                            },
+                            ScssVariableModifier {
+                                excl_token: BANG@209..210 "!" [] [],
+                                value: DEFAULT_KW@210..217 "default" [] [],
+                            },
+                        ],
+                        semicolon_token: SEMICOLON@217..218 ";" [] [],
+                    },
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@218..227 "color" [Newline("\n"), Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@227..229 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    ScssIdentifier {
+                                        dollar_token: DOLLAR@229..230 "$" [] [],
+                                        name: CssIdentifier {
+                                            value_token: IDENT@230..240 "global-var" [] [],
+                                        },
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@240..241 ";" [] [],
+                    },
+                ],
+                r_curly_token: R_CURLY@241..243 "}" [Newline("\n")] [],
+            },
+        },
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@243..295 "." [Newline("\n"), Newline("\n"), Comments("// Global flag with i ..."), Newline("\n")] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@295..310 "important-test" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@310..311 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    ScssDeclaration {
+                        name: ScssIdentifier {
+                            dollar_token: DOLLAR@311..315 "$" [Newline("\n"), Whitespace("  ")] [],
+                            name: CssIdentifier {
+                                value_token: IDENT@315..328 "important-var" [] [],
+                            },
+                        },
+                        colon_token: COLON@328..330 ":" [] [Whitespace(" ")],
+                        value: CssGenericComponentValueList [
+                            CssIdentifier {
+                                value_token: IDENT@330..334 "red" [] [Whitespace(" ")],
+                            },
+                        ],
+                        modifiers: ScssVariableModifierList [
+                            ScssVariableModifier {
+                                excl_token: BANG@334..335 "!" [] [],
+                                value: GLOBAL_KW@335..341 "global" [] [],
+                            },
+                        ],
+                        semicolon_token: SEMICOLON@341..342 ";" [] [],
+                    },
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@342..350 "color" [Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@350..352 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    ScssIdentifier {
+                                        dollar_token: DOLLAR@352..353 "$" [] [],
+                                        name: CssIdentifier {
+                                            value_token: IDENT@353..367 "important-var" [] [Whitespace(" ")],
+                                        },
+                                    },
+                                ],
+                            },
+                            important: CssDeclarationImportant {
+                                excl_token: BANG@367..368 "!" [] [],
+                                important_token: IMPORTANT_KW@368..377 "important" [] [],
+                            },
+                        },
+                        semicolon_token: SEMICOLON@377..378 ";" [] [],
+                    },
+                ],
+                r_curly_token: R_CURLY@378..380 "}" [Newline("\n")] [],
+            },
+        },
+    ],
+    eof_token: EOF@380..381 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..381
+  0: (empty)
+  1: CSS_RULE_LIST@0..380
+    0: SCSS_DECLARATION@0..42
+      0: SCSS_IDENTIFIER@0..32
+        0: DOLLAR@0..22 "$" [Comments("// Global flag usage"), Newline("\n")] []
+        1: CSS_IDENTIFIER@22..32
+          0: IDENT@22..32 "global-var" [] []
+      1: COLON@32..34 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@34..41
+        0: CSS_IDENTIFIER@34..41
+          0: IDENT@34..41 "initial" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@41..41
+      4: SEMICOLON@41..42 ";" [] []
+    1: CSS_QUALIFIED_RULE@42..243
+      0: CSS_SELECTOR_LIST@42..55
+        0: CSS_COMPOUND_SELECTOR@42..55
+          0: CSS_NESTED_SELECTOR_LIST@42..42
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@42..55
+            0: CSS_CLASS_SELECTOR@42..55
+              0: DOT@42..45 "." [Newline("\n"), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@45..55
+                0: IDENT@45..55 "component" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@55..243
+        0: L_CURLY@55..56 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@56..241
+          0: SCSS_DECLARATION@56..119
+            0: SCSS_IDENTIFIER@56..100
+              0: DOLLAR@56..90 "$" [Newline("\n"), Whitespace("  "), Comments("// Override global va ..."), Newline("\n"), Whitespace("  ")] []
+              1: CSS_IDENTIFIER@90..100
+                0: IDENT@90..100 "global-var" [] []
+            1: COLON@100..102 ":" [] [Whitespace(" ")]
+            2: CSS_GENERIC_COMPONENT_VALUE_LIST@102..111
+              0: CSS_IDENTIFIER@102..111
+                0: IDENT@102..111 "modified" [] [Whitespace(" ")]
+            3: SCSS_VARIABLE_MODIFIER_LIST@111..118
+              0: SCSS_VARIABLE_MODIFIER@111..118
+                0: BANG@111..112 "!" [] []
+                1: GLOBAL_KW@112..118 "global" [] []
+            4: SEMICOLON@118..119 ";" [] []
+          1: SCSS_DECLARATION@119..180
+            0: SCSS_IDENTIFIER@119..155
+              0: DOLLAR@119..144 "$" [Newline("\n"), Newline("\n"), Whitespace("  "), Comments("// Combined flags"), Newline("\n"), Whitespace("  ")] []
+              1: CSS_IDENTIFIER@144..155
+                0: IDENT@144..155 "another-var" [] []
+            1: COLON@155..157 ":" [] [Whitespace(" ")]
+            2: CSS_GENERIC_COMPONENT_VALUE_LIST@157..163
+              0: CSS_IDENTIFIER@157..163
+                0: IDENT@157..163 "value" [] [Whitespace(" ")]
+            3: SCSS_VARIABLE_MODIFIER_LIST@163..179
+              0: SCSS_VARIABLE_MODIFIER@163..172
+                0: BANG@163..164 "!" [] []
+                1: DEFAULT_KW@164..172 "default" [] [Whitespace(" ")]
+              1: SCSS_VARIABLE_MODIFIER@172..179
+                0: BANG@172..173 "!" [] []
+                1: GLOBAL_KW@173..179 "global" [] []
+            4: SEMICOLON@179..180 ";" [] []
+          2: SCSS_DECLARATION@180..218
+            0: SCSS_IDENTIFIER@180..193
+              0: DOLLAR@180..184 "$" [Newline("\n"), Whitespace("  ")] []
+              1: CSS_IDENTIFIER@184..193
+                0: IDENT@184..193 "third-var" [] []
+            1: COLON@193..195 ":" [] [Whitespace(" ")]
+            2: CSS_GENERIC_COMPONENT_VALUE_LIST@195..201
+              0: CSS_IDENTIFIER@195..201
+                0: IDENT@195..201 "value" [] [Whitespace(" ")]
+            3: SCSS_VARIABLE_MODIFIER_LIST@201..217
+              0: SCSS_VARIABLE_MODIFIER@201..209
+                0: BANG@201..202 "!" [] []
+                1: GLOBAL_KW@202..209 "global" [] [Whitespace(" ")]
+              1: SCSS_VARIABLE_MODIFIER@209..217
+                0: BANG@209..210 "!" [] []
+                1: DEFAULT_KW@210..217 "default" [] []
+            4: SEMICOLON@217..218 ";" [] []
+          3: CSS_DECLARATION_WITH_SEMICOLON@218..241
+            0: CSS_DECLARATION@218..240
+              0: CSS_GENERIC_PROPERTY@218..240
+                0: CSS_IDENTIFIER@218..227
+                  0: IDENT@218..227 "color" [Newline("\n"), Newline("\n"), Whitespace("  ")] []
+                1: COLON@227..229 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@229..240
+                  0: SCSS_IDENTIFIER@229..240
+                    0: DOLLAR@229..230 "$" [] []
+                    1: CSS_IDENTIFIER@230..240
+                      0: IDENT@230..240 "global-var" [] []
+              1: (empty)
+            1: SEMICOLON@240..241 ";" [] []
+        2: R_CURLY@241..243 "}" [Newline("\n")] []
+    2: CSS_QUALIFIED_RULE@243..380
+      0: CSS_SELECTOR_LIST@243..310
+        0: CSS_COMPOUND_SELECTOR@243..310
+          0: CSS_NESTED_SELECTOR_LIST@243..243
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@243..310
+            0: CSS_CLASS_SELECTOR@243..310
+              0: DOT@243..295 "." [Newline("\n"), Newline("\n"), Comments("// Global flag with i ..."), Newline("\n")] []
+              1: CSS_CUSTOM_IDENTIFIER@295..310
+                0: IDENT@295..310 "important-test" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@310..380
+        0: L_CURLY@310..311 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@311..378
+          0: SCSS_DECLARATION@311..342
+            0: SCSS_IDENTIFIER@311..328
+              0: DOLLAR@311..315 "$" [Newline("\n"), Whitespace("  ")] []
+              1: CSS_IDENTIFIER@315..328
+                0: IDENT@315..328 "important-var" [] []
+            1: COLON@328..330 ":" [] [Whitespace(" ")]
+            2: CSS_GENERIC_COMPONENT_VALUE_LIST@330..334
+              0: CSS_IDENTIFIER@330..334
+                0: IDENT@330..334 "red" [] [Whitespace(" ")]
+            3: SCSS_VARIABLE_MODIFIER_LIST@334..341
+              0: SCSS_VARIABLE_MODIFIER@334..341
+                0: BANG@334..335 "!" [] []
+                1: GLOBAL_KW@335..341 "global" [] []
+            4: SEMICOLON@341..342 ";" [] []
+          1: CSS_DECLARATION_WITH_SEMICOLON@342..378
+            0: CSS_DECLARATION@342..377
+              0: CSS_GENERIC_PROPERTY@342..367
+                0: CSS_IDENTIFIER@342..350
+                  0: IDENT@342..350 "color" [Newline("\n"), Whitespace("  ")] []
+                1: COLON@350..352 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@352..367
+                  0: SCSS_IDENTIFIER@352..367
+                    0: DOLLAR@352..353 "$" [] []
+                    1: CSS_IDENTIFIER@353..367
+                      0: IDENT@353..367 "important-var" [] [Whitespace(" ")]
+              1: CSS_DECLARATION_IMPORTANT@367..377
+                0: BANG@367..368 "!" [] []
+                1: IMPORTANT_KW@368..377 "important" [] []
+            1: SEMICOLON@377..378 ";" [] []
+        2: R_CURLY@378..380 "}" [Newline("\n")] []
+  2: EOF@380..381 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/important.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/important.scss
new file mode 100644
index 000000000000..9f6f44b42450
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/important.scss
@@ -0,0 +1,3 @@
+a {
+  padding: 1px !important;
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/important.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/important.scss.snap
new file mode 100644
index 000000000000..e78f43e4affa
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/important.scss.snap
@@ -0,0 +1,102 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+a {
+  padding: 1px !important;
+}
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: CssTypeSelector {
+                        namespace: missing (optional),
+                        ident: CssIdentifier {
+                            value_token: IDENT@0..2 "a" [] [Whitespace(" ")],
+                        },
+                    },
+                    sub_selectors: CssSubSelectorList [],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@2..3 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@3..13 "padding" [Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@13..15 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    CssRegularDimension {
+                                        value_token: CSS_NUMBER_LITERAL@15..16 "1" [] [],
+                                        unit_token: IDENT@16..19 "px" [] [Whitespace(" ")],
+                                    },
+                                ],
+                            },
+                            important: CssDeclarationImportant {
+                                excl_token: BANG@19..20 "!" [] [],
+                                important_token: IMPORTANT_KW@20..29 "important" [] [],
+                            },
+                        },
+                        semicolon_token: SEMICOLON@29..30 ";" [] [],
+                    },
+                ],
+                r_curly_token: R_CURLY@30..32 "}" [Newline("\n")] [],
+            },
+        },
+    ],
+    eof_token: EOF@32..33 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..33
+  0: (empty)
+  1: CSS_RULE_LIST@0..32
+    0: CSS_QUALIFIED_RULE@0..32
+      0: CSS_SELECTOR_LIST@0..2
+        0: CSS_COMPOUND_SELECTOR@0..2
+          0: CSS_NESTED_SELECTOR_LIST@0..0
+          1: CSS_TYPE_SELECTOR@0..2
+            0: (empty)
+            1: CSS_IDENTIFIER@0..2
+              0: IDENT@0..2 "a" [] [Whitespace(" ")]
+          2: CSS_SUB_SELECTOR_LIST@2..2
+      1: CSS_DECLARATION_OR_RULE_BLOCK@2..32
+        0: L_CURLY@2..3 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@3..30
+          0: CSS_DECLARATION_WITH_SEMICOLON@3..30
+            0: CSS_DECLARATION@3..29
+              0: CSS_GENERIC_PROPERTY@3..19
+                0: CSS_IDENTIFIER@3..13
+                  0: IDENT@3..13 "padding" [Newline("\n"), Whitespace("  ")] []
+                1: COLON@13..15 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@15..19
+                  0: CSS_REGULAR_DIMENSION@15..19
+                    0: CSS_NUMBER_LITERAL@15..16 "1" [] []
+                    1: IDENT@16..19 "px" [] [Whitespace(" ")]
+              1: CSS_DECLARATION_IMPORTANT@19..29
+                0: BANG@19..20 "!" [] []
+                1: IMPORTANT_KW@20..29 "important" [] []
+            1: SEMICOLON@29..30 ";" [] []
+        2: R_CURLY@30..32 "}" [Newline("\n")] []
+  2: EOF@32..33 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/namespace-properties.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/namespace-properties.scss
new file mode 100644
index 000000000000..1506cc1dd155
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/namespace-properties.scss
@@ -0,0 +1,2 @@
+ns.$var: value;
+
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/namespace-properties.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/namespace-properties.scss.snap
new file mode 100644
index 000000000000..65993d7e311e
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/namespace-properties.scss.snap
@@ -0,0 +1,70 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+ns.$var: value;
+
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        ScssDeclaration {
+            name: ScssNamespacedIdentifier {
+                namespace: CssIdentifier {
+                    value_token: IDENT@0..2 "ns" [] [],
+                },
+                dot_token: DOT@2..3 "." [] [],
+                name: ScssIdentifier {
+                    dollar_token: DOLLAR@3..4 "$" [] [],
+                    name: CssIdentifier {
+                        value_token: IDENT@4..7 "var" [] [],
+                    },
+                },
+            },
+            colon_token: COLON@7..9 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@9..14 "value" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@14..15 ";" [] [],
+        },
+    ],
+    eof_token: EOF@15..17 "" [Newline("\n"), Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..17
+  0: (empty)
+  1: CSS_RULE_LIST@0..15
+    0: SCSS_DECLARATION@0..15
+      0: SCSS_NAMESPACED_IDENTIFIER@0..7
+        0: CSS_IDENTIFIER@0..2
+          0: IDENT@0..2 "ns" [] []
+        1: DOT@2..3 "." [] []
+        2: SCSS_IDENTIFIER@3..7
+          0: DOLLAR@3..4 "$" [] []
+          1: CSS_IDENTIFIER@4..7
+            0: IDENT@4..7 "var" [] []
+      1: COLON@7..9 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@9..14
+        0: CSS_IDENTIFIER@9..14
+          0: IDENT@9..14 "value" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@14..14
+      4: SEMICOLON@14..15 ";" [] []
+  2: EOF@15..17 "" [Newline("\n"), Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/nested-variables.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/nested-variables.scss
new file mode 100644
index 000000000000..9894838a0973
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/nested-variables.scss
@@ -0,0 +1,4 @@
+.button {
+  $padding: 12px;
+  padding: $padding;
+}
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/nested-variables.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/nested-variables.scss.snap
new file mode 100644
index 000000000000..22e203f68dac
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/nested-variables.scss.snap
@@ -0,0 +1,133 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+.button {
+  $padding: 12px;
+  padding: $padding;
+}
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        CssQualifiedRule {
+            prelude: CssSelectorList [
+                CssCompoundSelector {
+                    nesting_selectors: CssNestedSelectorList [],
+                    simple_selector: missing (optional),
+                    sub_selectors: CssSubSelectorList [
+                        CssClassSelector {
+                            dot_token: DOT@0..1 "." [] [],
+                            name: CssCustomIdentifier {
+                                value_token: IDENT@1..8 "button" [] [Whitespace(" ")],
+                            },
+                        },
+                    ],
+                },
+            ],
+            block: CssDeclarationOrRuleBlock {
+                l_curly_token: L_CURLY@8..9 "{" [] [],
+                items: CssDeclarationOrRuleList [
+                    ScssDeclaration {
+                        name: ScssIdentifier {
+                            dollar_token: DOLLAR@9..13 "$" [Newline("\n"), Whitespace("  ")] [],
+                            name: CssIdentifier {
+                                value_token: IDENT@13..20 "padding" [] [],
+                            },
+                        },
+                        colon_token: COLON@20..22 ":" [] [Whitespace(" ")],
+                        value: CssGenericComponentValueList [
+                            CssRegularDimension {
+                                value_token: CSS_NUMBER_LITERAL@22..24 "12" [] [],
+                                unit_token: IDENT@24..26 "px" [] [],
+                            },
+                        ],
+                        modifiers: ScssVariableModifierList [],
+                        semicolon_token: SEMICOLON@26..27 ";" [] [],
+                    },
+                    CssDeclarationWithSemicolon {
+                        declaration: CssDeclaration {
+                            property: CssGenericProperty {
+                                name: CssIdentifier {
+                                    value_token: IDENT@27..37 "padding" [Newline("\n"), Whitespace("  ")] [],
+                                },
+                                colon_token: COLON@37..39 ":" [] [Whitespace(" ")],
+                                value: CssGenericComponentValueList [
+                                    ScssIdentifier {
+                                        dollar_token: DOLLAR@39..40 "$" [] [],
+                                        name: CssIdentifier {
+                                            value_token: IDENT@40..47 "padding" [] [],
+                                        },
+                                    },
+                                ],
+                            },
+                            important: missing (optional),
+                        },
+                        semicolon_token: SEMICOLON@47..48 ";" [] [],
+                    },
+                ],
+                r_curly_token: R_CURLY@48..50 "}" [Newline("\n")] [],
+            },
+        },
+    ],
+    eof_token: EOF@50..51 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..51
+  0: (empty)
+  1: CSS_RULE_LIST@0..50
+    0: CSS_QUALIFIED_RULE@0..50
+      0: CSS_SELECTOR_LIST@0..8
+        0: CSS_COMPOUND_SELECTOR@0..8
+          0: CSS_NESTED_SELECTOR_LIST@0..0
+          1: (empty)
+          2: CSS_SUB_SELECTOR_LIST@0..8
+            0: CSS_CLASS_SELECTOR@0..8
+              0: DOT@0..1 "." [] []
+              1: CSS_CUSTOM_IDENTIFIER@1..8
+                0: IDENT@1..8 "button" [] [Whitespace(" ")]
+      1: CSS_DECLARATION_OR_RULE_BLOCK@8..50
+        0: L_CURLY@8..9 "{" [] []
+        1: CSS_DECLARATION_OR_RULE_LIST@9..48
+          0: SCSS_DECLARATION@9..27
+            0: SCSS_IDENTIFIER@9..20
+              0: DOLLAR@9..13 "$" [Newline("\n"), Whitespace("  ")] []
+              1: CSS_IDENTIFIER@13..20
+                0: IDENT@13..20 "padding" [] []
+            1: COLON@20..22 ":" [] [Whitespace(" ")]
+            2: CSS_GENERIC_COMPONENT_VALUE_LIST@22..26
+              0: CSS_REGULAR_DIMENSION@22..26
+                0: CSS_NUMBER_LITERAL@22..24 "12" [] []
+                1: IDENT@24..26 "px" [] []
+            3: SCSS_VARIABLE_MODIFIER_LIST@26..26
+            4: SEMICOLON@26..27 ";" [] []
+          1: CSS_DECLARATION_WITH_SEMICOLON@27..48
+            0: CSS_DECLARATION@27..47
+              0: CSS_GENERIC_PROPERTY@27..47
+                0: CSS_IDENTIFIER@27..37
+                  0: IDENT@27..37 "padding" [Newline("\n"), Whitespace("  ")] []
+                1: COLON@37..39 ":" [] [Whitespace(" ")]
+                2: CSS_GENERIC_COMPONENT_VALUE_LIST@39..47
+                  0: SCSS_IDENTIFIER@39..47
+                    0: DOLLAR@39..40 "$" [] []
+                    1: CSS_IDENTIFIER@40..47
+                      0: IDENT@40..47 "padding" [] []
+              1: (empty)
+            1: SEMICOLON@47..48 ";" [] []
+        2: R_CURLY@48..50 "}" [Newline("\n")] []
+  2: EOF@50..51 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/semicolon-eof.scss b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/semicolon-eof.scss
new file mode 100644
index 000000000000..e79188716117
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/semicolon-eof.scss
@@ -0,0 +1,2 @@
+$color: red;
+$size: 10px
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/semicolon-eof.scss.snap b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/semicolon-eof.scss.snap
new file mode 100644
index 000000000000..de3efa2f1e8d
--- /dev/null
+++ b/crates/biome_css_parser/tests/css_test_suite/ok/scss/declaration/semicolon-eof.scss.snap
@@ -0,0 +1,89 @@
+---
+source: crates/biome_css_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```css
+$color: red;
+$size: 10px
+
+```
+
+
+## AST
+
+```
+CssRoot {
+    bom_token: missing (optional),
+    rules: CssRuleList [
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@0..1 "$" [] [],
+                name: CssIdentifier {
+                    value_token: IDENT@1..6 "color" [] [],
+                },
+            },
+            colon_token: COLON@6..8 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssIdentifier {
+                    value_token: IDENT@8..11 "red" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: SEMICOLON@11..12 ";" [] [],
+        },
+        ScssDeclaration {
+            name: ScssIdentifier {
+                dollar_token: DOLLAR@12..14 "$" [Newline("\n")] [],
+                name: CssIdentifier {
+                    value_token: IDENT@14..18 "size" [] [],
+                },
+            },
+            colon_token: COLON@18..20 ":" [] [Whitespace(" ")],
+            value: CssGenericComponentValueList [
+                CssRegularDimension {
+                    value_token: CSS_NUMBER_LITERAL@20..22 "10" [] [],
+                    unit_token: IDENT@22..24 "px" [] [],
+                },
+            ],
+            modifiers: ScssVariableModifierList [],
+            semicolon_token: missing (optional),
+        },
+    ],
+    eof_token: EOF@24..25 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: CSS_ROOT@0..25
+  0: (empty)
+  1: CSS_RULE_LIST@0..24
+    0: SCSS_DECLARATION@0..12
+      0: SCSS_IDENTIFIER@0..6
+        0: DOLLAR@0..1 "$" [] []
+        1: CSS_IDENTIFIER@1..6
+          0: IDENT@1..6 "color" [] []
+      1: COLON@6..8 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@8..11
+        0: CSS_IDENTIFIER@8..11
+          0: IDENT@8..11 "red" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@11..11
+      4: SEMICOLON@11..12 ";" [] []
+    1: SCSS_DECLARATION@12..24
+      0: SCSS_IDENTIFIER@12..18
+        0: DOLLAR@12..14 "$" [Newline("\n")] []
+        1: CSS_IDENTIFIER@14..18
+          0: IDENT@14..18 "size" [] []
+      1: COLON@18..20 ":" [] [Whitespace(" ")]
+      2: CSS_GENERIC_COMPONENT_VALUE_LIST@20..24
+        0: CSS_REGULAR_DIMENSION@20..24
+          0: CSS_NUMBER_LITERAL@20..22 "10" [] []
+          1: IDENT@22..24 "px" [] []
+      3: SCSS_VARIABLE_MODIFIER_LIST@24..24
+      4: (empty)
+  2: EOF@24..25 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/snippet/eof_optional_semicolon.styled.css b/crates/biome_css_parser/tests/css_test_suite/ok/snippet/eof_optional_semicolon.styled.css
deleted file mode 100644
index 1fdee7c93d52..000000000000
--- a/crates/biome_css_parser/tests/css_test_suite/ok/snippet/eof_optional_semicolon.styled.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/* The last semicolon can be omitted when it's embedded in JS. */
-background-color: blue;
-color: red
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/snippet/eof_optional_semicolon.styled.css.snap b/crates/biome_css_parser/tests/css_test_suite/ok/snippet/eof_optional_semicolon.styled.css.snap
deleted file mode 100644
index 6a9b56fa9ec8..000000000000
--- a/crates/biome_css_parser/tests/css_test_suite/ok/snippet/eof_optional_semicolon.styled.css.snap
+++ /dev/null
@@ -1,88 +0,0 @@
----
-source: crates/biome_css_parser/tests/spec_test.rs
-expression: snapshot
----
-## Input
-
-```css
-/* The last semicolon can be omitted when it's embedded in JS. */
-background-color: blue;
-color: red
-
-```
-
-
-## AST
-
-```
-CssSnippetRoot {
-    items: CssDeclarationOrRuleList [
-        CssDeclarationWithSemicolon {
-            declaration: CssDeclaration {
-                property: CssGenericProperty {
-                    name: CssIdentifier {
-                        value_token: IDENT@0..82 "background-color" [Comments("/* The last semicolon ..."), Newline("\n")] [],
-                    },
-                    colon_token: COLON@82..84 ":" [] [Whitespace(" ")],
-                    value: CssGenericComponentValueList [
-                        CssIdentifier {
-                            value_token: IDENT@84..88 "blue" [] [],
-                        },
-                    ],
-                },
-                important: missing (optional),
-            },
-            semicolon_token: SEMICOLON@88..89 ";" [] [],
-        },
-        CssDeclarationWithSemicolon {
-            declaration: CssDeclaration {
-                property: CssGenericProperty {
-                    name: CssIdentifier {
-                        value_token: IDENT@89..95 "color" [Newline("\n")] [],
-                    },
-                    colon_token: COLON@95..97 ":" [] [Whitespace(" ")],
-                    value: CssGenericComponentValueList [
-                        CssIdentifier {
-                            value_token: IDENT@97..100 "red" [] [],
-                        },
-                    ],
-                },
-                important: missing (optional),
-            },
-            semicolon_token: missing (optional),
-        },
-    ],
-    eof_token: EOF@100..101 "" [Newline("\n")] [],
-}
-```
-
-## CST
-
-```
-0: CSS_SNIPPET_ROOT@0..101
-  0: CSS_DECLARATION_OR_RULE_LIST@0..100
-    0: CSS_DECLARATION_WITH_SEMICOLON@0..89
-      0: CSS_DECLARATION@0..88
-        0: CSS_GENERIC_PROPERTY@0..88
-          0: CSS_IDENTIFIER@0..82
-            0: IDENT@0..82 "background-color" [Comments("/* The last semicolon ..."), Newline("\n")] []
-          1: COLON@82..84 ":" [] [Whitespace(" ")]
-          2: CSS_GENERIC_COMPONENT_VALUE_LIST@84..88
-            0: CSS_IDENTIFIER@84..88
-              0: IDENT@84..88 "blue" [] []
-        1: (empty)
-      1: SEMICOLON@88..89 ";" [] []
-    1: CSS_DECLARATION_WITH_SEMICOLON@89..100
-      0: CSS_DECLARATION@89..100
-        0: CSS_GENERIC_PROPERTY@89..100
-          0: CSS_IDENTIFIER@89..95
-            0: IDENT@89..95 "color" [Newline("\n")] []
-          1: COLON@95..97 ":" [] [Whitespace(" ")]
-          2: CSS_GENERIC_COMPONENT_VALUE_LIST@97..100
-            0: CSS_IDENTIFIER@97..100
-              0: IDENT@97..100 "red" [] []
-        1: (empty)
-      1: (empty)
-  1: EOF@100..101 "" [Newline("\n")] []
-
-```
diff --git a/crates/biome_css_parser/tests/spec_test.rs b/crates/biome_css_parser/tests/spec_test.rs
index 03ee9960e54c..addce838e5f3 100644
--- a/crates/biome_css_parser/tests/spec_test.rs
+++ b/crates/biome_css_parser/tests/spec_test.rs
@@ -38,6 +38,10 @@ pub fn run(test_case: &str, _snapshot_name: &str, test_directory: &str, outcome_
         .expect("Expected test to have a file name")
         .to_str()
         .expect("File name to be valid UTF8");
+    let extension = test_case_path
+        .extension()
+        .and_then(|ext| ext.to_str())
+        .unwrap_or_default();
 
     let content = fs::read_to_string(test_case_path)
         .expect("Expected test path to be a readable file in UTF8 encoding");
@@ -85,7 +89,12 @@ pub fn run(test_case: &str, _snapshot_name: &str, test_directory: &str, outcome_
         }
     }
 
-    let mut source_type = CssFileSource::css();
+    let mut source_type = if extension == "scss" {
+        CssFileSource::scss()
+    } else {
+        CssFileSource::css()
+    };
+
     if file_name.ends_with(".styled.css") {
         source_type = source_type.with_embedding_kind(EmbeddingKind::Styled);
     }
diff --git a/crates/biome_css_parser/tests/spec_tests.rs b/crates/biome_css_parser/tests/spec_tests.rs
index ea2890d73882..e7c918831dbf 100644
--- a/crates/biome_css_parser/tests/spec_tests.rs
+++ b/crates/biome_css_parser/tests/spec_tests.rs
@@ -1,4 +1,4 @@
 mod spec_test;
 
-tests_macros::gen_tests! {"tests/css_test_suite/ok/**/*.css", crate::spec_test::run, "ok"}
-tests_macros::gen_tests! {"tests/css_test_suite/error/**/*.css", crate::spec_test::run, "error"}
+tests_macros::gen_tests! {"tests/css_test_suite/ok/**/*.{css,scss}", crate::spec_test::run, "ok"}
+tests_macros::gen_tests! {"tests/css_test_suite/error/**/*.{css,scss}", crate::spec_test::run, "error"}
diff --git a/crates/biome_css_syntax/src/file_source.rs b/crates/biome_css_syntax/src/file_source.rs
index 88308712f1e3..53358892361c 100644
--- a/crates/biome_css_syntax/src/file_source.rs
+++ b/crates/biome_css_syntax/src/file_source.rs
@@ -40,6 +40,7 @@ pub enum EmbeddingHtmlKind {
 )]
 #[serde(rename_all = "camelCase")]
 pub struct CssFileSource {
+    language: CssFileLanguage,
     variant: CssVariant,
 
     /// Used to mark if the CSS is embedded inside some particular files. This affects the parsing.
@@ -47,7 +48,29 @@ pub struct CssFileSource {
     embedding_kind: EmbeddingKind,
 }
 
-/// The style of CSS contained in the file.
+/// The language of the stylesheet.
+#[cfg_attr(feature = "schema", derive(schemars::JsonSchema))]
+#[derive(
+    Debug, Clone, Default, Copy, Eq, PartialEq, Hash, serde::Serialize, serde::Deserialize,
+)]
+#[serde(rename_all = "camelCase")]
+pub enum CssFileLanguage {
+    #[default]
+    Css,
+    Scss,
+}
+
+impl CssFileLanguage {
+    pub const fn is_css(&self) -> bool {
+        matches!(self, Self::Css)
+    }
+
+    pub const fn is_scss(&self) -> bool {
+        matches!(self, Self::Scss)
+    }
+}
+
+/// Extra CSS features enabled for the file.
 ///
 /// Currently, Biome aims to be compatible with
 /// the latest Recommendation level standards.
@@ -70,6 +93,15 @@ pub enum CssVariant {
 impl CssFileSource {
     pub fn css() -> Self {
         Self {
+            language: CssFileLanguage::Css,
+            variant: CssVariant::Standard,
+            embedding_kind: EmbeddingKind::None,
+        }
+    }
+
+    pub fn scss() -> Self {
+        Self {
+            language: CssFileLanguage::Scss,
             variant: CssVariant::Standard,
             embedding_kind: EmbeddingKind::None,
         }
@@ -77,6 +109,7 @@ impl CssFileSource {
 
     pub fn tailwind_css() -> Self {
         Self {
+            language: CssFileLanguage::Css,
             variant: CssVariant::TailwindCss,
             embedding_kind: EmbeddingKind::None,
         }
@@ -84,6 +117,7 @@ impl CssFileSource {
 
     pub fn new_css_modules() -> Self {
         Self {
+            language: CssFileLanguage::Css,
             variant: CssVariant::CssModules,
             embedding_kind: EmbeddingKind::None,
         }
@@ -108,6 +142,14 @@ impl CssFileSource {
         self
     }
 
+    pub fn is_css(&self) -> bool {
+        self.language.is_css()
+    }
+
+    pub fn is_scss(&self) -> bool {
+        self.language.is_scss()
+    }
+
     pub fn is_css_modules(&self) -> bool {
         self.variant == CssVariant::CssModules
     }
@@ -147,6 +189,7 @@ impl CssFileSource {
         // We assume the file extension is normalized to lowercase
         match extension {
             "css" => Ok(Self::css()),
+            "scss" => Ok(Self::scss()),
             "module.css" => Ok(Self::new_css_modules()),
             _ => Err(FileSourceError::UnknownExtension),
         }
@@ -161,6 +204,7 @@ impl CssFileSource {
     pub fn try_from_language_id(language_id: &str) -> Result<Self, FileSourceError> {
         match language_id {
             "css" => Ok(Self::css()),
+            "scss" => Ok(Self::scss()),
             "tailwindcss" => Ok(Self::tailwind_css()),
             _ => Err(FileSourceError::UnknownLanguageId),
         }
diff --git a/crates/biome_css_syntax/src/generated/kind.rs b/crates/biome_css_syntax/src/generated/kind.rs
index e79c9a7d1e89..288f30a7ceb4 100644
--- a/crates/biome_css_syntax/src/generated/kind.rs
+++ b/crates/biome_css_syntax/src/generated/kind.rs
@@ -23,6 +23,7 @@ pub enum CssSyntaxKind {
     L_ANGLE,
     R_ANGLE,
     TILDE,
+    DOLLAR,
     HASH,
     AMP,
     PIPE,
@@ -523,6 +524,11 @@ pub enum CssSyntaxKind {
     CSS_VALUE_AT_RULE_GENERIC_PROPERTY,
     CSS_VALUE_AT_RULE_GENERIC_VALUE,
     CSS_VIEW_TRANSITION_AT_RULE,
+    SCSS_DECLARATION,
+    SCSS_NAMESPACED_IDENTIFIER,
+    SCSS_VARIABLE_MODIFIER_LIST,
+    SCSS_VARIABLE_MODIFIER,
+    SCSS_IDENTIFIER,
     TW_THEME_AT_RULE,
     TW_UTILITY_AT_RULE,
     TW_VARIANT_AT_RULE,
@@ -593,6 +599,7 @@ impl CssSyntaxKind {
                 | L_ANGLE
                 | R_ANGLE
                 | TILDE
+                | DOLLAR
                 | HASH
                 | AMP
                 | PIPE
@@ -687,6 +694,7 @@ impl CssSyntaxKind {
                 | CSS_DOCUMENT_MATCHER_LIST
                 | CSS_VALUE_AT_RULE_PROPERTY_LIST
                 | CSS_VALUE_AT_RULE_IMPORT_SPECIFIER_LIST
+                | SCSS_VARIABLE_MODIFIER_LIST
                 | TW_APPLY_CLASS_LIST
                 | CSS_UNKNOWN_AT_RULE_COMPONENT_LIST
         )
@@ -910,6 +918,7 @@ impl CssSyntaxKind {
             L_ANGLE => "<",
             R_ANGLE => ">",
             TILDE => "~",
+            DOLLAR => "$",
             HASH => "#",
             AMP => "&",
             PIPE => "|",
@@ -1150,4 +1159,4 @@ impl CssSyntaxKind {
 }
 #[doc = r" Utility macro for creating a SyntaxKind through simple macro syntax"]
 #[macro_export]
-macro_rules ! T { [;] => { $ crate :: CssSyntaxKind :: SEMICOLON } ; [,] => { $ crate :: CssSyntaxKind :: COMMA } ; ['('] => { $ crate :: CssSyntaxKind :: L_PAREN } ; [')'] => { $ crate :: CssSyntaxKind :: R_PAREN } ; ['{'] => { $ crate :: CssSyntaxKind :: L_CURLY } ; ['}'] => { $ crate :: CssSyntaxKind :: R_CURLY } ; ['['] => { $ crate :: CssSyntaxKind :: L_BRACK } ; [']'] => { $ crate :: CssSyntaxKind :: R_BRACK } ; [<] => { $ crate :: CssSyntaxKind :: L_ANGLE } ; [>] => { $ crate :: CssSyntaxKind :: R_ANGLE } ; [~] => { $ crate :: CssSyntaxKind :: TILDE } ; [#] => { $ crate :: CssSyntaxKind :: HASH } ; [&] => { $ crate :: CssSyntaxKind :: AMP } ; [|] => { $ crate :: CssSyntaxKind :: PIPE } ; [||] => { $ crate :: CssSyntaxKind :: PIPE2 } ; [+] => { $ crate :: CssSyntaxKind :: PLUS } ; [*] => { $ crate :: CssSyntaxKind :: STAR } ; [/] => { $ crate :: CssSyntaxKind :: SLASH } ; [^] => { $ crate :: CssSyntaxKind :: CARET } ; [%] => { $ crate :: CssSyntaxKind :: PERCENT } ; [.] => { $ crate :: CssSyntaxKind :: DOT } ; [:] => { $ crate :: CssSyntaxKind :: COLON } ; [::] => { $ crate :: CssSyntaxKind :: COLON2 } ; [=] => { $ crate :: CssSyntaxKind :: EQ } ; [!] => { $ crate :: CssSyntaxKind :: BANG } ; [!=] => { $ crate :: CssSyntaxKind :: NEQ } ; [-] => { $ crate :: CssSyntaxKind :: MINUS } ; [<=] => { $ crate :: CssSyntaxKind :: LTEQ } ; [>=] => { $ crate :: CssSyntaxKind :: GTEQ } ; [+=] => { $ crate :: CssSyntaxKind :: PLUSEQ } ; [|=] => { $ crate :: CssSyntaxKind :: PIPEEQ } ; [&=] => { $ crate :: CssSyntaxKind :: AMPEQ } ; [^=] => { $ crate :: CssSyntaxKind :: CARETEQ } ; [/=] => { $ crate :: CssSyntaxKind :: SLASHEQ } ; [*=] => { $ crate :: CssSyntaxKind :: STAREQ } ; [%=] => { $ crate :: CssSyntaxKind :: PERCENTEQ } ; [@] => { $ crate :: CssSyntaxKind :: AT } ; ["$="] => { $ crate :: CssSyntaxKind :: DOLLAR_EQ } ; [~=] => { $ crate :: CssSyntaxKind :: TILDE_EQ } ; [-->] => { $ crate :: CssSyntaxKind :: CDC } ; [<!--] => { $ crate :: CssSyntaxKind :: CDO } ; ["U+"] => { $ crate :: CssSyntaxKind :: UNICODE } ; [media] => { $ crate :: CssSyntaxKind :: MEDIA_KW } ; [keyframes] => { $ crate :: CssSyntaxKind :: KEYFRAMES_KW } ; [not] => { $ crate :: CssSyntaxKind :: NOT_KW } ; [and] => { $ crate :: CssSyntaxKind :: AND_KW } ; [only] => { $ crate :: CssSyntaxKind :: ONLY_KW } ; [or] => { $ crate :: CssSyntaxKind :: OR_KW } ; [i] => { $ crate :: CssSyntaxKind :: I_KW } ; [important] => { $ crate :: CssSyntaxKind :: IMPORTANT_KW } ; [highlight] => { $ crate :: CssSyntaxKind :: HIGHLIGHT_KW } ; [part] => { $ crate :: CssSyntaxKind :: PART_KW } ; [dir] => { $ crate :: CssSyntaxKind :: DIR_KW } ; [local] => { $ crate :: CssSyntaxKind :: LOCAL_KW } ; [global] => { $ crate :: CssSyntaxKind :: GLOBAL_KW } ; [slotted] => { $ crate :: CssSyntaxKind :: SLOTTED_KW } ; [deep] => { $ crate :: CssSyntaxKind :: DEEP_KW } ; [any] => { $ crate :: CssSyntaxKind :: ANY_KW } ; [current] => { $ crate :: CssSyntaxKind :: CURRENT_KW } ; [past] => { $ crate :: CssSyntaxKind :: PAST_KW } ; [future] => { $ crate :: CssSyntaxKind :: FUTURE_KW } ; [host] => { $ crate :: CssSyntaxKind :: HOST_KW } ; [host_context] => { $ crate :: CssSyntaxKind :: HOST_CONTEXT_KW } ; [matches] => { $ crate :: CssSyntaxKind :: MATCHES_KW } ; [is] => { $ crate :: CssSyntaxKind :: IS_KW } ; [where] => { $ crate :: CssSyntaxKind :: WHERE_KW } ; [has] => { $ crate :: CssSyntaxKind :: HAS_KW } ; [lang] => { $ crate :: CssSyntaxKind :: LANG_KW } ; [nth_child] => { $ crate :: CssSyntaxKind :: NTH_CHILD_KW } ; [nth_last_child] => { $ crate :: CssSyntaxKind :: NTH_LAST_CHILD_KW } ; [nth_of_type] => { $ crate :: CssSyntaxKind :: NTH_OF_TYPE_KW } ; [nth_last_of_type] => { $ crate :: CssSyntaxKind :: NTH_LAST_OF_TYPE_KW } ; [active_view_transition_type] => { $ crate :: CssSyntaxKind :: ACTIVE_VIEW_TRANSITION_TYPE_KW } ; [nth_col] => { $ crate :: CssSyntaxKind :: NTH_COL_KW } ; [nth_last_col] => { $ crate :: CssSyntaxKind :: NTH_LAST_COL_KW } ; [charset] => { $ crate :: CssSyntaxKind :: CHARSET_KW } ; [color_profile] => { $ crate :: CssSyntaxKind :: COLOR_PROFILE_KW } ; [counter_style] => { $ crate :: CssSyntaxKind :: COUNTER_STYLE_KW } ; [property] => { $ crate :: CssSyntaxKind :: PROPERTY_KW } ; [container] => { $ crate :: CssSyntaxKind :: CONTAINER_KW } ; [style] => { $ crate :: CssSyntaxKind :: STYLE_KW } ; [ltr] => { $ crate :: CssSyntaxKind :: LTR_KW } ; [rtl] => { $ crate :: CssSyntaxKind :: RTL_KW } ; [n] => { $ crate :: CssSyntaxKind :: N_KW } ; [even] => { $ crate :: CssSyntaxKind :: EVEN_KW } ; [odd] => { $ crate :: CssSyntaxKind :: ODD_KW } ; [of] => { $ crate :: CssSyntaxKind :: OF_KW } ; [from] => { $ crate :: CssSyntaxKind :: FROM_KW } ; [to] => { $ crate :: CssSyntaxKind :: TO_KW } ; [var] => { $ crate :: CssSyntaxKind :: VAR_KW } ; [url] => { $ crate :: CssSyntaxKind :: URL_KW } ; [if] => { $ crate :: CssSyntaxKind :: IF_KW } ; [else] => { $ crate :: CssSyntaxKind :: ELSE_KW } ; [attr] => { $ crate :: CssSyntaxKind :: ATTR_KW } ; [type] => { $ crate :: CssSyntaxKind :: TYPE_KW } ; [raw_string] => { $ crate :: CssSyntaxKind :: RAW_STRING_KW } ; [number] => { $ crate :: CssSyntaxKind :: NUMBER_KW } ; [src] => { $ crate :: CssSyntaxKind :: SRC_KW } ; [font_palette_values] => { $ crate :: CssSyntaxKind :: FONT_PALETTE_VALUES_KW } ; [font_feature_values] => { $ crate :: CssSyntaxKind :: FONT_FEATURE_VALUES_KW } ; [stylistic] => { $ crate :: CssSyntaxKind :: STYLISTIC_KW } ; [historical_forms] => { $ crate :: CssSyntaxKind :: HISTORICAL_FORMS_KW } ; [styleset] => { $ crate :: CssSyntaxKind :: STYLESET_KW } ; [character_variant] => { $ crate :: CssSyntaxKind :: CHARACTER_VARIANT_KW } ; [state] => { $ crate :: CssSyntaxKind :: STATE_KW } ; [swash] => { $ crate :: CssSyntaxKind :: SWASH_KW } ; [ornaments] => { $ crate :: CssSyntaxKind :: ORNAMENTS_KW } ; [annotation] => { $ crate :: CssSyntaxKind :: ANNOTATION_KW } ; [auto] => { $ crate :: CssSyntaxKind :: AUTO_KW } ; [thin] => { $ crate :: CssSyntaxKind :: THIN_KW } ; [medium] => { $ crate :: CssSyntaxKind :: MEDIUM_KW } ; [thick] => { $ crate :: CssSyntaxKind :: THICK_KW } ; [none] => { $ crate :: CssSyntaxKind :: NONE_KW } ; [hidden] => { $ crate :: CssSyntaxKind :: HIDDEN_KW } ; [dotted] => { $ crate :: CssSyntaxKind :: DOTTED_KW } ; [dashed] => { $ crate :: CssSyntaxKind :: DASHED_KW } ; [solid] => { $ crate :: CssSyntaxKind :: SOLID_KW } ; [double] => { $ crate :: CssSyntaxKind :: DOUBLE_KW } ; [groove] => { $ crate :: CssSyntaxKind :: GROOVE_KW } ; [ridge] => { $ crate :: CssSyntaxKind :: RIDGE_KW } ; [inset] => { $ crate :: CssSyntaxKind :: INSET_KW } ; [outset] => { $ crate :: CssSyntaxKind :: OUTSET_KW } ; [theme] => { $ crate :: CssSyntaxKind :: THEME_KW } ; [utility] => { $ crate :: CssSyntaxKind :: UTILITY_KW } ; [variant] => { $ crate :: CssSyntaxKind :: VARIANT_KW } ; [custom_variant] => { $ crate :: CssSyntaxKind :: CUSTOM_VARIANT_KW } ; [apply] => { $ crate :: CssSyntaxKind :: APPLY_KW } ; [source] => { $ crate :: CssSyntaxKind :: SOURCE_KW } ; [reference] => { $ crate :: CssSyntaxKind :: REFERENCE_KW } ; [config] => { $ crate :: CssSyntaxKind :: CONFIG_KW } ; [plugin] => { $ crate :: CssSyntaxKind :: PLUGIN_KW } ; [slot] => { $ crate :: CssSyntaxKind :: SLOT_KW } ; [inline] => { $ crate :: CssSyntaxKind :: INLINE_KW } ; [initial] => { $ crate :: CssSyntaxKind :: INITIAL_KW } ; [inherit] => { $ crate :: CssSyntaxKind :: INHERIT_KW } ; [unset] => { $ crate :: CssSyntaxKind :: UNSET_KW } ; [revert] => { $ crate :: CssSyntaxKind :: REVERT_KW } ; [revert_layer] => { $ crate :: CssSyntaxKind :: REVERT_LAYER_KW } ; [default] => { $ crate :: CssSyntaxKind :: DEFAULT_KW } ; [em] => { $ crate :: CssSyntaxKind :: EM_KW } ; [rem] => { $ crate :: CssSyntaxKind :: REM_KW } ; [ex] => { $ crate :: CssSyntaxKind :: EX_KW } ; [rex] => { $ crate :: CssSyntaxKind :: REX_KW } ; [cap] => { $ crate :: CssSyntaxKind :: CAP_KW } ; [rcap] => { $ crate :: CssSyntaxKind :: RCAP_KW } ; [ch] => { $ crate :: CssSyntaxKind :: CH_KW } ; [rch] => { $ crate :: CssSyntaxKind :: RCH_KW } ; [ic] => { $ crate :: CssSyntaxKind :: IC_KW } ; [ric] => { $ crate :: CssSyntaxKind :: RIC_KW } ; [lh] => { $ crate :: CssSyntaxKind :: LH_KW } ; [rlh] => { $ crate :: CssSyntaxKind :: RLH_KW } ; [vw] => { $ crate :: CssSyntaxKind :: VW_KW } ; [svw] => { $ crate :: CssSyntaxKind :: SVW_KW } ; [lvw] => { $ crate :: CssSyntaxKind :: LVW_KW } ; [dvw] => { $ crate :: CssSyntaxKind :: DVW_KW } ; [vh] => { $ crate :: CssSyntaxKind :: VH_KW } ; [svh] => { $ crate :: CssSyntaxKind :: SVH_KW } ; [lvh] => { $ crate :: CssSyntaxKind :: LVH_KW } ; [dvh] => { $ crate :: CssSyntaxKind :: DVH_KW } ; [vi] => { $ crate :: CssSyntaxKind :: VI_KW } ; [svi] => { $ crate :: CssSyntaxKind :: SVI_KW } ; [lvi] => { $ crate :: CssSyntaxKind :: LVI_KW } ; [dvi] => { $ crate :: CssSyntaxKind :: DVI_KW } ; [vb] => { $ crate :: CssSyntaxKind :: VB_KW } ; [svb] => { $ crate :: CssSyntaxKind :: SVB_KW } ; [lvb] => { $ crate :: CssSyntaxKind :: LVB_KW } ; [dvb] => { $ crate :: CssSyntaxKind :: DVB_KW } ; [vmin] => { $ crate :: CssSyntaxKind :: VMIN_KW } ; [svmin] => { $ crate :: CssSyntaxKind :: SVMIN_KW } ; [lvmin] => { $ crate :: CssSyntaxKind :: LVMIN_KW } ; [dvmin] => { $ crate :: CssSyntaxKind :: DVMIN_KW } ; [vmax] => { $ crate :: CssSyntaxKind :: VMAX_KW } ; [svmax] => { $ crate :: CssSyntaxKind :: SVMAX_KW } ; [lvmax] => { $ crate :: CssSyntaxKind :: LVMAX_KW } ; [dvmax] => { $ crate :: CssSyntaxKind :: DVMAX_KW } ; [cm] => { $ crate :: CssSyntaxKind :: CM_KW } ; [mm] => { $ crate :: CssSyntaxKind :: MM_KW } ; [q] => { $ crate :: CssSyntaxKind :: Q_KW } ; [in] => { $ crate :: CssSyntaxKind :: IN_KW } ; [pc] => { $ crate :: CssSyntaxKind :: PC_KW } ; [pt] => { $ crate :: CssSyntaxKind :: PT_KW } ; [px] => { $ crate :: CssSyntaxKind :: PX_KW } ; [mozmm] => { $ crate :: CssSyntaxKind :: MOZMM_KW } ; [rpx] => { $ crate :: CssSyntaxKind :: RPX_KW } ; [cqw] => { $ crate :: CssSyntaxKind :: CQW_KW } ; [cqh] => { $ crate :: CssSyntaxKind :: CQH_KW } ; [cqi] => { $ crate :: CssSyntaxKind :: CQI_KW } ; [cqb] => { $ crate :: CssSyntaxKind :: CQB_KW } ; [cqmin] => { $ crate :: CssSyntaxKind :: CQMIN_KW } ; [cqmax] => { $ crate :: CssSyntaxKind :: CQMAX_KW } ; [deg] => { $ crate :: CssSyntaxKind :: DEG_KW } ; [grad] => { $ crate :: CssSyntaxKind :: GRAD_KW } ; [rad] => { $ crate :: CssSyntaxKind :: RAD_KW } ; [turn] => { $ crate :: CssSyntaxKind :: TURN_KW } ; [s] => { $ crate :: CssSyntaxKind :: S_KW } ; [ms] => { $ crate :: CssSyntaxKind :: MS_KW } ; [hz] => { $ crate :: CssSyntaxKind :: HZ_KW } ; [khz] => { $ crate :: CssSyntaxKind :: KHZ_KW } ; [dpi] => { $ crate :: CssSyntaxKind :: DPI_KW } ; [dpcm] => { $ crate :: CssSyntaxKind :: DPCM_KW } ; [dppx] => { $ crate :: CssSyntaxKind :: DPPX_KW } ; [x] => { $ crate :: CssSyntaxKind :: X_KW } ; [fr] => { $ crate :: CssSyntaxKind :: FR_KW } ; [page] => { $ crate :: CssSyntaxKind :: PAGE_KW } ; [left] => { $ crate :: CssSyntaxKind :: LEFT_KW } ; [right] => { $ crate :: CssSyntaxKind :: RIGHT_KW } ; [first] => { $ crate :: CssSyntaxKind :: FIRST_KW } ; [blank] => { $ crate :: CssSyntaxKind :: BLANK_KW } ; [top_left_corner] => { $ crate :: CssSyntaxKind :: TOP_LEFT_CORNER_KW } ; [top_left] => { $ crate :: CssSyntaxKind :: TOP_LEFT_KW } ; [top_center] => { $ crate :: CssSyntaxKind :: TOP_CENTER_KW } ; [top_right] => { $ crate :: CssSyntaxKind :: TOP_RIGHT_KW } ; [top_right_corner] => { $ crate :: CssSyntaxKind :: TOP_RIGHT_CORNER_KW } ; [bottom_left_corner] => { $ crate :: CssSyntaxKind :: BOTTOM_LEFT_CORNER_KW } ; [bottom_left] => { $ crate :: CssSyntaxKind :: BOTTOM_LEFT_KW } ; [bottom_center] => { $ crate :: CssSyntaxKind :: BOTTOM_CENTER_KW } ; [bottom_right] => { $ crate :: CssSyntaxKind :: BOTTOM_RIGHT_KW } ; [bottom_right_corner] => { $ crate :: CssSyntaxKind :: BOTTOM_RIGHT_CORNER_KW } ; [left_top] => { $ crate :: CssSyntaxKind :: LEFT_TOP_KW } ; [left_middle] => { $ crate :: CssSyntaxKind :: LEFT_MIDDLE_KW } ; [left_bottom] => { $ crate :: CssSyntaxKind :: LEFT_BOTTOM_KW } ; [right_top] => { $ crate :: CssSyntaxKind :: RIGHT_TOP_KW } ; [right_middle] => { $ crate :: CssSyntaxKind :: RIGHT_MIDDLE_KW } ; [right_bottom] => { $ crate :: CssSyntaxKind :: RIGHT_BOTTOM_KW } ; [layer] => { $ crate :: CssSyntaxKind :: LAYER_KW } ; [scope] => { $ crate :: CssSyntaxKind :: SCOPE_KW } ; [supports] => { $ crate :: CssSyntaxKind :: SUPPORTS_KW } ; [selector] => { $ crate :: CssSyntaxKind :: SELECTOR_KW } ; [import] => { $ crate :: CssSyntaxKind :: IMPORT_KW } ; [namespace] => { $ crate :: CssSyntaxKind :: NAMESPACE_KW } ; [starting_style] => { $ crate :: CssSyntaxKind :: STARTING_STYLE_KW } ; [document] => { $ crate :: CssSyntaxKind :: DOCUMENT_KW } ; [url_prefix] => { $ crate :: CssSyntaxKind :: URL_PREFIX_KW } ; [domain] => { $ crate :: CssSyntaxKind :: DOMAIN_KW } ; [media_document] => { $ crate :: CssSyntaxKind :: MEDIA_DOCUMENT_KW } ; [regexp] => { $ crate :: CssSyntaxKind :: REGEXP_KW } ; [value] => { $ crate :: CssSyntaxKind :: VALUE_KW } ; [as] => { $ crate :: CssSyntaxKind :: AS_KW } ; [composes] => { $ crate :: CssSyntaxKind :: COMPOSES_KW } ; [position_try] => { $ crate :: CssSyntaxKind :: POSITION_TRY_KW } ; [view_transition] => { $ crate :: CssSyntaxKind :: VIEW_TRANSITION_KW } ; [font_face] => { $ crate :: CssSyntaxKind :: FONT_FACE_KW } ; [ident] => { $ crate :: CssSyntaxKind :: IDENT } ; [EOF] => { $ crate :: CssSyntaxKind :: EOF } ; [UNICODE_BOM] => { $ crate :: CssSyntaxKind :: UNICODE_BOM } ; [#] => { $ crate :: CssSyntaxKind :: HASH } ; }
+macro_rules ! T { [;] => { $ crate :: CssSyntaxKind :: SEMICOLON } ; [,] => { $ crate :: CssSyntaxKind :: COMMA } ; ['('] => { $ crate :: CssSyntaxKind :: L_PAREN } ; [')'] => { $ crate :: CssSyntaxKind :: R_PAREN } ; ['{'] => { $ crate :: CssSyntaxKind :: L_CURLY } ; ['}'] => { $ crate :: CssSyntaxKind :: R_CURLY } ; ['['] => { $ crate :: CssSyntaxKind :: L_BRACK } ; [']'] => { $ crate :: CssSyntaxKind :: R_BRACK } ; [<] => { $ crate :: CssSyntaxKind :: L_ANGLE } ; [>] => { $ crate :: CssSyntaxKind :: R_ANGLE } ; [~] => { $ crate :: CssSyntaxKind :: TILDE } ; [$] => { $ crate :: CssSyntaxKind :: DOLLAR } ; [#] => { $ crate :: CssSyntaxKind :: HASH } ; [&] => { $ crate :: CssSyntaxKind :: AMP } ; [|] => { $ crate :: CssSyntaxKind :: PIPE } ; [||] => { $ crate :: CssSyntaxKind :: PIPE2 } ; [+] => { $ crate :: CssSyntaxKind :: PLUS } ; [*] => { $ crate :: CssSyntaxKind :: STAR } ; [/] => { $ crate :: CssSyntaxKind :: SLASH } ; [^] => { $ crate :: CssSyntaxKind :: CARET } ; [%] => { $ crate :: CssSyntaxKind :: PERCENT } ; [.] => { $ crate :: CssSyntaxKind :: DOT } ; [:] => { $ crate :: CssSyntaxKind :: COLON } ; [::] => { $ crate :: CssSyntaxKind :: COLON2 } ; [=] => { $ crate :: CssSyntaxKind :: EQ } ; [!] => { $ crate :: CssSyntaxKind :: BANG } ; [!=] => { $ crate :: CssSyntaxKind :: NEQ } ; [-] => { $ crate :: CssSyntaxKind :: MINUS } ; [<=] => { $ crate :: CssSyntaxKind :: LTEQ } ; [>=] => { $ crate :: CssSyntaxKind :: GTEQ } ; [+=] => { $ crate :: CssSyntaxKind :: PLUSEQ } ; [|=] => { $ crate :: CssSyntaxKind :: PIPEEQ } ; [&=] => { $ crate :: CssSyntaxKind :: AMPEQ } ; [^=] => { $ crate :: CssSyntaxKind :: CARETEQ } ; [/=] => { $ crate :: CssSyntaxKind :: SLASHEQ } ; [*=] => { $ crate :: CssSyntaxKind :: STAREQ } ; [%=] => { $ crate :: CssSyntaxKind :: PERCENTEQ } ; [@] => { $ crate :: CssSyntaxKind :: AT } ; ["$="] => { $ crate :: CssSyntaxKind :: DOLLAR_EQ } ; [~=] => { $ crate :: CssSyntaxKind :: TILDE_EQ } ; [-->] => { $ crate :: CssSyntaxKind :: CDC } ; [<!--] => { $ crate :: CssSyntaxKind :: CDO } ; ["U+"] => { $ crate :: CssSyntaxKind :: UNICODE } ; [media] => { $ crate :: CssSyntaxKind :: MEDIA_KW } ; [keyframes] => { $ crate :: CssSyntaxKind :: KEYFRAMES_KW } ; [not] => { $ crate :: CssSyntaxKind :: NOT_KW } ; [and] => { $ crate :: CssSyntaxKind :: AND_KW } ; [only] => { $ crate :: CssSyntaxKind :: ONLY_KW } ; [or] => { $ crate :: CssSyntaxKind :: OR_KW } ; [i] => { $ crate :: CssSyntaxKind :: I_KW } ; [important] => { $ crate :: CssSyntaxKind :: IMPORTANT_KW } ; [highlight] => { $ crate :: CssSyntaxKind :: HIGHLIGHT_KW } ; [part] => { $ crate :: CssSyntaxKind :: PART_KW } ; [dir] => { $ crate :: CssSyntaxKind :: DIR_KW } ; [local] => { $ crate :: CssSyntaxKind :: LOCAL_KW } ; [global] => { $ crate :: CssSyntaxKind :: GLOBAL_KW } ; [slotted] => { $ crate :: CssSyntaxKind :: SLOTTED_KW } ; [deep] => { $ crate :: CssSyntaxKind :: DEEP_KW } ; [any] => { $ crate :: CssSyntaxKind :: ANY_KW } ; [current] => { $ crate :: CssSyntaxKind :: CURRENT_KW } ; [past] => { $ crate :: CssSyntaxKind :: PAST_KW } ; [future] => { $ crate :: CssSyntaxKind :: FUTURE_KW } ; [host] => { $ crate :: CssSyntaxKind :: HOST_KW } ; [host_context] => { $ crate :: CssSyntaxKind :: HOST_CONTEXT_KW } ; [matches] => { $ crate :: CssSyntaxKind :: MATCHES_KW } ; [is] => { $ crate :: CssSyntaxKind :: IS_KW } ; [where] => { $ crate :: CssSyntaxKind :: WHERE_KW } ; [has] => { $ crate :: CssSyntaxKind :: HAS_KW } ; [lang] => { $ crate :: CssSyntaxKind :: LANG_KW } ; [nth_child] => { $ crate :: CssSyntaxKind :: NTH_CHILD_KW } ; [nth_last_child] => { $ crate :: CssSyntaxKind :: NTH_LAST_CHILD_KW } ; [nth_of_type] => { $ crate :: CssSyntaxKind :: NTH_OF_TYPE_KW } ; [nth_last_of_type] => { $ crate :: CssSyntaxKind :: NTH_LAST_OF_TYPE_KW } ; [active_view_transition_type] => { $ crate :: CssSyntaxKind :: ACTIVE_VIEW_TRANSITION_TYPE_KW } ; [nth_col] => { $ crate :: CssSyntaxKind :: NTH_COL_KW } ; [nth_last_col] => { $ crate :: CssSyntaxKind :: NTH_LAST_COL_KW } ; [charset] => { $ crate :: CssSyntaxKind :: CHARSET_KW } ; [color_profile] => { $ crate :: CssSyntaxKind :: COLOR_PROFILE_KW } ; [counter_style] => { $ crate :: CssSyntaxKind :: COUNTER_STYLE_KW } ; [property] => { $ crate :: CssSyntaxKind :: PROPERTY_KW } ; [container] => { $ crate :: CssSyntaxKind :: CONTAINER_KW } ; [style] => { $ crate :: CssSyntaxKind :: STYLE_KW } ; [ltr] => { $ crate :: CssSyntaxKind :: LTR_KW } ; [rtl] => { $ crate :: CssSyntaxKind :: RTL_KW } ; [n] => { $ crate :: CssSyntaxKind :: N_KW } ; [even] => { $ crate :: CssSyntaxKind :: EVEN_KW } ; [odd] => { $ crate :: CssSyntaxKind :: ODD_KW } ; [of] => { $ crate :: CssSyntaxKind :: OF_KW } ; [from] => { $ crate :: CssSyntaxKind :: FROM_KW } ; [to] => { $ crate :: CssSyntaxKind :: TO_KW } ; [var] => { $ crate :: CssSyntaxKind :: VAR_KW } ; [url] => { $ crate :: CssSyntaxKind :: URL_KW } ; [if] => { $ crate :: CssSyntaxKind :: IF_KW } ; [else] => { $ crate :: CssSyntaxKind :: ELSE_KW } ; [attr] => { $ crate :: CssSyntaxKind :: ATTR_KW } ; [type] => { $ crate :: CssSyntaxKind :: TYPE_KW } ; [raw_string] => { $ crate :: CssSyntaxKind :: RAW_STRING_KW } ; [number] => { $ crate :: CssSyntaxKind :: NUMBER_KW } ; [src] => { $ crate :: CssSyntaxKind :: SRC_KW } ; [font_palette_values] => { $ crate :: CssSyntaxKind :: FONT_PALETTE_VALUES_KW } ; [font_feature_values] => { $ crate :: CssSyntaxKind :: FONT_FEATURE_VALUES_KW } ; [stylistic] => { $ crate :: CssSyntaxKind :: STYLISTIC_KW } ; [historical_forms] => { $ crate :: CssSyntaxKind :: HISTORICAL_FORMS_KW } ; [styleset] => { $ crate :: CssSyntaxKind :: STYLESET_KW } ; [character_variant] => { $ crate :: CssSyntaxKind :: CHARACTER_VARIANT_KW } ; [state] => { $ crate :: CssSyntaxKind :: STATE_KW } ; [swash] => { $ crate :: CssSyntaxKind :: SWASH_KW } ; [ornaments] => { $ crate :: CssSyntaxKind :: ORNAMENTS_KW } ; [annotation] => { $ crate :: CssSyntaxKind :: ANNOTATION_KW } ; [auto] => { $ crate :: CssSyntaxKind :: AUTO_KW } ; [thin] => { $ crate :: CssSyntaxKind :: THIN_KW } ; [medium] => { $ crate :: CssSyntaxKind :: MEDIUM_KW } ; [thick] => { $ crate :: CssSyntaxKind :: THICK_KW } ; [none] => { $ crate :: CssSyntaxKind :: NONE_KW } ; [hidden] => { $ crate :: CssSyntaxKind :: HIDDEN_KW } ; [dotted] => { $ crate :: CssSyntaxKind :: DOTTED_KW } ; [dashed] => { $ crate :: CssSyntaxKind :: DASHED_KW } ; [solid] => { $ crate :: CssSyntaxKind :: SOLID_KW } ; [double] => { $ crate :: CssSyntaxKind :: DOUBLE_KW } ; [groove] => { $ crate :: CssSyntaxKind :: GROOVE_KW } ; [ridge] => { $ crate :: CssSyntaxKind :: RIDGE_KW } ; [inset] => { $ crate :: CssSyntaxKind :: INSET_KW } ; [outset] => { $ crate :: CssSyntaxKind :: OUTSET_KW } ; [theme] => { $ crate :: CssSyntaxKind :: THEME_KW } ; [utility] => { $ crate :: CssSyntaxKind :: UTILITY_KW } ; [variant] => { $ crate :: CssSyntaxKind :: VARIANT_KW } ; [custom_variant] => { $ crate :: CssSyntaxKind :: CUSTOM_VARIANT_KW } ; [apply] => { $ crate :: CssSyntaxKind :: APPLY_KW } ; [source] => { $ crate :: CssSyntaxKind :: SOURCE_KW } ; [reference] => { $ crate :: CssSyntaxKind :: REFERENCE_KW } ; [config] => { $ crate :: CssSyntaxKind :: CONFIG_KW } ; [plugin] => { $ crate :: CssSyntaxKind :: PLUGIN_KW } ; [slot] => { $ crate :: CssSyntaxKind :: SLOT_KW } ; [inline] => { $ crate :: CssSyntaxKind :: INLINE_KW } ; [initial] => { $ crate :: CssSyntaxKind :: INITIAL_KW } ; [inherit] => { $ crate :: CssSyntaxKind :: INHERIT_KW } ; [unset] => { $ crate :: CssSyntaxKind :: UNSET_KW } ; [revert] => { $ crate :: CssSyntaxKind :: REVERT_KW } ; [revert_layer] => { $ crate :: CssSyntaxKind :: REVERT_LAYER_KW } ; [default] => { $ crate :: CssSyntaxKind :: DEFAULT_KW } ; [em] => { $ crate :: CssSyntaxKind :: EM_KW } ; [rem] => { $ crate :: CssSyntaxKind :: REM_KW } ; [ex] => { $ crate :: CssSyntaxKind :: EX_KW } ; [rex] => { $ crate :: CssSyntaxKind :: REX_KW } ; [cap] => { $ crate :: CssSyntaxKind :: CAP_KW } ; [rcap] => { $ crate :: CssSyntaxKind :: RCAP_KW } ; [ch] => { $ crate :: CssSyntaxKind :: CH_KW } ; [rch] => { $ crate :: CssSyntaxKind :: RCH_KW } ; [ic] => { $ crate :: CssSyntaxKind :: IC_KW } ; [ric] => { $ crate :: CssSyntaxKind :: RIC_KW } ; [lh] => { $ crate :: CssSyntaxKind :: LH_KW } ; [rlh] => { $ crate :: CssSyntaxKind :: RLH_KW } ; [vw] => { $ crate :: CssSyntaxKind :: VW_KW } ; [svw] => { $ crate :: CssSyntaxKind :: SVW_KW } ; [lvw] => { $ crate :: CssSyntaxKind :: LVW_KW } ; [dvw] => { $ crate :: CssSyntaxKind :: DVW_KW } ; [vh] => { $ crate :: CssSyntaxKind :: VH_KW } ; [svh] => { $ crate :: CssSyntaxKind :: SVH_KW } ; [lvh] => { $ crate :: CssSyntaxKind :: LVH_KW } ; [dvh] => { $ crate :: CssSyntaxKind :: DVH_KW } ; [vi] => { $ crate :: CssSyntaxKind :: VI_KW } ; [svi] => { $ crate :: CssSyntaxKind :: SVI_KW } ; [lvi] => { $ crate :: CssSyntaxKind :: LVI_KW } ; [dvi] => { $ crate :: CssSyntaxKind :: DVI_KW } ; [vb] => { $ crate :: CssSyntaxKind :: VB_KW } ; [svb] => { $ crate :: CssSyntaxKind :: SVB_KW } ; [lvb] => { $ crate :: CssSyntaxKind :: LVB_KW } ; [dvb] => { $ crate :: CssSyntaxKind :: DVB_KW } ; [vmin] => { $ crate :: CssSyntaxKind :: VMIN_KW } ; [svmin] => { $ crate :: CssSyntaxKind :: SVMIN_KW } ; [lvmin] => { $ crate :: CssSyntaxKind :: LVMIN_KW } ; [dvmin] => { $ crate :: CssSyntaxKind :: DVMIN_KW } ; [vmax] => { $ crate :: CssSyntaxKind :: VMAX_KW } ; [svmax] => { $ crate :: CssSyntaxKind :: SVMAX_KW } ; [lvmax] => { $ crate :: CssSyntaxKind :: LVMAX_KW } ; [dvmax] => { $ crate :: CssSyntaxKind :: DVMAX_KW } ; [cm] => { $ crate :: CssSyntaxKind :: CM_KW } ; [mm] => { $ crate :: CssSyntaxKind :: MM_KW } ; [q] => { $ crate :: CssSyntaxKind :: Q_KW } ; [in] => { $ crate :: CssSyntaxKind :: IN_KW } ; [pc] => { $ crate :: CssSyntaxKind :: PC_KW } ; [pt] => { $ crate :: CssSyntaxKind :: PT_KW } ; [px] => { $ crate :: CssSyntaxKind :: PX_KW } ; [mozmm] => { $ crate :: CssSyntaxKind :: MOZMM_KW } ; [rpx] => { $ crate :: CssSyntaxKind :: RPX_KW } ; [cqw] => { $ crate :: CssSyntaxKind :: CQW_KW } ; [cqh] => { $ crate :: CssSyntaxKind :: CQH_KW } ; [cqi] => { $ crate :: CssSyntaxKind :: CQI_KW } ; [cqb] => { $ crate :: CssSyntaxKind :: CQB_KW } ; [cqmin] => { $ crate :: CssSyntaxKind :: CQMIN_KW } ; [cqmax] => { $ crate :: CssSyntaxKind :: CQMAX_KW } ; [deg] => { $ crate :: CssSyntaxKind :: DEG_KW } ; [grad] => { $ crate :: CssSyntaxKind :: GRAD_KW } ; [rad] => { $ crate :: CssSyntaxKind :: RAD_KW } ; [turn] => { $ crate :: CssSyntaxKind :: TURN_KW } ; [s] => { $ crate :: CssSyntaxKind :: S_KW } ; [ms] => { $ crate :: CssSyntaxKind :: MS_KW } ; [hz] => { $ crate :: CssSyntaxKind :: HZ_KW } ; [khz] => { $ crate :: CssSyntaxKind :: KHZ_KW } ; [dpi] => { $ crate :: CssSyntaxKind :: DPI_KW } ; [dpcm] => { $ crate :: CssSyntaxKind :: DPCM_KW } ; [dppx] => { $ crate :: CssSyntaxKind :: DPPX_KW } ; [x] => { $ crate :: CssSyntaxKind :: X_KW } ; [fr] => { $ crate :: CssSyntaxKind :: FR_KW } ; [page] => { $ crate :: CssSyntaxKind :: PAGE_KW } ; [left] => { $ crate :: CssSyntaxKind :: LEFT_KW } ; [right] => { $ crate :: CssSyntaxKind :: RIGHT_KW } ; [first] => { $ crate :: CssSyntaxKind :: FIRST_KW } ; [blank] => { $ crate :: CssSyntaxKind :: BLANK_KW } ; [top_left_corner] => { $ crate :: CssSyntaxKind :: TOP_LEFT_CORNER_KW } ; [top_left] => { $ crate :: CssSyntaxKind :: TOP_LEFT_KW } ; [top_center] => { $ crate :: CssSyntaxKind :: TOP_CENTER_KW } ; [top_right] => { $ crate :: CssSyntaxKind :: TOP_RIGHT_KW } ; [top_right_corner] => { $ crate :: CssSyntaxKind :: TOP_RIGHT_CORNER_KW } ; [bottom_left_corner] => { $ crate :: CssSyntaxKind :: BOTTOM_LEFT_CORNER_KW } ; [bottom_left] => { $ crate :: CssSyntaxKind :: BOTTOM_LEFT_KW } ; [bottom_center] => { $ crate :: CssSyntaxKind :: BOTTOM_CENTER_KW } ; [bottom_right] => { $ crate :: CssSyntaxKind :: BOTTOM_RIGHT_KW } ; [bottom_right_corner] => { $ crate :: CssSyntaxKind :: BOTTOM_RIGHT_CORNER_KW } ; [left_top] => { $ crate :: CssSyntaxKind :: LEFT_TOP_KW } ; [left_middle] => { $ crate :: CssSyntaxKind :: LEFT_MIDDLE_KW } ; [left_bottom] => { $ crate :: CssSyntaxKind :: LEFT_BOTTOM_KW } ; [right_top] => { $ crate :: CssSyntaxKind :: RIGHT_TOP_KW } ; [right_middle] => { $ crate :: CssSyntaxKind :: RIGHT_MIDDLE_KW } ; [right_bottom] => { $ crate :: CssSyntaxKind :: RIGHT_BOTTOM_KW } ; [layer] => { $ crate :: CssSyntaxKind :: LAYER_KW } ; [scope] => { $ crate :: CssSyntaxKind :: SCOPE_KW } ; [supports] => { $ crate :: CssSyntaxKind :: SUPPORTS_KW } ; [selector] => { $ crate :: CssSyntaxKind :: SELECTOR_KW } ; [import] => { $ crate :: CssSyntaxKind :: IMPORT_KW } ; [namespace] => { $ crate :: CssSyntaxKind :: NAMESPACE_KW } ; [starting_style] => { $ crate :: CssSyntaxKind :: STARTING_STYLE_KW } ; [document] => { $ crate :: CssSyntaxKind :: DOCUMENT_KW } ; [url_prefix] => { $ crate :: CssSyntaxKind :: URL_PREFIX_KW } ; [domain] => { $ crate :: CssSyntaxKind :: DOMAIN_KW } ; [media_document] => { $ crate :: CssSyntaxKind :: MEDIA_DOCUMENT_KW } ; [regexp] => { $ crate :: CssSyntaxKind :: REGEXP_KW } ; [value] => { $ crate :: CssSyntaxKind :: VALUE_KW } ; [as] => { $ crate :: CssSyntaxKind :: AS_KW } ; [composes] => { $ crate :: CssSyntaxKind :: COMPOSES_KW } ; [position_try] => { $ crate :: CssSyntaxKind :: POSITION_TRY_KW } ; [view_transition] => { $ crate :: CssSyntaxKind :: VIEW_TRANSITION_KW } ; [font_face] => { $ crate :: CssSyntaxKind :: FONT_FACE_KW } ; [ident] => { $ crate :: CssSyntaxKind :: IDENT } ; [EOF] => { $ crate :: CssSyntaxKind :: EOF } ; [UNICODE_BOM] => { $ crate :: CssSyntaxKind :: UNICODE_BOM } ; [#] => { $ crate :: CssSyntaxKind :: HASH } ; }
diff --git a/crates/biome_css_syntax/src/generated/macros.rs b/crates/biome_css_syntax/src/generated/macros.rs
index f7e5cebed2f7..b98927ee0238 100644
--- a/crates/biome_css_syntax/src/generated/macros.rs
+++ b/crates/biome_css_syntax/src/generated/macros.rs
@@ -883,6 +883,22 @@ macro_rules! map_syntax_node {
                         unsafe { $crate::CssViewTransitionAtRuleDeclarator::new_unchecked(node) };
                     $body
                 }
+                $crate::CssSyntaxKind::SCSS_DECLARATION => {
+                    let $pattern = unsafe { $crate::ScssDeclaration::new_unchecked(node) };
+                    $body
+                }
+                $crate::CssSyntaxKind::SCSS_IDENTIFIER => {
+                    let $pattern = unsafe { $crate::ScssIdentifier::new_unchecked(node) };
+                    $body
+                }
+                $crate::CssSyntaxKind::SCSS_NAMESPACED_IDENTIFIER => {
+                    let $pattern = unsafe { $crate::ScssNamespacedIdentifier::new_unchecked(node) };
+                    $body
+                }
+                $crate::CssSyntaxKind::SCSS_VARIABLE_MODIFIER => {
+                    let $pattern = unsafe { $crate::ScssVariableModifier::new_unchecked(node) };
+                    $body
+                }
                 $crate::CssSyntaxKind::TW_APPLY_AT_RULE => {
                     let $pattern = unsafe { $crate::TwApplyAtRule::new_unchecked(node) };
                     $body
@@ -1226,6 +1242,10 @@ macro_rules! map_syntax_node {
                         unsafe { $crate::CssValueAtRulePropertyList::new_unchecked(node) };
                     $body
                 }
+                $crate::CssSyntaxKind::SCSS_VARIABLE_MODIFIER_LIST => {
+                    let $pattern = unsafe { $crate::ScssVariableModifierList::new_unchecked(node) };
+                    $body
+                }
                 $crate::CssSyntaxKind::TW_APPLY_CLASS_LIST => {
                     let $pattern = unsafe { $crate::TwApplyClassList::new_unchecked(node) };
                     $body
diff --git a/crates/biome_css_syntax/src/generated/nodes.rs b/crates/biome_css_syntax/src/generated/nodes.rs
index e7af3ae68db8..e9f20071d609 100644
--- a/crates/biome_css_syntax/src/generated/nodes.rs
+++ b/crates/biome_css_syntax/src/generated/nodes.rs
@@ -8443,6 +8443,186 @@ pub struct CssViewTransitionAtRuleDeclaratorFields {
     pub view_transition_token: SyntaxResult<SyntaxToken>,
 }
 #[derive(Clone, PartialEq, Eq, Hash)]
+pub struct ScssDeclaration {
+    pub(crate) syntax: SyntaxNode,
+}
+impl ScssDeclaration {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub const unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self { syntax }
+    }
+    pub fn as_fields(&self) -> ScssDeclarationFields {
+        ScssDeclarationFields {
+            name: self.name(),
+            colon_token: self.colon_token(),
+            value: self.value(),
+            modifiers: self.modifiers(),
+            semicolon_token: self.semicolon_token(),
+        }
+    }
+    pub fn name(&self) -> SyntaxResult<AnyScssDeclarationName> {
+        support::required_node(&self.syntax, 0usize)
+    }
+    pub fn colon_token(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 1usize)
+    }
+    pub fn value(&self) -> CssGenericComponentValueList {
+        support::list(&self.syntax, 2usize)
+    }
+    pub fn modifiers(&self) -> ScssVariableModifierList {
+        support::list(&self.syntax, 3usize)
+    }
+    pub fn semicolon_token(&self) -> Option<SyntaxToken> {
+        support::token(&self.syntax, 4usize)
+    }
+}
+impl Serialize for ScssDeclaration {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        self.as_fields().serialize(serializer)
+    }
+}
+#[derive(Serialize)]
+pub struct ScssDeclarationFields {
+    pub name: SyntaxResult<AnyScssDeclarationName>,
+    pub colon_token: SyntaxResult<SyntaxToken>,
+    pub value: CssGenericComponentValueList,
+    pub modifiers: ScssVariableModifierList,
+    pub semicolon_token: Option<SyntaxToken>,
+}
+#[derive(Clone, PartialEq, Eq, Hash)]
+pub struct ScssIdentifier {
+    pub(crate) syntax: SyntaxNode,
+}
+impl ScssIdentifier {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub const unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self { syntax }
+    }
+    pub fn as_fields(&self) -> ScssIdentifierFields {
+        ScssIdentifierFields {
+            dollar_token: self.dollar_token(),
+            name: self.name(),
+        }
+    }
+    pub fn dollar_token(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 0usize)
+    }
+    pub fn name(&self) -> SyntaxResult<CssIdentifier> {
+        support::required_node(&self.syntax, 1usize)
+    }
+}
+impl Serialize for ScssIdentifier {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        self.as_fields().serialize(serializer)
+    }
+}
+#[derive(Serialize)]
+pub struct ScssIdentifierFields {
+    pub dollar_token: SyntaxResult<SyntaxToken>,
+    pub name: SyntaxResult<CssIdentifier>,
+}
+#[derive(Clone, PartialEq, Eq, Hash)]
+pub struct ScssNamespacedIdentifier {
+    pub(crate) syntax: SyntaxNode,
+}
+impl ScssNamespacedIdentifier {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub const unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self { syntax }
+    }
+    pub fn as_fields(&self) -> ScssNamespacedIdentifierFields {
+        ScssNamespacedIdentifierFields {
+            namespace: self.namespace(),
+            dot_token: self.dot_token(),
+            name: self.name(),
+        }
+    }
+    pub fn namespace(&self) -> SyntaxResult<CssIdentifier> {
+        support::required_node(&self.syntax, 0usize)
+    }
+    pub fn dot_token(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 1usize)
+    }
+    pub fn name(&self) -> SyntaxResult<ScssIdentifier> {
+        support::required_node(&self.syntax, 2usize)
+    }
+}
+impl Serialize for ScssNamespacedIdentifier {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        self.as_fields().serialize(serializer)
+    }
+}
+#[derive(Serialize)]
+pub struct ScssNamespacedIdentifierFields {
+    pub namespace: SyntaxResult<CssIdentifier>,
+    pub dot_token: SyntaxResult<SyntaxToken>,
+    pub name: SyntaxResult<ScssIdentifier>,
+}
+#[derive(Clone, PartialEq, Eq, Hash)]
+pub struct ScssVariableModifier {
+    pub(crate) syntax: SyntaxNode,
+}
+impl ScssVariableModifier {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub const unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self { syntax }
+    }
+    pub fn as_fields(&self) -> ScssVariableModifierFields {
+        ScssVariableModifierFields {
+            excl_token: self.excl_token(),
+            value: self.value(),
+        }
+    }
+    pub fn excl_token(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 0usize)
+    }
+    pub fn value(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 1usize)
+    }
+}
+impl Serialize for ScssVariableModifier {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        self.as_fields().serialize(serializer)
+    }
+}
+#[derive(Serialize)]
+pub struct ScssVariableModifierFields {
+    pub excl_token: SyntaxResult<SyntaxToken>,
+    pub value: SyntaxResult<SyntaxToken>,
+}
+#[derive(Clone, PartialEq, Eq, Hash)]
 pub struct TwApplyAtRule {
     pub(crate) syntax: SyntaxNode,
 }
@@ -9806,6 +9986,7 @@ impl AnyCssCustomIdentifier {
 pub enum AnyCssDeclaration {
     CssDeclarationWithSemicolon(CssDeclarationWithSemicolon),
     CssEmptyDeclaration(CssEmptyDeclaration),
+    ScssDeclaration(ScssDeclaration),
 }
 impl AnyCssDeclaration {
     pub fn as_css_declaration_with_semicolon(&self) -> Option<&CssDeclarationWithSemicolon> {
@@ -9820,6 +10001,12 @@ impl AnyCssDeclaration {
             _ => None,
         }
     }
+    pub fn as_scss_declaration(&self) -> Option<&ScssDeclaration> {
+        match &self {
+            Self::ScssDeclaration(item) => Some(item),
+            _ => None,
+        }
+    }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyCssDeclarationBlock {
@@ -9871,6 +10058,7 @@ pub enum AnyCssDeclarationOrAtRule {
     CssAtRule(CssAtRule),
     CssDeclarationWithSemicolon(CssDeclarationWithSemicolon),
     CssEmptyDeclaration(CssEmptyDeclaration),
+    ScssDeclaration(ScssDeclaration),
 }
 impl AnyCssDeclarationOrAtRule {
     pub fn as_css_at_rule(&self) -> Option<&CssAtRule> {
@@ -9891,6 +10079,12 @@ impl AnyCssDeclarationOrAtRule {
             _ => None,
         }
     }
+    pub fn as_scss_declaration(&self) -> Option<&ScssDeclaration> {
+        match &self {
+            Self::ScssDeclaration(item) => Some(item),
+            _ => None,
+        }
+    }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyCssDeclarationOrAtRuleBlock {
@@ -9918,6 +10112,7 @@ pub enum AnyCssDeclarationOrRule {
     CssDeclarationWithSemicolon(CssDeclarationWithSemicolon),
     CssEmptyDeclaration(CssEmptyDeclaration),
     CssMetavariable(CssMetavariable),
+    ScssDeclaration(ScssDeclaration),
 }
 impl AnyCssDeclarationOrRule {
     pub fn as_any_css_rule(&self) -> Option<&AnyCssRule> {
@@ -9950,6 +10145,12 @@ impl AnyCssDeclarationOrRule {
             _ => None,
         }
     }
+    pub fn as_scss_declaration(&self) -> Option<&ScssDeclaration> {
+        match &self {
+            Self::ScssDeclaration(item) => Some(item),
+            _ => None,
+        }
+    }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyCssDeclarationOrRuleBlock {
@@ -11232,6 +11433,7 @@ pub enum AnyCssRule {
     CssBogusRule(CssBogusRule),
     CssNestedQualifiedRule(CssNestedQualifiedRule),
     CssQualifiedRule(CssQualifiedRule),
+    ScssDeclaration(ScssDeclaration),
 }
 impl AnyCssRule {
     pub fn as_css_at_rule(&self) -> Option<&CssAtRule> {
@@ -11258,6 +11460,12 @@ impl AnyCssRule {
             _ => None,
         }
     }
+    pub fn as_scss_declaration(&self) -> Option<&ScssDeclaration> {
+        match &self {
+            Self::ScssDeclaration(item) => Some(item),
+            _ => None,
+        }
+    }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyCssRuleBlock {
@@ -11719,6 +11927,7 @@ pub enum AnyCssValue {
     CssRatio(CssRatio),
     CssString(CssString),
     CssUnicodeRange(CssUnicodeRange),
+    ScssIdentifier(ScssIdentifier),
     TwValueThemeReference(TwValueThemeReference),
 }
 impl AnyCssValue {
@@ -11794,6 +12003,12 @@ impl AnyCssValue {
             _ => None,
         }
     }
+    pub fn as_scss_identifier(&self) -> Option<&ScssIdentifier> {
+        match &self {
+            Self::ScssIdentifier(item) => Some(item),
+            _ => None,
+        }
+    }
     pub fn as_tw_value_theme_reference(&self) -> Option<&TwValueThemeReference> {
         match &self {
             Self::TwValueThemeReference(item) => Some(item),
@@ -11882,6 +12097,25 @@ impl AnyCssValueAtRuleProperty {
     }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
+pub enum AnyScssDeclarationName {
+    ScssIdentifier(ScssIdentifier),
+    ScssNamespacedIdentifier(ScssNamespacedIdentifier),
+}
+impl AnyScssDeclarationName {
+    pub fn as_scss_identifier(&self) -> Option<&ScssIdentifier> {
+        match &self {
+            Self::ScssIdentifier(item) => Some(item),
+            _ => None,
+        }
+    }
+    pub fn as_scss_namespaced_identifier(&self) -> Option<&ScssNamespacedIdentifier> {
+        match &self {
+            Self::ScssNamespacedIdentifier(item) => Some(item),
+            _ => None,
+        }
+    }
+}
+#[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyTwCustomVariantSelector {
     AnyCssRuleBlock(AnyCssRuleBlock),
     TwCustomVariantShorthand(TwCustomVariantShorthand),
@@ -22224,6 +22458,211 @@ impl From<CssViewTransitionAtRuleDeclarator> for SyntaxElement {
         n.syntax.into()
     }
 }
+impl AstNode for ScssDeclaration {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(SCSS_DECLARATION as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == SCSS_DECLARATION
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self { syntax })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        &self.syntax
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax
+    }
+}
+impl std::fmt::Debug for ScssDeclaration {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        thread_local! { static DEPTH : std :: cell :: Cell < u8 > = const { std :: cell :: Cell :: new (0) } };
+        let current_depth = DEPTH.get();
+        let result = if current_depth < 16 {
+            DEPTH.set(current_depth + 1);
+            f.debug_struct("ScssDeclaration")
+                .field("name", &support::DebugSyntaxResult(self.name()))
+                .field(
+                    "colon_token",
+                    &support::DebugSyntaxResult(self.colon_token()),
+                )
+                .field("value", &self.value())
+                .field("modifiers", &self.modifiers())
+                .field(
+                    "semicolon_token",
+                    &support::DebugOptionalElement(self.semicolon_token()),
+                )
+                .finish()
+        } else {
+            f.debug_struct("ScssDeclaration").finish()
+        };
+        DEPTH.set(current_depth);
+        result
+    }
+}
+impl From<ScssDeclaration> for SyntaxNode {
+    fn from(n: ScssDeclaration) -> Self {
+        n.syntax
+    }
+}
+impl From<ScssDeclaration> for SyntaxElement {
+    fn from(n: ScssDeclaration) -> Self {
+        n.syntax.into()
+    }
+}
+impl AstNode for ScssIdentifier {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(SCSS_IDENTIFIER as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == SCSS_IDENTIFIER
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self { syntax })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        &self.syntax
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax
+    }
+}
+impl std::fmt::Debug for ScssIdentifier {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        thread_local! { static DEPTH : std :: cell :: Cell < u8 > = const { std :: cell :: Cell :: new (0) } };
+        let current_depth = DEPTH.get();
+        let result = if current_depth < 16 {
+            DEPTH.set(current_depth + 1);
+            f.debug_struct("ScssIdentifier")
+                .field(
+                    "dollar_token",
+                    &support::DebugSyntaxResult(self.dollar_token()),
+                )
+                .field("name", &support::DebugSyntaxResult(self.name()))
+                .finish()
+        } else {
+            f.debug_struct("ScssIdentifier").finish()
+        };
+        DEPTH.set(current_depth);
+        result
+    }
+}
+impl From<ScssIdentifier> for SyntaxNode {
+    fn from(n: ScssIdentifier) -> Self {
+        n.syntax
+    }
+}
+impl From<ScssIdentifier> for SyntaxElement {
+    fn from(n: ScssIdentifier) -> Self {
+        n.syntax.into()
+    }
+}
+impl AstNode for ScssNamespacedIdentifier {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(SCSS_NAMESPACED_IDENTIFIER as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == SCSS_NAMESPACED_IDENTIFIER
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self { syntax })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        &self.syntax
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax
+    }
+}
+impl std::fmt::Debug for ScssNamespacedIdentifier {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        thread_local! { static DEPTH : std :: cell :: Cell < u8 > = const { std :: cell :: Cell :: new (0) } };
+        let current_depth = DEPTH.get();
+        let result = if current_depth < 16 {
+            DEPTH.set(current_depth + 1);
+            f.debug_struct("ScssNamespacedIdentifier")
+                .field("namespace", &support::DebugSyntaxResult(self.namespace()))
+                .field("dot_token", &support::DebugSyntaxResult(self.dot_token()))
+                .field("name", &support::DebugSyntaxResult(self.name()))
+                .finish()
+        } else {
+            f.debug_struct("ScssNamespacedIdentifier").finish()
+        };
+        DEPTH.set(current_depth);
+        result
+    }
+}
+impl From<ScssNamespacedIdentifier> for SyntaxNode {
+    fn from(n: ScssNamespacedIdentifier) -> Self {
+        n.syntax
+    }
+}
+impl From<ScssNamespacedIdentifier> for SyntaxElement {
+    fn from(n: ScssNamespacedIdentifier) -> Self {
+        n.syntax.into()
+    }
+}
+impl AstNode for ScssVariableModifier {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(SCSS_VARIABLE_MODIFIER as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == SCSS_VARIABLE_MODIFIER
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self { syntax })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        &self.syntax
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax
+    }
+}
+impl std::fmt::Debug for ScssVariableModifier {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        thread_local! { static DEPTH : std :: cell :: Cell < u8 > = const { std :: cell :: Cell :: new (0) } };
+        let current_depth = DEPTH.get();
+        let result = if current_depth < 16 {
+            DEPTH.set(current_depth + 1);
+            f.debug_struct("ScssVariableModifier")
+                .field("excl_token", &support::DebugSyntaxResult(self.excl_token()))
+                .field("value", &support::DebugSyntaxResult(self.value()))
+                .finish()
+        } else {
+            f.debug_struct("ScssVariableModifier").finish()
+        };
+        DEPTH.set(current_depth);
+        result
+    }
+}
+impl From<ScssVariableModifier> for SyntaxNode {
+    fn from(n: ScssVariableModifier) -> Self {
+        n.syntax
+    }
+}
+impl From<ScssVariableModifier> for SyntaxElement {
+    fn from(n: ScssVariableModifier) -> Self {
+        n.syntax.into()
+    }
+}
 impl AstNode for TwApplyAtRule {
     type Language = Language;
     const KIND_SET: SyntaxKindSet<Language> =
@@ -24815,12 +25254,21 @@ impl From<CssEmptyDeclaration> for AnyCssDeclaration {
         Self::CssEmptyDeclaration(node)
     }
 }
+impl From<ScssDeclaration> for AnyCssDeclaration {
+    fn from(node: ScssDeclaration) -> Self {
+        Self::ScssDeclaration(node)
+    }
+}
 impl AstNode for AnyCssDeclaration {
     type Language = Language;
-    const KIND_SET: SyntaxKindSet<Language> =
-        CssDeclarationWithSemicolon::KIND_SET.union(CssEmptyDeclaration::KIND_SET);
+    const KIND_SET: SyntaxKindSet<Language> = CssDeclarationWithSemicolon::KIND_SET
+        .union(CssEmptyDeclaration::KIND_SET)
+        .union(ScssDeclaration::KIND_SET);
     fn can_cast(kind: SyntaxKind) -> bool {
-        matches!(kind, CSS_DECLARATION_WITH_SEMICOLON | CSS_EMPTY_DECLARATION)
+        matches!(
+            kind,
+            CSS_DECLARATION_WITH_SEMICOLON | CSS_EMPTY_DECLARATION | SCSS_DECLARATION
+        )
     }
     fn cast(syntax: SyntaxNode) -> Option<Self> {
         let res = match syntax.kind() {
@@ -24828,6 +25276,7 @@ impl AstNode for AnyCssDeclaration {
                 Self::CssDeclarationWithSemicolon(CssDeclarationWithSemicolon { syntax })
             }
             CSS_EMPTY_DECLARATION => Self::CssEmptyDeclaration(CssEmptyDeclaration { syntax }),
+            SCSS_DECLARATION => Self::ScssDeclaration(ScssDeclaration { syntax }),
             _ => return None,
         };
         Some(res)
@@ -24836,12 +25285,14 @@ impl AstNode for AnyCssDeclaration {
         match self {
             Self::CssDeclarationWithSemicolon(it) => it.syntax(),
             Self::CssEmptyDeclaration(it) => it.syntax(),
+            Self::ScssDeclaration(it) => it.syntax(),
         }
     }
     fn into_syntax(self) -> SyntaxNode {
         match self {
             Self::CssDeclarationWithSemicolon(it) => it.into_syntax(),
             Self::CssEmptyDeclaration(it) => it.into_syntax(),
+            Self::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -24850,6 +25301,7 @@ impl std::fmt::Debug for AnyCssDeclaration {
         match self {
             Self::CssDeclarationWithSemicolon(it) => std::fmt::Debug::fmt(it, f),
             Self::CssEmptyDeclaration(it) => std::fmt::Debug::fmt(it, f),
+            Self::ScssDeclaration(it) => std::fmt::Debug::fmt(it, f),
         }
     }
 }
@@ -24858,6 +25310,7 @@ impl From<AnyCssDeclaration> for SyntaxNode {
         match n {
             AnyCssDeclaration::CssDeclarationWithSemicolon(it) => it.into_syntax(),
             AnyCssDeclaration::CssEmptyDeclaration(it) => it.into_syntax(),
+            AnyCssDeclaration::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -25018,15 +25471,21 @@ impl From<CssEmptyDeclaration> for AnyCssDeclarationOrAtRule {
         Self::CssEmptyDeclaration(node)
     }
 }
+impl From<ScssDeclaration> for AnyCssDeclarationOrAtRule {
+    fn from(node: ScssDeclaration) -> Self {
+        Self::ScssDeclaration(node)
+    }
+}
 impl AstNode for AnyCssDeclarationOrAtRule {
     type Language = Language;
     const KIND_SET: SyntaxKindSet<Language> = CssAtRule::KIND_SET
         .union(CssDeclarationWithSemicolon::KIND_SET)
-        .union(CssEmptyDeclaration::KIND_SET);
+        .union(CssEmptyDeclaration::KIND_SET)
+        .union(ScssDeclaration::KIND_SET);
     fn can_cast(kind: SyntaxKind) -> bool {
         matches!(
             kind,
-            CSS_AT_RULE | CSS_DECLARATION_WITH_SEMICOLON | CSS_EMPTY_DECLARATION
+            CSS_AT_RULE | CSS_DECLARATION_WITH_SEMICOLON | CSS_EMPTY_DECLARATION | SCSS_DECLARATION
         )
     }
     fn cast(syntax: SyntaxNode) -> Option<Self> {
@@ -25036,6 +25495,7 @@ impl AstNode for AnyCssDeclarationOrAtRule {
                 Self::CssDeclarationWithSemicolon(CssDeclarationWithSemicolon { syntax })
             }
             CSS_EMPTY_DECLARATION => Self::CssEmptyDeclaration(CssEmptyDeclaration { syntax }),
+            SCSS_DECLARATION => Self::ScssDeclaration(ScssDeclaration { syntax }),
             _ => return None,
         };
         Some(res)
@@ -25045,6 +25505,7 @@ impl AstNode for AnyCssDeclarationOrAtRule {
             Self::CssAtRule(it) => it.syntax(),
             Self::CssDeclarationWithSemicolon(it) => it.syntax(),
             Self::CssEmptyDeclaration(it) => it.syntax(),
+            Self::ScssDeclaration(it) => it.syntax(),
         }
     }
     fn into_syntax(self) -> SyntaxNode {
@@ -25052,6 +25513,7 @@ impl AstNode for AnyCssDeclarationOrAtRule {
             Self::CssAtRule(it) => it.into_syntax(),
             Self::CssDeclarationWithSemicolon(it) => it.into_syntax(),
             Self::CssEmptyDeclaration(it) => it.into_syntax(),
+            Self::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -25061,6 +25523,7 @@ impl std::fmt::Debug for AnyCssDeclarationOrAtRule {
             Self::CssAtRule(it) => std::fmt::Debug::fmt(it, f),
             Self::CssDeclarationWithSemicolon(it) => std::fmt::Debug::fmt(it, f),
             Self::CssEmptyDeclaration(it) => std::fmt::Debug::fmt(it, f),
+            Self::ScssDeclaration(it) => std::fmt::Debug::fmt(it, f),
         }
     }
 }
@@ -25070,6 +25533,7 @@ impl From<AnyCssDeclarationOrAtRule> for SyntaxNode {
             AnyCssDeclarationOrAtRule::CssAtRule(it) => it.into_syntax(),
             AnyCssDeclarationOrAtRule::CssDeclarationWithSemicolon(it) => it.into_syntax(),
             AnyCssDeclarationOrAtRule::CssEmptyDeclaration(it) => it.into_syntax(),
+            AnyCssDeclarationOrAtRule::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -25161,19 +25625,26 @@ impl From<CssMetavariable> for AnyCssDeclarationOrRule {
         Self::CssMetavariable(node)
     }
 }
+impl From<ScssDeclaration> for AnyCssDeclarationOrRule {
+    fn from(node: ScssDeclaration) -> Self {
+        Self::ScssDeclaration(node)
+    }
+}
 impl AstNode for AnyCssDeclarationOrRule {
     type Language = Language;
     const KIND_SET: SyntaxKindSet<Language> = AnyCssRule::KIND_SET
         .union(CssBogus::KIND_SET)
         .union(CssDeclarationWithSemicolon::KIND_SET)
         .union(CssEmptyDeclaration::KIND_SET)
-        .union(CssMetavariable::KIND_SET);
+        .union(CssMetavariable::KIND_SET)
+        .union(ScssDeclaration::KIND_SET);
     fn can_cast(kind: SyntaxKind) -> bool {
         match kind {
             CSS_BOGUS
             | CSS_DECLARATION_WITH_SEMICOLON
             | CSS_EMPTY_DECLARATION
-            | CSS_METAVARIABLE => true,
+            | CSS_METAVARIABLE
+            | SCSS_DECLARATION => true,
             k if AnyCssRule::can_cast(k) => true,
             _ => false,
         }
@@ -25186,6 +25657,7 @@ impl AstNode for AnyCssDeclarationOrRule {
             }
             CSS_EMPTY_DECLARATION => Self::CssEmptyDeclaration(CssEmptyDeclaration { syntax }),
             CSS_METAVARIABLE => Self::CssMetavariable(CssMetavariable { syntax }),
+            SCSS_DECLARATION => Self::ScssDeclaration(ScssDeclaration { syntax }),
             _ => {
                 if let Some(any_css_rule) = AnyCssRule::cast(syntax) {
                     return Some(Self::AnyCssRule(any_css_rule));
@@ -25201,6 +25673,7 @@ impl AstNode for AnyCssDeclarationOrRule {
             Self::CssDeclarationWithSemicolon(it) => it.syntax(),
             Self::CssEmptyDeclaration(it) => it.syntax(),
             Self::CssMetavariable(it) => it.syntax(),
+            Self::ScssDeclaration(it) => it.syntax(),
             Self::AnyCssRule(it) => it.syntax(),
         }
     }
@@ -25210,6 +25683,7 @@ impl AstNode for AnyCssDeclarationOrRule {
             Self::CssDeclarationWithSemicolon(it) => it.into_syntax(),
             Self::CssEmptyDeclaration(it) => it.into_syntax(),
             Self::CssMetavariable(it) => it.into_syntax(),
+            Self::ScssDeclaration(it) => it.into_syntax(),
             Self::AnyCssRule(it) => it.into_syntax(),
         }
     }
@@ -25222,6 +25696,7 @@ impl std::fmt::Debug for AnyCssDeclarationOrRule {
             Self::CssDeclarationWithSemicolon(it) => std::fmt::Debug::fmt(it, f),
             Self::CssEmptyDeclaration(it) => std::fmt::Debug::fmt(it, f),
             Self::CssMetavariable(it) => std::fmt::Debug::fmt(it, f),
+            Self::ScssDeclaration(it) => std::fmt::Debug::fmt(it, f),
         }
     }
 }
@@ -25233,6 +25708,7 @@ impl From<AnyCssDeclarationOrRule> for SyntaxNode {
             AnyCssDeclarationOrRule::CssDeclarationWithSemicolon(it) => it.into_syntax(),
             AnyCssDeclarationOrRule::CssEmptyDeclaration(it) => it.into_syntax(),
             AnyCssDeclarationOrRule::CssMetavariable(it) => it.into_syntax(),
+            AnyCssDeclarationOrRule::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -29029,16 +29505,26 @@ impl From<CssQualifiedRule> for AnyCssRule {
         Self::CssQualifiedRule(node)
     }
 }
+impl From<ScssDeclaration> for AnyCssRule {
+    fn from(node: ScssDeclaration) -> Self {
+        Self::ScssDeclaration(node)
+    }
+}
 impl AstNode for AnyCssRule {
     type Language = Language;
     const KIND_SET: SyntaxKindSet<Language> = CssAtRule::KIND_SET
         .union(CssBogusRule::KIND_SET)
         .union(CssNestedQualifiedRule::KIND_SET)
-        .union(CssQualifiedRule::KIND_SET);
+        .union(CssQualifiedRule::KIND_SET)
+        .union(ScssDeclaration::KIND_SET);
     fn can_cast(kind: SyntaxKind) -> bool {
         matches!(
             kind,
-            CSS_AT_RULE | CSS_BOGUS_RULE | CSS_NESTED_QUALIFIED_RULE | CSS_QUALIFIED_RULE
+            CSS_AT_RULE
+                | CSS_BOGUS_RULE
+                | CSS_NESTED_QUALIFIED_RULE
+                | CSS_QUALIFIED_RULE
+                | SCSS_DECLARATION
         )
     }
     fn cast(syntax: SyntaxNode) -> Option<Self> {
@@ -29049,6 +29535,7 @@ impl AstNode for AnyCssRule {
                 Self::CssNestedQualifiedRule(CssNestedQualifiedRule { syntax })
             }
             CSS_QUALIFIED_RULE => Self::CssQualifiedRule(CssQualifiedRule { syntax }),
+            SCSS_DECLARATION => Self::ScssDeclaration(ScssDeclaration { syntax }),
             _ => return None,
         };
         Some(res)
@@ -29059,6 +29546,7 @@ impl AstNode for AnyCssRule {
             Self::CssBogusRule(it) => it.syntax(),
             Self::CssNestedQualifiedRule(it) => it.syntax(),
             Self::CssQualifiedRule(it) => it.syntax(),
+            Self::ScssDeclaration(it) => it.syntax(),
         }
     }
     fn into_syntax(self) -> SyntaxNode {
@@ -29067,6 +29555,7 @@ impl AstNode for AnyCssRule {
             Self::CssBogusRule(it) => it.into_syntax(),
             Self::CssNestedQualifiedRule(it) => it.into_syntax(),
             Self::CssQualifiedRule(it) => it.into_syntax(),
+            Self::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -29077,6 +29566,7 @@ impl std::fmt::Debug for AnyCssRule {
             Self::CssBogusRule(it) => std::fmt::Debug::fmt(it, f),
             Self::CssNestedQualifiedRule(it) => std::fmt::Debug::fmt(it, f),
             Self::CssQualifiedRule(it) => std::fmt::Debug::fmt(it, f),
+            Self::ScssDeclaration(it) => std::fmt::Debug::fmt(it, f),
         }
     }
 }
@@ -29087,6 +29577,7 @@ impl From<AnyCssRule> for SyntaxNode {
             AnyCssRule::CssBogusRule(it) => it.into_syntax(),
             AnyCssRule::CssNestedQualifiedRule(it) => it.into_syntax(),
             AnyCssRule::CssQualifiedRule(it) => it.into_syntax(),
+            AnyCssRule::ScssDeclaration(it) => it.into_syntax(),
         }
     }
 }
@@ -30420,6 +30911,11 @@ impl From<CssUnicodeRange> for AnyCssValue {
         Self::CssUnicodeRange(node)
     }
 }
+impl From<ScssIdentifier> for AnyCssValue {
+    fn from(node: ScssIdentifier) -> Self {
+        Self::ScssIdentifier(node)
+    }
+}
 impl From<TwValueThemeReference> for AnyCssValue {
     fn from(node: TwValueThemeReference) -> Self {
         Self::TwValueThemeReference(node)
@@ -30439,6 +30935,7 @@ impl AstNode for AnyCssValue {
         .union(CssRatio::KIND_SET)
         .union(CssString::KIND_SET)
         .union(CssUnicodeRange::KIND_SET)
+        .union(ScssIdentifier::KIND_SET)
         .union(TwValueThemeReference::KIND_SET);
     fn can_cast(kind: SyntaxKind) -> bool {
         match kind {
@@ -30452,6 +30949,7 @@ impl AstNode for AnyCssValue {
             | CSS_RATIO
             | CSS_STRING
             | CSS_UNICODE_RANGE
+            | SCSS_IDENTIFIER
             | TW_VALUE_THEME_REFERENCE => true,
             k if AnyCssDimension::can_cast(k) => true,
             k if AnyCssFunction::can_cast(k) => true,
@@ -30470,6 +30968,7 @@ impl AstNode for AnyCssValue {
             CSS_RATIO => Self::CssRatio(CssRatio { syntax }),
             CSS_STRING => Self::CssString(CssString { syntax }),
             CSS_UNICODE_RANGE => Self::CssUnicodeRange(CssUnicodeRange { syntax }),
+            SCSS_IDENTIFIER => Self::ScssIdentifier(ScssIdentifier { syntax }),
             TW_VALUE_THEME_REFERENCE => {
                 Self::TwValueThemeReference(TwValueThemeReference { syntax })
             }
@@ -30500,6 +30999,7 @@ impl AstNode for AnyCssValue {
             Self::CssRatio(it) => it.syntax(),
             Self::CssString(it) => it.syntax(),
             Self::CssUnicodeRange(it) => it.syntax(),
+            Self::ScssIdentifier(it) => it.syntax(),
             Self::TwValueThemeReference(it) => it.syntax(),
             Self::AnyCssDimension(it) => it.syntax(),
             Self::AnyCssFunction(it) => it.syntax(),
@@ -30517,6 +31017,7 @@ impl AstNode for AnyCssValue {
             Self::CssRatio(it) => it.into_syntax(),
             Self::CssString(it) => it.into_syntax(),
             Self::CssUnicodeRange(it) => it.into_syntax(),
+            Self::ScssIdentifier(it) => it.into_syntax(),
             Self::TwValueThemeReference(it) => it.into_syntax(),
             Self::AnyCssDimension(it) => it.into_syntax(),
             Self::AnyCssFunction(it) => it.into_syntax(),
@@ -30538,6 +31039,7 @@ impl std::fmt::Debug for AnyCssValue {
             Self::CssRatio(it) => std::fmt::Debug::fmt(it, f),
             Self::CssString(it) => std::fmt::Debug::fmt(it, f),
             Self::CssUnicodeRange(it) => std::fmt::Debug::fmt(it, f),
+            Self::ScssIdentifier(it) => std::fmt::Debug::fmt(it, f),
             Self::TwValueThemeReference(it) => std::fmt::Debug::fmt(it, f),
         }
     }
@@ -30557,6 +31059,7 @@ impl From<AnyCssValue> for SyntaxNode {
             AnyCssValue::CssRatio(it) => it.into_syntax(),
             AnyCssValue::CssString(it) => it.into_syntax(),
             AnyCssValue::CssUnicodeRange(it) => it.into_syntax(),
+            AnyCssValue::ScssIdentifier(it) => it.into_syntax(),
             AnyCssValue::TwValueThemeReference(it) => it.into_syntax(),
         }
     }
@@ -30829,6 +31332,68 @@ impl From<AnyCssValueAtRuleProperty> for SyntaxElement {
         node.into()
     }
 }
+impl From<ScssIdentifier> for AnyScssDeclarationName {
+    fn from(node: ScssIdentifier) -> Self {
+        Self::ScssIdentifier(node)
+    }
+}
+impl From<ScssNamespacedIdentifier> for AnyScssDeclarationName {
+    fn from(node: ScssNamespacedIdentifier) -> Self {
+        Self::ScssNamespacedIdentifier(node)
+    }
+}
+impl AstNode for AnyScssDeclarationName {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        ScssIdentifier::KIND_SET.union(ScssNamespacedIdentifier::KIND_SET);
+    fn can_cast(kind: SyntaxKind) -> bool {
+        matches!(kind, SCSS_IDENTIFIER | SCSS_NAMESPACED_IDENTIFIER)
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        let res = match syntax.kind() {
+            SCSS_IDENTIFIER => Self::ScssIdentifier(ScssIdentifier { syntax }),
+            SCSS_NAMESPACED_IDENTIFIER => {
+                Self::ScssNamespacedIdentifier(ScssNamespacedIdentifier { syntax })
+            }
+            _ => return None,
+        };
+        Some(res)
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        match self {
+            Self::ScssIdentifier(it) => it.syntax(),
+            Self::ScssNamespacedIdentifier(it) => it.syntax(),
+        }
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        match self {
+            Self::ScssIdentifier(it) => it.into_syntax(),
+            Self::ScssNamespacedIdentifier(it) => it.into_syntax(),
+        }
+    }
+}
+impl std::fmt::Debug for AnyScssDeclarationName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::ScssIdentifier(it) => std::fmt::Debug::fmt(it, f),
+            Self::ScssNamespacedIdentifier(it) => std::fmt::Debug::fmt(it, f),
+        }
+    }
+}
+impl From<AnyScssDeclarationName> for SyntaxNode {
+    fn from(n: AnyScssDeclarationName) -> Self {
+        match n {
+            AnyScssDeclarationName::ScssIdentifier(it) => it.into_syntax(),
+            AnyScssDeclarationName::ScssNamespacedIdentifier(it) => it.into_syntax(),
+        }
+    }
+}
+impl From<AnyScssDeclarationName> for SyntaxElement {
+    fn from(n: AnyScssDeclarationName) -> Self {
+        let node: SyntaxNode = n.into();
+        node.into()
+    }
+}
 impl From<TwCustomVariantShorthand> for AnyTwCustomVariantSelector {
     fn from(node: TwCustomVariantShorthand) -> Self {
         Self::TwCustomVariantShorthand(node)
@@ -31560,6 +32125,11 @@ impl std::fmt::Display for AnyCssValueAtRuleProperty {
         std::fmt::Display::fmt(self.syntax(), f)
     }
 }
+impl std::fmt::Display for AnyScssDeclarationName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
 impl std::fmt::Display for AnyTwCustomVariantSelector {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         std::fmt::Display::fmt(self.syntax(), f)
@@ -32580,6 +33150,26 @@ impl std::fmt::Display for CssViewTransitionAtRuleDeclarator {
         std::fmt::Display::fmt(self.syntax(), f)
     }
 }
+impl std::fmt::Display for ScssDeclaration {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
+impl std::fmt::Display for ScssIdentifier {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
+impl std::fmt::Display for ScssNamespacedIdentifier {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
+impl std::fmt::Display for ScssVariableModifier {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
 impl std::fmt::Display for TwApplyAtRule {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         std::fmt::Display::fmt(self.syntax(), f)
@@ -37318,6 +37908,88 @@ impl IntoIterator for &CssValueAtRulePropertyList {
     }
 }
 #[derive(Clone, Eq, PartialEq, Hash)]
+pub struct ScssVariableModifierList {
+    syntax_list: SyntaxList,
+}
+impl ScssVariableModifierList {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self {
+            syntax_list: syntax.into_list(),
+        }
+    }
+}
+impl AstNode for ScssVariableModifierList {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(SCSS_VARIABLE_MODIFIER_LIST as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == SCSS_VARIABLE_MODIFIER_LIST
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self {
+                syntax_list: syntax.into_list(),
+            })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        self.syntax_list.node()
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax_list.into_node()
+    }
+}
+impl Serialize for ScssVariableModifierList {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        let mut seq = serializer.serialize_seq(Some(self.len()))?;
+        for e in self.iter() {
+            seq.serialize_element(&e)?;
+        }
+        seq.end()
+    }
+}
+impl AstNodeList for ScssVariableModifierList {
+    type Language = Language;
+    type Node = ScssVariableModifier;
+    fn syntax_list(&self) -> &SyntaxList {
+        &self.syntax_list
+    }
+    fn into_syntax_list(self) -> SyntaxList {
+        self.syntax_list
+    }
+}
+impl Debug for ScssVariableModifierList {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.write_str("ScssVariableModifierList ")?;
+        f.debug_list().entries(self.iter()).finish()
+    }
+}
+impl IntoIterator for &ScssVariableModifierList {
+    type Item = ScssVariableModifier;
+    type IntoIter = AstNodeListIterator<Language, ScssVariableModifier>;
+    fn into_iter(self) -> Self::IntoIter {
+        self.iter()
+    }
+}
+impl IntoIterator for ScssVariableModifierList {
+    type Item = ScssVariableModifier;
+    type IntoIter = AstNodeListIterator<Language, ScssVariableModifier>;
+    fn into_iter(self) -> Self::IntoIter {
+        self.iter()
+    }
+}
+#[derive(Clone, Eq, PartialEq, Hash)]
 pub struct TwApplyClassList {
     syntax_list: SyntaxList,
 }
diff --git a/crates/biome_css_syntax/src/generated/nodes_mut.rs b/crates/biome_css_syntax/src/generated/nodes_mut.rs
index d0af1919ce44..c1591f0a936b 100644
--- a/crates/biome_css_syntax/src/generated/nodes_mut.rs
+++ b/crates/biome_css_syntax/src/generated/nodes_mut.rs
@@ -3325,6 +3325,86 @@ impl CssViewTransitionAtRuleDeclarator {
         )
     }
 }
+impl ScssDeclaration {
+    pub fn with_name(self, element: AnyScssDeclarationName) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(0usize..=0usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+    pub fn with_colon_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(1usize..=1usize, once(Some(element.into()))),
+        )
+    }
+    pub fn with_value(self, element: CssGenericComponentValueList) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(2usize..=2usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+    pub fn with_modifiers(self, element: ScssVariableModifierList) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(3usize..=3usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+    pub fn with_semicolon_token(self, element: Option<SyntaxToken>) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(4usize..=4usize, once(element.map(|element| element.into()))),
+        )
+    }
+}
+impl ScssIdentifier {
+    pub fn with_dollar_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(0usize..=0usize, once(Some(element.into()))),
+        )
+    }
+    pub fn with_name(self, element: CssIdentifier) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(1usize..=1usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+}
+impl ScssNamespacedIdentifier {
+    pub fn with_namespace(self, element: CssIdentifier) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(0usize..=0usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+    pub fn with_dot_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(1usize..=1usize, once(Some(element.into()))),
+        )
+    }
+    pub fn with_name(self, element: ScssIdentifier) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(2usize..=2usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+}
+impl ScssVariableModifier {
+    pub fn with_excl_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(0usize..=0usize, once(Some(element.into()))),
+        )
+    }
+    pub fn with_value_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(1usize..=1usize, once(Some(element.into()))),
+        )
+    }
+}
 impl TwApplyAtRule {
     pub fn with_apply_token(self, element: SyntaxToken) -> Self {
         Self::unwrap_cast(
diff --git a/crates/biome_css_syntax/src/lib.rs b/crates/biome_css_syntax/src/lib.rs
index f349c277c4f2..6d98643689b7 100644
--- a/crates/biome_css_syntax/src/lib.rs
+++ b/crates/biome_css_syntax/src/lib.rs
@@ -4,6 +4,7 @@
 mod file_source;
 mod generated;
 mod import_ext;
+mod scss_ext;
 pub mod selector_ext;
 pub mod stmt_ext;
 mod string_ext;
@@ -13,7 +14,7 @@ pub use self::generated::*;
 pub use biome_rowan::{
     SyntaxNodeText, TextLen, TextRange, TextSize, TokenAtOffset, TriviaPieceKind, WalkEvent,
 };
-pub use file_source::{CssFileSource, CssVariant, EmbeddingKind};
+pub use file_source::{CssFileLanguage, CssFileSource, CssVariant, EmbeddingKind};
 pub use syntax_node::*;
 
 use crate::CssSyntaxKind::*;
diff --git a/crates/biome_css_syntax/src/scss_ext.rs b/crates/biome_css_syntax/src/scss_ext.rs
new file mode 100644
index 000000000000..3929c22b5fee
--- /dev/null
+++ b/crates/biome_css_syntax/src/scss_ext.rs
@@ -0,0 +1,25 @@
+use crate::{CssSyntaxKind, ScssVariableModifier};
+
+impl ScssVariableModifier {
+    /// Returns true if this modifier is `!default`.
+    pub fn is_default(&self) -> bool {
+        matches!(
+            self.value().ok().map(|token| token.kind()),
+            Some(CssSyntaxKind::DEFAULT_KW)
+        )
+    }
+
+    /// Returns true if this modifier is `!global`.
+    pub fn is_global(&self) -> bool {
+        matches!(
+            self.value().ok().map(|token| token.kind()),
+            Some(CssSyntaxKind::GLOBAL_KW)
+        )
+    }
+
+    /// Returns true if this modifier is neither `!default` nor `!global`.
+    /// This includes bogus or invalid modifiers.
+    pub fn is_unknown(&self) -> bool {
+        !self.is_default() && !self.is_global()
+    }
+}
diff --git a/crates/biome_grit_patterns/src/grit_target_language/css_target_language/constants.rs b/crates/biome_grit_patterns/src/grit_target_language/css_target_language/constants.rs
index c8cf52bc64d7..0618beecb157 100644
--- a/crates/biome_grit_patterns/src/grit_target_language/css_target_language/constants.rs
+++ b/crates/biome_grit_patterns/src/grit_target_language/css_target_language/constants.rs
@@ -5,5 +5,6 @@ use biome_css_syntax::CssSyntaxKind::{self, *};
 
 pub(crate) const DISREGARDED_SNIPPET_SLOTS: &[(CssSyntaxKind, u32, DisregardedSlotCondition)] = &[
     (CSS_DECLARATION_WITH_SEMICOLON, 1, Always),
+    (SCSS_DECLARATION, 4, Always),
     (TW_PLUGIN_AT_RULE, 3, Always),
 ];
diff --git a/crates/biome_grit_patterns/src/grit_target_language/css_target_language/generated_mappings.rs b/crates/biome_grit_patterns/src/grit_target_language/css_target_language/generated_mappings.rs
index 43449bc789ac..4e0c17159a95 100644
--- a/crates/biome_grit_patterns/src/grit_target_language/css_target_language/generated_mappings.rs
+++ b/crates/biome_grit_patterns/src/grit_target_language/css_target_language/generated_mappings.rs
@@ -265,6 +265,10 @@ pub fn kind_by_name(node_name: &str) -> Option<CssSyntaxKind> {
         "CssViewTransitionAtRuleDeclarator" => lang::CssViewTransitionAtRuleDeclarator::KIND_SET
             .iter()
             .next(),
+        "ScssDeclaration" => lang::ScssDeclaration::KIND_SET.iter().next(),
+        "ScssIdentifier" => lang::ScssIdentifier::KIND_SET.iter().next(),
+        "ScssNamespacedIdentifier" => lang::ScssNamespacedIdentifier::KIND_SET.iter().next(),
+        "ScssVariableModifier" => lang::ScssVariableModifier::KIND_SET.iter().next(),
         "TwApplyAtRule" => lang::TwApplyAtRule::KIND_SET.iter().next(),
         "TwConfigAtRule" => lang::TwConfigAtRule::KIND_SET.iter().next(),
         "TwCustomVariantAtRule" => lang::TwCustomVariantAtRule::KIND_SET.iter().next(),
diff --git a/packages/@biomejs/backend-jsonrpc/src/workspace.ts b/packages/@biomejs/backend-jsonrpc/src/workspace.ts
index 20d051e6d9e7..a8373bdef472 100644
--- a/packages/@biomejs/backend-jsonrpc/src/workspace.ts
+++ b/packages/@biomejs/backend-jsonrpc/src/workspace.ts
@@ -8209,6 +8209,7 @@ export interface CssFileSource {
 For example, if inside a styled`` literal, a top-level declaration is allowed. 
 	 */
 	embeddingKind: EmbeddingKind2;
+	language: CssFileLanguage;
 	variant: CssVariant;
 }
 export interface GraphqlFileSource {
@@ -8272,7 +8273,11 @@ export type LanguageVersion = "eS2022" | "eSNext";
 export type JsonFileVariant = "standard" | "jsonc";
 export type EmbeddingKind2 = "None" | "Styled" | { Html: EmbeddingHtmlKind };
 /**
-	* The style of CSS contained in the file.
+ * The language of the stylesheet.
+ */
+export type CssFileLanguage = "css" | "scss";
+/**
+	* Extra CSS features enabled for the file.
 
 Currently, Biome aims to be compatible with
 the latest Recommendation level standards.
diff --git a/xtask/codegen/css.ungram b/xtask/codegen/css.ungram
index 763ed32e29f1..88876ec23e20 100644
--- a/xtask/codegen/css.ungram
+++ b/xtask/codegen/css.ungram
@@ -86,6 +86,7 @@ AnyCssRule =
 	CssQualifiedRule
 	| CssNestedQualifiedRule
 	| CssAtRule
+	| ScssDeclaration
 	| CssBogusRule
 
 // .header { color: red }
@@ -482,6 +483,7 @@ CssDeclarationOrRuleList = AnyCssDeclarationOrRule*
 AnyCssDeclarationOrRule =
 	AnyCssRule
 	| CssDeclarationWithSemicolon
+	| ScssDeclaration
 	| CssEmptyDeclaration
 	| CssBogus
 	| CssMetavariable
@@ -501,6 +503,7 @@ CssDeclarationOrAtRuleList = AnyCssDeclarationOrAtRule*
 
 AnyCssDeclarationOrAtRule =
 	CssDeclarationWithSemicolon
+	| ScssDeclaration
 	| CssEmptyDeclaration
 	| CssAtRule
 
@@ -534,6 +537,7 @@ CssDeclarationList = AnyCssDeclaration*
 
 AnyCssDeclaration =
 	CssDeclarationWithSemicolon
+	| ScssDeclaration
 	| CssEmptyDeclaration
 
 AnyCssRuleBlock =
@@ -1770,6 +1774,7 @@ AnyCssValue =
 	| CssUnicodeRange
 	| CssMetavariable
 	| TwValueThemeReference
+	| ScssIdentifier
 
 
 // https://drafts.csswg.org/css-syntax/#typedef-dimension-token
@@ -2350,3 +2355,43 @@ TwPluginAtRule =
 TwSlotAtRule =
 	'slot'
 	';'
+
+/////////////
+// SCSS
+/////////////
+
+// $variable: value;
+// ^^^^^^^^^^^^^^^^^
+ScssDeclaration =
+	name: AnyScssDeclarationName
+	':'
+	value: CssGenericComponentValueList
+	modifiers: ScssVariableModifierList
+	';'?
+
+// $var: 1
+// ^^^^
+AnyScssDeclarationName =
+	ScssIdentifier
+	| ScssNamespacedIdentifier
+
+// ns.$var: 1;
+// ^^^^^^^
+ScssNamespacedIdentifier =
+	namespace: CssIdentifier
+	'.'
+	name: ScssIdentifier
+
+// $var: 1 !default !global;
+//         ^^^^^^^^^^^^^^^^
+ScssVariableModifierList = ScssVariableModifier*
+
+// $var: 1 !default;
+//         ^^^^^^^^
+ScssVariableModifier =
+	'!'
+	value: ('default' | 'global')
+
+// $var: 1;
+// ^^^^
+ScssIdentifier = dollar: '$' name: CssIdentifier
diff --git a/xtask/codegen/src/css_kinds_src.rs b/xtask/codegen/src/css_kinds_src.rs
index 74b643948ca0..894aaf636189 100644
--- a/xtask/codegen/src/css_kinds_src.rs
+++ b/xtask/codegen/src/css_kinds_src.rs
@@ -13,6 +13,7 @@ pub const CSS_KINDS_SRC: KindsSrc = KindsSrc {
         ("<", "L_ANGLE"),
         (">", "R_ANGLE"),
         ("~", "TILDE"),
+        ("$", "DOLLAR"),
         ("#", "HASH"),
         ("&", "AMP"),
         ("|", "PIPE"),
@@ -553,6 +554,12 @@ pub const CSS_KINDS_SRC: KindsSrc = KindsSrc {
         "CSS_VALUE_AT_RULE_GENERIC_PROPERTY",
         "CSS_VALUE_AT_RULE_GENERIC_VALUE",
         "CSS_VIEW_TRANSITION_AT_RULE",
+        // SCSS
+        "SCSS_DECLARATION",
+        "SCSS_NAMESPACED_IDENTIFIER",
+        "SCSS_VARIABLE_MODIFIER_LIST",
+        "SCSS_VARIABLE_MODIFIER",
+        "SCSS_IDENTIFIER",
         // Tailwind CSS 4.0 nodes
         "TW_THEME_AT_RULE",
         "TW_UTILITY_AT_RULE",
diff --git a/xtask/codegen/src/formatter.rs b/xtask/codegen/src/formatter.rs
index b6b9c610c5e4..face42d8a0f1 100644
--- a/xtask/codegen/src/formatter.rs
+++ b/xtask/codegen/src/formatter.rs
@@ -562,6 +562,7 @@ enum NodeDialect {
     Jsx,
     Json,
     Css,
+    Scss,
     Grit,
     Graphql,
     Html,
@@ -580,6 +581,7 @@ impl NodeDialect {
             Self::Jsx,
             Self::Json,
             Self::Css,
+            Self::Scss,
             Self::Grit,
             Self::Graphql,
             Self::Html,
@@ -598,6 +600,7 @@ impl NodeDialect {
             Self::Jsx => "jsx",
             Self::Json => "json",
             Self::Css => "css",
+            Self::Scss => "scss",
             Self::Grit => "grit",
             Self::Graphql => "graphql",
             Self::Html => "html",
@@ -616,6 +619,7 @@ impl NodeDialect {
             "Ts" => Self::Ts,
             "Json" => Self::Json,
             "Css" => Self::Css,
+            "Scss" => Self::Scss,
             "Grit" => Self::Grit,
             "Graphql" => Self::Graphql,
             "Html" => Self::Html,