मॉड्यूल Sassy की मदद से Drupal में SCSS (SASS) को तेजी से जोड़ना

SASS/SCSS लंबे समय से CSS कोड लिखने का मानक बन चुके हैं। यदि आप अभी तक अपनी वेबसाइटों के लिए उनका उपयोग नहीं कर रहे हैं, तो अब यह करने का समय है। आप Sassy मॉड्यूल की मदद से SCSS को बहुत जल्दी Drupal में जोड़ सकते हैं — और यह shared-hosting पर भी काम करेगा, क्योंकि CSS फ़ाइलों की कंपाइलेशन PHP लाइब्रेरी के माध्यम से होगी।

चलो शुरू करते हैं। मेरे पास एक साफ-सुथरा Drupal इंस्टॉलेशन है, जिसमें Zen थीम स्थापित है। हमें सबसे पहले Sassy मॉड्यूल इंस्टॉल करना होगा:

https://www.drupal.org/project/sassy

Sassy मॉड्यूल को CSS कंपाइल करने के लिए Prepro मॉड्यूल की आवश्यकता होती है:

https://www.drupal.org/project/prepro

साथ ही, हमें Libraries API मॉड्यूल भी इंस्टॉल करना होगा, ताकि हम Sassy के लिए आवश्यक लाइब्रेरी को कनेक्ट कर सकें:

https://www.drupal.org/project/libraries

अब हमें PHPSass लाइब्रेरी चाहिए, जो SCSS कोड को CSS में परिवर्तित करती है। नवीनतम संस्करण “Download ZIP” डाउनलोड करें:

https://github.com/richthegeek/phpsass

लाइब्रेरी को sites/all/libraries/phpsass फ़ोल्डर में कॉपी करें ताकि संरचना इस प्रकार हो:
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php
इत्यादि।

अब अपने मॉड्यूल सक्रिय करें। फिर SCSS फ़ाइल जोड़ें। मेरी सब-थीम का नाम “sitemade” है, इसलिए मैं उसकी sitemade.info फ़ाइल खोलकर इसमें यह लाइन जोड़ता हूँ:

stylesheets[all][] = css/styles.scss

जैसा कि आप देख सकते हैं, आपको केवल .scss एक्सटेंशन लिखना होता है — बाकी सबकुछ वैसे ही जोड़ा जाता है जैसे सामान्य CSS फाइलें। अब css/styles.scss नाम की फ़ाइल बनाएं और कैश साफ करें। बस! अब आपकी फ़ाइल कनेक्ट हो चुकी है और काम करेगी।

यदि कोई त्रुटि आती है, तो सुनिश्चित करें कि आपकी files फ़ोल्डर के लिए अनुमतियाँ (permissions) 777 हैं और “Отчёт о состоянии” (Status report) में कोई त्रुटि नहीं है। अब हम Drupal में SCSS के लिए कुछ सेटिंग्स और इसकी क्षमताओं को देखेंगे।

Sassy मॉड्यूल कैसे काम करता है

जैसे ही आप SCSS फ़ाइल जोड़ते हैं, Sassy मॉड्यूल SCSS से CSS कोड जनरेट करता है, और Prepro मॉड्यूल उस कोड को sites/default/files/prepro फ़ोल्डर में सेव करता है।

ताकि CSS हर बार पेज खुलने पर दोबारा जनरेट न हो (जो लाइव साइट के लिए आवश्यक है), आप Prepro मॉड्यूल की सेटिंग्स में जाकर कैशिंग सक्षम कर सकते हैं:

/admin/config/media/prepro

डिफ़ॉल्ट रूप से कैशिंग बंद होती है, और CSS हर पेज लोड पर फिर से जेनरेट होता है। यह प्रक्रिया काफी तेज होती है, इसलिए आप SCSS बदलकर तुरंत परिणाम देख सकते हैं।

Mozilla Firefox Firebug + FireSass

Firebug और उसके ऐड-ऑन FireSass का उपयोग करना बहुत सुविधाजनक है। यह आपको दिखाता है कि SCSS फ़ाइल की कौन सी लाइन में संबंधित कोड है:

यदि आप FireSass नहीं इंस्टॉल करते, तो आप केवल कंपाइल किए गए CSS कोड की लाइनों को ही देख पाएँगे।

FireSass ऐड-ऑन के लिए, Prepro मॉड्यूल की सेटिंग्स पेज पर जाकर ये विकल्प सक्षम करें:
/admin/config/media/prepro

Pass @warn and @debug to Watchdog
Include debug information in output

SCSS की क्षमताएँ

SASS/SCSS की सभी क्षमताओं के बारे में आप आधिकारिक वेबसाइट पर पढ़ सकते हैं:

http://sass-lang.com/

SCSS की सबसे महत्वपूर्ण विशेषता है विभिन्न स्तरों (nested structure) में कोड लिखना।

नेस्टिंग (Nesting)

आप बिना पैरेंट क्लास को बार-बार दोहराए कोड लिख सकते हैं, उदाहरण के लिए:

#menu-1 {
  margin-top: 20px;
 
  ul {
    margin-left: 0px;
 
    li {
      width: 100px;
      display: inline-block;
    }
 
    .li-1 {
      background: red;
    }
  }
}

यह कोड नीचे दिए गए CSS की तुलना में छोटा और अधिक पठनीय है:

#menu-1 {
  margin-top: 20px;
}
 
#menu-1 ul {
  margin-left: 0px;
}
 
#menu-1 ul li {
  width: 100px;
  display: inline-block;
}
 
#menu-1 ul li.li-1 {
  background: red;
}

अब कल्पना करें कि आपको <li> के अंदर <a> टैग के लिए स्टाइल जोड़नी है, और <a> के अंदर एक <span> है — SCSS की हाइरार्की से यह बहुत आसान हो जाता है:

#menu-1 {
  margin-top: 20px;
 
  ul {
    margin-left: 0px;
 
    li {
      width: 100px;
      display: inline-block;
 
      a {
        text-decoration: none;
 
        span {
          padding-left: 10px;
          background: url(../images/icon.png) left 3px no-repeat;
        }
      }
    }
 
    .li-1 {
      background: red;
    }
  }
}

आप “&” सेलेक्टर का उपयोग करके :hover स्थिति भी जोड़ सकते हैं:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

जो कंपाइल होकर इस प्रकार बनेगा:

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
  font-weight: normal; 
}

वेरिएबल्स (Variables)

SCSS की एक और शानदार विशेषता है वेरिएबल्स का उपयोग। आप अपनी वेबसाइट की रंग योजना और लेआउट वेरिएबल्स में परिभाषित कर सकते हैं और फिर उनका पुन: उपयोग कर सकते हैं:

$red: #fa0a0a;
$blue: #0a0afa;
$green: #0afa0a;
 
$content: 1200px;
$sidebar: 250px;
 
.sidebar {
  width: $sidebar;
  float: left;
  background: $red;
}
 
.content {
  width: $sidebar;
  margin-left: $sidebar;
  background: $blue;
}

मिक्सिन्स (Mixins / Functions)

SCSS में आप “फंक्शन” जैसी संरचनाएँ भी बना सकते हैं, जिन्हें mixin कहा जाता है:

@mixin blue-button {   
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
 
  &:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }
}
 
.form-submit {
  @include blue-button;
}