Sass का पूरा नाम “Syntactically Awesome Style Sheets” है। Sass cascading style sheet (CSS) का एक extension है, जो HTML दस्तावेज़ों के layout और formatting को परिभाषित करने के लिए उपयोग की जाने वाली भाषा है। यह पूरी तरह से compatible CSS syntax का उपयोग करता है, लेकिन CSS variable और nested नियम जैसी अतिरिक्त सुविधाएँ प्रदान करता है जो CSS को अधिक efficient और edit करने में आसान बनाते हैं।
standard CSS की कमियों में से एक यह है, कि यह variable का समर्थन नहीं करता है। उदाहरण के लिए, यदि आपके पास एक ही रंग की कई styles हैं, तो आपको प्रत्येक style के लिए अलग-अलग रंग परिभाषित करने की आवश्यकता है। यदि आप रंग बदलने का निर्णय लेते हैं, तो आपको इसे CSS दस्तावेज़ में प्रत्येक उदाहरण के लिए बदलना होगा। Sass के साथ, आप रंग को एक वेरिएबल के रूप में परिभाषित कर सकते हैं, और वेरिएबल को हर उस स्टाइल के लिए assign कर सकते हैं जो इसका उपयोग करता है। यदि आप रंग बदलने का निर्णय लेते हैं, तो आपको इसे केवल एक बार बदलने की आवश्यकता है – जहां इसे प्रारंभ में दस्तावेज़ में परिभाषित किया गया है।
नीचे दिया गया उदाहरण दिखाता है कि Sass में CSS वेरिएबल को कैसे परिभाषित और उपयोग किया जाए।
$myColor: #00695C;
.pageTop { background-color: $myColor; }
.infoText { color: $myColor; }
.pageBottom { background-color: $myColor; }
Sass नेस्टेड नियमों का भी समर्थन करता है, जिससे developers अधिक कुशल कोड लिख सकते हैं। नीचे दिए गए उदाहरण में, .button वर्ग #top p शैली में नेस्ट किया गया है।
#top p
{
color: #004D40;
.button
{
background-color: #039BE5;
color: #FFF;
}
}
compiled होने पर, उपरोक्त कोड निम्नलिखित CSS का उत्पादन करेगा:
#top p { color: #004D40; }
#top p .button { background-color: #039BE5; color: #FFF; }
जबकि Sass web developers को कई लाभ प्रदान करता है, Sass दस्तावेज़ वेब ब्राउज़र द्वारा मान्यता प्राप्त नहीं हैं। इसलिए, एक HTML दस्तावेज़ में उपयोग किए जाने से पहले एक Sass file को पहले CSS में संकलित किया जाना चाहिए। यह Compass.app या Koala जैसे प्रोग्राम का उपयोग करके CSS को web server पर upload करने से पहले स्थानीय रूप से किया जा सकता है। इसे PHP या Ruby script का उपयोग करके सर्वर पर भी संकलित किया जा सकता है जो Sass को CSS में संकलित करता है।