sass => एससीएसएस बनाम सैस

मुख्य अंतर

हालांकि लोग अक्सर कहते हैं Sass इस सीएसएस-पूर्वप्रक्रमक के नाम के रूप में, वे अक्सर मतलब SCSS -syntax। Sass का उपयोग करता .sass , फ़ाइल एक्सटेंशन, जबकि SCSS - Sass का उपयोग करता .scss विस्तार। उन्हें दोनों को "सैस" कहा जाता है।

आम तौर पर बोलते हुए, SCSS -syntax अधिक सामान्यतः प्रयोग किया जाता है। SCSS अधिक क्षमताओं के साथ नियमित CSS की तरह दिखता है, जबकि Sass नियमित CSS से काफी अलग दिखता है। दोनों वाक्यविन्यासों में समान क्षमताएं हैं।

वाक्य - विन्यास

मुख्य अंतर यह है कि Sass घुंघराले कोष्ठक या अर्धविराम का उपयोग नहीं करता है, जहां SCSS करता है। Sass भी व्हाट्सएप-सेंसिटिव है, मतलब आपको सही तरीके से इंडेंट करना है। SCSS , आप कृपया अपने नियमों को प्रारूपित और इंडेंट कर सकते हैं।

एससीएसएस:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

एस.ए.एस.एस.:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

संकलन के बाद, दोनों एक ही सीएसएस का उत्पादन करेंगे:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

mixins

Sass अधिक "आलसी" वाक्य रचना करता है। आपके द्वारा परिभाषित और मिश्रणों को शामिल करने की तुलना में इस नीसर को कुछ भी नहीं दिखाता है।

एक मिश्रण को परिभाषित करना

= कैसे आप में एक mixin परिभाषित है Sass , @mixin में SCSS ।

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

जिसमें एक मिक्सिन भी शामिल है

+ कैसे आप में शामिल है Sass , @include में SCSS ।

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

मैप्स

जब नक्शों की बात आती है, तो आमतौर पर SCSS आसान सिंटैक्स होता है। क्योंकि Sass इंडेंट-बेस्ड है, इसलिए आपके मैप्स को एक लाइन में सेव करना होगा।

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

क्योंकि आप अपने कोड को SCSS साथ कई लाइनों पर प्रारूपित कर सकते हैं, आप अपने मानचित्रों को अधिक पठनीय बनाने के लिए प्रारूपित कर सकते हैं।

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

Sass बनाम Scss में टिप्पणियाँ काफी हद तक समान हैं, सिवाय इसके कि जब बहु-लाइनें संबंधित हों। SASS मल्टी-लाइनें इंडेंटेशन-सेंसिटिव हैं, जबकि SCSS कमेंट टर्मिनेटर्स पर निर्भर करता है।

सिंगल-लाइन टिप्पणी

style.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

मल्टी-लाइन टिप्पणी

style.scss

पहल: /*

टर्मिनेटर: */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

यह रंग लाल के साथ h1 तत्वों को स्टाइल करेगा।

style.sass

अब, SASS पास दो सर्जक हैं, लेकिन कोई संबंधित टर्मिनेटर नहीं है। एसएएसएस में SASS टिप्पणियां इंडेंटेशन स्तरों के प्रति संवेदनशील हैं ।

पहल: // और /*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

यह रंग लाल के साथ h1 तत्वों को स्टाइल करेगा।

उसी के साथ किया जा सकता है /* पहल:

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

इसलिए यह अब आपके पास है! SCSS और SASS में टिप्पणियों के बीच मुख्य अंतर!

SCSS और SASS के बीच तुलना

SCSS अधिक एक तरह वाक्य रचना जैसा दिखता CSS वाक्यविन्यास लेकिन SASS वाक्य रचना से थोड़ा अलग है SCSS लेकिन दोनों बिल्कुल एक ही पैदा करता है CSS कोड।
SASS हम अर्धविराम ( ; ) के साथ शैली गुणों को समाप्त नहीं कर रहे हैं ; लेकिन SCSS में हम शैली गुणों को ( ; ) के साथ समाप्त कर रहे हैं।
SCSS हमने स्टाइल प्रॉपर्टीज़ को बंद करने के लिए पैरेंटिसिस {} का इस्तेमाल किया लेकिन SASS हम paranthesis इस्तेमाल नहीं करते हैं।
SASS में Indentation बहुत महत्वपूर्ण है। यह तत्व के class या id में नेस्टेड गुणों को परिभाषित करेगा।
scss हम कई वेरिएबल्स को सिंगल लाइन में परिभाषित कर सकते हैं लेकिन SASS हम ऐसा नहीं कर सकते।

लूप सिंटैक्स के लिए

Sass 3.3 और प्लस वर्जन की रिलीज के साथ @ और बाकी सिंटेक्स समान हो गए। अब हम न केवल scss बल्कि sass के साथ भावों का उपयोग कर सकते हैं।

sass वाक्य रचना

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

को संकलित किया

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

scss सिंटैक्स

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

को संकलित किया

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

sass
एससीएसएस बनाम सैस

खोज…