एक नज़र में Sass/SCSS

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

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

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

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

$brand-color: #264de4;

.card {
  border: 1px solid #ddd;

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

मिक्सिन

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

@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 नहीं पढ़ सकते।