सास (SASS)

सास (SASS) एक सिएसएस (CSS) एक्सटेन्सन हो जसले सिएसएस (CSS) लाई पनि एक प्रोग्रामिङ्ग ल्याङ्गवेजको जस्तो काम गराउछ ।  सासको साहायताले सिसएसएस स्यान्टेक्सहरुले लेख्दा त्यसमा भेरिएबल , नेस्टेड रुल , मिनिङ्ग, ईनलाईन ईम्पोर्ट आदीको प्रयोग गर्न सकिन्छ ।

उदारणको लागी तपाई एउटा सिएसए फाईल तयार गर्दै हुनुहुन्छ र फन्ट फेमिलि हरु बिभिन्न क्लास , ईलेमेन्टहरुमा प्रयोग गर्दा एकरुपता अपनाउन जरुरी छ भने त्यसलाई भेरीएबलको रुपमा सेभ गर्न सक्नु हुन्छ । र जहाँ जुन जुन सेलेक्टर , ईलेमेन्टमा सो फन्टको आवश्यकता पर्दछ त्यहाँ त्यो फन्ट भेरिएबल प्रयोग गर्न सक्नु हुन्छ ।  ट्रेडिशनल सिएसएस मा यो सम्भव छैन त्यसैले सास को प्रयोग गरेर यस्तो गर्न सकिन्छ ।

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

सास को प्रयोग गरेर यस्तो सिएसएस बनाउन सकिन्छ ।

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

यो त सिएसएस कोड लेख्नको लागी सास मा भेरिएबलको प्रयोग मात्र भयो । सास मा सिएसएस फाईल तयार गर्नको लागी नेष्टेड रुल , मिनिग्स, ईनलाईन ईम्पोर्ट आदीको प्रयोग गर्न सकिन्छ । अब आऊनुस यिनिहरुको बारेमा छोटो चर्चा गरौ ।

नेष्टेड रुल

सास को साहायताले एक अर्कामा अन्तर्निहित प्रपटिजहरु शेयर गर्न सक्दछन । उदारणको लागी

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

लेखेर त्यसलाई सिएसएस फाईलमा कम्पाईल गर्नु भो भने तल दिएको जस्तो सिएसएस स्यान्टेक्स तयार हुन्छ ।

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

ईम्पोर्ट

सास को अर्को राम्रो र पक्ष भनेको टुक्रा टुक्रा कोडहरुलाई ईम्पोर्ट गरी एकै ठाँउमा सँग्रह गर्नु सक्न पनि हो । उदारणको लागि यती तपाईले कोडहरुलाई मेन्टेन गर्न सजिलो होस भने सानो सानो टुक्रा पारेर भिन्दा भिन्दै फाईलमा राख्नु भएको छ र त्यसलाई एकै पटक प्रयोग गर्न तल दिए अनुसार गर्न सकिन्छ ।

// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;}

माथीको उदारणमा एउटा रिसेट भन्ने फाईल छ त्यसमा सिएसएस रिसेटभ्यालहरु राखीएको छ र अर्को बेस भन्ने फाईलमा ईम्पोर्ट गर्ने हो भने सास को मद्दतले तल दिए अनुसारको सिएसएस फाईल बनाउन सकिन्छ ।

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

मिक्सीन

पिएचपी , जाभास्क्रीप्टका फङ्गसन हरुमा जस्तो सास फाईलमा पनि भेरिएबल हरु आवश्यकता अनुसार पास गर्न सकिन्छ ।

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

सासमा मिक्सीनको प्रयोग गर्दा कुनै क्लासको नामको अगाडी @mixin लेख्न पर्छ ।

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

एक्सटेन्ड्स/ईनहेरिटेन्डस

यो सासको अर्को उपयोगी फिचर हो । यसमा सिएसएस प्रपर्टिजहरु एकबाट अर्को सेलेक्टरमा शेयरिङ्ग गरिन्छ ।

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

माथीको उदारणमा शेयर गरीएका सिएसएस प्रर्पटिजहरु तल दिए अनुसारका सेलेक्टरहरुमा यसरी शेयर गरिन्छ ।

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

अपरेटर

सिएसए फ्रेमवर्कहरुमा पाईन ग्रिड फिचरहरु यस्तै सास जस्तो प्रोग्रामको अपरेटर फिचर प्रयोग गरेर तयार गरिएको हुनु पर्छ ।

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

</div> अब माथी दिइको कोडलाई सिएसएस फाईलमा कम्पाईल गर्दा यस्तो बन्छ ।

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

सास (SASS) कसरी ईन्सटल गर्ने ?

माथीको उदारण पढेर यती तपाईलाई सास उपयोगी लाग्यो भने तपाई आफ्नो आवश्यकता अनुसार सासको सहयोगले सिएसएस फाईलहरु बनाउन सक्नु हुन्छ । विन्डोज मेसिनमा सास ईन्सटल गर्नको लागि सबै भन्दा पहिले नोड जेएस ईन्सटल गर्नु पर्छ । यस भन्द अगाडीको पोष्टमा मैल नोड जेएस कसरि ईन्सटल गर्ने भन्ने उल्लेख गरेको छु । अब नोडजेस ईन्सटल गरी सकेको भए सास ईन्सटल गर्नको लागी तल दिए अनुसार गर्न सकिन्छ ।

npm install -g sass

अब माथी दिएको कुनै पनि उदारण लाई कपी गरेर .scss एक्सटेन्समा फाईल सेभ गर्नु होला । तपाईले फाईल कुन लोकेशनमा राख्नु भएको छ अनि कुन लोकेशनमा सिएसएस फाईल सेभ गर्ने हो याद गर्नु होला । अब माथी उल्लेख गरे अनुसारको सास फाईललाई सिएसए फाईल बनाउन तल दिएको कमाण्ड प्रयोग गर्नु होला ।

sass input.scss output.css

मेरो उदारणको केसमा मैले जुन लोकेशनमा बसेर काम गरी गरी रहेको थिए त्यही लोकेशनमा सास फाईल सेभ गरे अनि त्यही लोकेशनमा सिएसएस फाईल क्रियट गरेको हुँ ।