Sass [Syntactically Awesome Style Sheets]

SASS का Full-Form होता है “Syntactically Awesome Style Sheets.” Sass असल में एक extension होती है cascading style sheets (CSS) की, जो की एक language होती है जिसका इस्तमाल HTML documents की layout और formatting को define करने के लिए किया जाता है. ये इस्तमाल करती है fully-compatible CSS syntax, लेकिन प्रदान करती है additional features जैसे की CSS variables और nested rules जो की बनाती है CSS को ज्यादा efficient और edit करने के लिए आसान.

एक बड़ी drawback है standard CSS की वो ये की ये variables को support नहीं करता है. उदाहरण के लिए, अगर आपके पास multiple styles जो वो भी समान color की, तब आपको उन color को define करना होगा separately प्रत्येक style के लिए. अगर आपने ये निर्णय किया की color को बदलें, तब आपको प्रत्येक instance के लिए इसे बदलना होगा CSS document में.

Sass के साथ, आप color को define कर सकते हैं एक variable के तोर पर और फिर उस variable को assign कर सकते हैं प्रत्येक style में जो की उसका इस्तमाल करती है. अगर आपने निर्णय किया की आप color change करेंगे, तब आपको केवल उसे एक ही बार change करना होगा — वो भी जब इसे आप initially define कर रहे हैं document में.

यहाँ निचे के उदाहरण में ये बताया गया है की कैसे आप define करें और इस्तमाल करें एक CSS variable को Sass में.

$myColor: #00695C;

.pageTop { background-color: $myColor; }
.infoText { color: $myColor; }
.pageBottom { background-color: $myColor; }

Sass भी support करती है nested rules को, जो की allow करता है developers को ज्यादा efficient code लिखने के लिए. यहाँ निचे के उदाहरण में, .button class को nested किया गया है #top p style में.

#top p
{
color: #004D40;

.button
{
background-color: #039BE5;
color: #FFF;
}
}

जब इसे compiled किया जायेगा, तब ऊपर का code पैदा करेगा ये following CSS:

#top p { color: #004D40; }
#top p .button { background-color: #039BE5; color: #FFF; }

वैसे तो Sass प्रदान करता है काफी सारे benefits web developers को, वहीँ Sass documents को web browsers को द्वारा recognize नहीं किया जाता है. ऐसे में, एक Sass file को पहले compile किया जाना चाहिए CSS में वो भी उसे एक HTML document में इस्तमाल किया जाने से पहले. इसे locally किया जाता है वो भी CSS को uploading करने से पहले web server में, जिसके लिए program जैसे की Compass.app या Koala का इस्तमाल किया जाता है. इसे compile किया जा सकता है server में जिसके लिए एक PHP या or Ruby script का इस्तमाल किया जाता है जो की compile करती है Sass को CSS में.