Sass and SCSS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor: a language that extends CSS with features and compiles to ordinary CSS the browser understands. SCSS is the most common Sass syntax. It uses braces and semicolons, so any valid CSS file is already valid SCSS. The older indented syntax uses the .sass extension.

Why it matters

Large stylesheets get repetitive. Sass offers variables, nesting, partial files imported with @use, mixins for reusable blocks and functions for calculations. This keeps colors and spacing in one place and lets teams split styles into modules. Native CSS variables and nesting now cover some of this, but Sass still helps with loops, math and shared libraries.

Example

$brand: #0a66c2;

@mixin pill($bg) {
  background: $bg;
  border-radius: 999px;
}

.tag {
  @include pill($brand);
  &:hover { opacity: .85; }
}

The compiler outputs .tag { background: #0a66c2; border-radius: 999px; } and a separate .tag:hover rule.

Common mistakes

• Nesting selectors many levels deep, producing huge, highly specific CSS.
• Confusing Sass variables, which vanish at compile time, with CSS custom properties, which exist at runtime.
• Using the deprecated @import instead of @use.

Related

• CSS
• CSS variables
• CSS specificity
• Bundler

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.