# एक नज़र में Sass/SCSS — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-sass-scss

> एक सीएसएस प्रीप्रोसेसर: वेरिएबल, नेस्टिंग, और मिक्सिन जो सामान्य सीएसएस में कंपाइल होते हैं।

## Sass क्या जोड़ता है

**Sass/SCSS** सीएसएस का एक सुपरसेट है जो वेरिएबल (`$name`), नेस्टेड रूल, मिक्सिन (पुनः-उपयोगी ब्लॉक), और गणित जोड़ता है — फिर सामान्य सीएसएस में कंपाइल हो जाता है जिसे ब्राउज़र समझता है।

## वेरिएबल और नेस्टिंग

नेस्टिंग पेरेंट सेलेक्टर दोहराने की बजाय आपके HTML ढाँचे को दर्शाती है।

```scss
$brand-color: #264de4;

.card {
  border: 1px solid #ddd;

  .title {
    color: $brand-color;
    font-weight: bold;
  }
}
```

## मिक्सिन

`@mixin` पुनः-उपयोगी डिक्लेरेशन को बंडल करता है; `@include` उन्हें आर्ग्युमेंट के साथ जोड़ता है।

```scss
@mixin flex-center($gap: 8px) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $gap;
}

.toolbar {
  @include flex-center(12px);
}
```

## अंत में यह अब भी सीएसएस ही है

Sass को `.scss` को `.css` में कंपाइल करने के लिए बिल्ड स्टेप चाहिए (बंडलर या `sass` CLI से) — ब्राउज़र सीधे Sass नहीं पढ़ सकते।