SCSS और Sass में क्या अंतर है?


1900

मैं जो पढ़ रहा हूं, उसमें सेस एक ऐसी भाषा है जो सीएसएस को चर और गणित के समर्थन के साथ अधिक शक्तिशाली बनाती है।

SCSS में क्या अंतर है? क्या इसे एक ही भाषा माना जाए? समान? विभिन्न?

जवाबों:


1863

Sass एक सीएसएस प्री-प्रोसेसर है जिसमें सिंटैक्स एडवांसमेंट है। उन्नत सिंटैक्स में स्टाइल शीट को प्रोग्राम द्वारा संसाधित किया जाता है, और नियमित सीएसएस स्टाइल शीट में बदल दिया जाता है। हालाँकि, वे CSS मानक का विस्तार नहीं करते हैं

CSS चरों का समर्थन किया जाता है और उनका उपयोग किया जा सकता है लेकिन साथ ही पूर्व-प्रोसेसर चरों का भी नहीं।

एससीएसएस और सैस के बीच अंतर के लिए, सास प्रलेखन पृष्ठ पर इस पाठ को सवाल का जवाब देना चाहिए:

सैस के लिए दो सिंटेक्स उपलब्ध हैं। पहला, जिसे SCSS (Sassy CSS) के रूप में जाना जाता है और इस संदर्भ में उपयोग किया जाता है, CSS के वाक्य-विन्यास का विस्तार है। इसका मतलब यह है कि प्रत्येक वैध सीएसएस स्टाइलशीट एक समान अर्थ वाली एससीएसएस फाइल है। इस वाक्यविन्यास को नीचे वर्णित सैस सुविधाओं के साथ बढ़ाया गया है। इस सिंटैक्स का उपयोग करने वाली फ़ाइलों में .scss एक्सटेंशन होता है।

दूसरा और पुराना सिंटैक्स , जिसे इंडेंट सिंटैक्स (या कभी-कभी "सैस") के रूप में जाना जाता है, सीएसएस लिखने का अधिक संक्षिप्त तरीका प्रदान करता है। यह चयनकर्ताओं के घोंसले के शिकार करने के लिए कोष्ठक के बजाय इंडेंटेशन का उपयोग करता है, और अलग-अलग गुणों के लिए अर्धविराम के बजाय नईलाइन्स। इस सिंटैक्स का उपयोग करने वाली फ़ाइलों में .sass एक्सटेंशन होता है।

हालाँकि, यह सब केवल सास प्री-कंपाइलर के साथ काम करता है जो अंत में CSS बनाता है। यह स्वयं CSS मानक का विस्तार नहीं है।


228
सिंटैक्स का चयन करते समय, ध्यान रखें कि केवल स्कैसओवरफ़्लो और ब्राउज़र के विकास टूल से सीएसएस को कॉपी करने और चिपकाने की अनुमति देता है, जबकि सैस में आपको सिंटैक्स को समायोजित करना होगा
फिशबोन


एक और गेटा: 2019-05-10 के अनुसार, SASS अभी भी मल्टी-लाइन एक्सप्रेशन का समर्थन नहीं करता है, इसलिए बड़ी सूची / मानचित्रों को या तो एक-लाइनर होना चाहिए, बहुत सारे फंक्शन कॉल का उपयोग करके परिभाषित किया गया है, या SCSS फ़ाइलों में परिभाषित किया गया है। यह अभी भी एक नियोजित विशेषता है, लेकिन मुझे यकीन नहीं है कि वास्तव में कार्यान्वयन पर कोई आंदोलन है या अभी तक नहीं हुआ है।
जोसेफ सिकोरस्की

12
@ के बीच 0x1ad2 विकल्प scssऔर sassसिर्फ व्यक्तिगत वरीयता की तुलना में अधिक है इन दिनों। scssअधिक प्रचलित है - जैसे सबसे लोकप्रिय सीएसएस चौखटे में इस्तेमाल किया Bootstrap, Foundation, Materializeआदि मुख्य यूआई चौखटे पक्ष scssसे अधिक sassकोणीय, प्रतिक्रिया, Vue - डिफ़ॉल्ट रूप से। किसी भी ट्यूटोरियल या क़ौम आम तौर पर इस्तेमाल करेगा scssजैसे create-react-app facebook.github.io/create-react-app/docs/...
Drenai

@fishbone पूरी तरह से सच नहीं है, यदि आप एक सभ्य कोड संपादक का उपयोग करते हैं, तो यह ब्राउज़र से कॉपी की गई शैलियों को संभाल सकता है और खुद को फिर से इंडेंट करने के लिए लिखता है
Miro Krsjak

617

मैं उन डेवलपर्स में से एक हूं, जिन्होंने सैस बनाने में मदद की।

अंतर यूआई है। पाठ बाहरी के नीचे वे समान हैं। यही कारण है कि sass और scss फाइलें एक दूसरे को आयात कर सकती हैं। दरअसल, Sass में चार सिंटेक्स पार्सर हैं: scss, sass, CSS और कम। ये सभी एक अलग सिंटैक्स को एक सार सिंटैक्स ट्री में परिवर्तित करते हैं, जिसे आगे सीएसएस आउटपुट में संसाधित किया जाता है या यहां तक ​​कि किसी अन्य प्रारूप में सैस-कन्वर्ट टूल के माध्यम से।

आपको सबसे ज्यादा पसंद आने वाले वाक्यविन्यास का उपयोग करें, दोनों पूरी तरह से समर्थित हैं और यदि आप अपना मन बदलते हैं तो आप बाद में उनके बीच बदल सकते हैं।


55
माफ़ कीजियेगा? क्या मैंने उसे सही पढ़ा? क्या Sass वास्तव में कम फ़ाइलों को सही ढंग से आयात कर सकता है? मिश्रणों / चर के बीच कोई तालमेल है?
पिलाउ

8
मानक सीएसएस की समानता समूह के वातावरण में अधिक महत्वपूर्ण हो सकती है जहां ऐसे लोग हैं जिन्हें आपके कोड को पढ़ने की आवश्यकता है, लेकिन केवल कभी-कभी, और उनके पास एक नया सिंटैक्स सीखने के लिए समय / रुचि नहीं है।
c रोनाल्ड

5
क्या "UI" का अर्थ "भाषा" है?
djechlin 16

@djechlin - हाँ, यहाँ "UI" की मेरी व्याख्या फ़ाइल के प्रोग्रामर-फेसिंग सिंटैक्स होगी। जैसे अर्धविराम या नहीं, आदि
ओरियन एल्जेनिल

10
उत्तर में "UI" को आमतौर पर समझा जाने वाले शब्द के साथ प्रतिस्थापित किया जाना चाहिए, जैसा कि @orionelenzil ने सुझाव दिया है?
माइकल फ्रीजिम

382

सास .sassफ़ाइल नेत्रहीन .scssफ़ाइल से अलग है , उदा

Example.sass - sass पुराना सिंटैक्स है

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - सैस 3 के रूप में sassy सीएसएस नया वाक्यविन्यास है

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

किसी भी मान्य सीएसएस दस्तावेज़ को केवल विस्तार से बदलकर Sassy CSS (SCSS) में परिवर्तित किया जा सकता .cssहै .scss


@ नोवोकेन +1, मैं सहमत हूं। C ++ प्रोग्रामर के रूप में, मैं कोष्ठक और अर्धविराम पसंद करता हूं। Btw, मैं एक सवाल है, से रूपांतरण करता है .scssके .cssरूप में एक ही .cssकरने के लिए .scss?
JW.ZG

1
यह अधिक है कि मैं ऊपर दिए गए उत्तरों के साथ तुलना करने के बारे में क्या परवाह करता हूं ... पढ़ने में बहुत आलसी ;-)
LYu

9
@ JW.ZG, यह रूपांतरण नहीं है, मूल निवासी .cssकेवल मान्य होता है .scss। जैसे ही आप scss विशिष्ट कोड जोड़ते हैं, फ़ाइल का नाम वापस बदलना अमान्य css फ़ाइल के रूप में समाप्त हो जाएगा। cssएक वर्ग है, और scssएक आयत है। सभी वर्ग आयत हैं, लेकिन सभी आयत वर्ग नहीं हैं।
अनुदान

145

Sass ( Syntactically Awesome StyleSheets ) में दो वाक्यविन्यास हैं:

  • एक नया: SCSS ( Sassy CSS )
  • और एक पुराना, मूल: इंडेंट सिंटैक्स, जो मूल सैस है और इसे सैस भी कहा जाता है ।

इसलिए वे दोनों अलग-अलग संभावित सिंटैक्स के साथ सास प्रीप्रोसेसर का हिस्सा हैं ।

SCSS और मूल Sass के बीच सबसे महत्वपूर्ण अंतर :

SCSS :

  • सिंटैक्स CSS के समान है (इतना है कि प्रत्येक नियमित वैध CSS3 भी मान्य SCSS है , लेकिन दूसरी दिशा में संबंध स्पष्ट रूप से नहीं होता है)

  • ब्रेसिज़ का उपयोग करता है {}

  • अर्ध-कॉलोन का उपयोग करता है ;
  • असाइनमेंट साइन है :
  • एक बनाने के लिए mixin इसे इस्तेमाल करता @mixinनिर्देश
  • उपयोग करने के लिए mixin इसके साथ इससे पहले आने @includeके निर्देश
  • फ़ाइलों में .scss एक्सटेंशन होता है।

मूल सैस :

  • सिंटेक्स रूबी के समान है
  • कोई ब्रेसिज़ नहीं
  • कोई सख्त आक्रोश नहीं
  • कोई अर्ध-कॉलन नहीं
  • =इसके बजाय असाइनमेंट साइन है:
  • एक मिश्रण बनाने के लिए यह =संकेत का उपयोग करता है
  • मिक्सिन का उपयोग करने के लिए इसे +संकेत के साथ पहले रखा जाता है
  • फाइलों में .sass एक्सटेंशन होता है।

कुछ लोग Sass को पसंद करते हैं , मूल सिंटैक्स - जबकि अन्य SCSS को पसंद करते हैं । किसी भी तरह से, लेकिन यह ध्यान देने योग्य है कि सास का इंडेंट सिंटैक्स नहीं रहा है और इसे कभी भी अपदस्थ नहीं किया जाएगा

Sass- रूपांतरण के साथ रूपांतरण :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

सास और SCSS प्रलेखन


14
अजीब बात है कि इस तरह के स्पष्ट और संक्षिप्त जवाब में दूसरों की तुलना में इतने कम वोट हैं। मैं यह समझने के लिए स्रोतों के ढेर से गुज़र रहा हूं कि सास और एससीएस के बीच क्या अंतर हैं और आखिरकार यह पाया गया कि मुझे तुरंत ज्ञान मिलता है। कुछ वर्तनी / व्याकरण त्रुटियों को छोड़कर अच्छी नौकरी।
tnkh

3
@TonyNg धन्यवाद। मुझे खुशी है कि मैं आपकी मदद कर सका। अंकों के संबंध में, यह इतना निश्चित है क्योंकि मैंने बहुत देर से उत्तर दिया - प्रश्न पूछने के लगभग 6 साल बाद। मुझे ठीक करने के लिए स्वतंत्र महसूस करें, जहां मैंने वर्तनी या व्याकरण संबंधी त्रुटियां की हैं।
सिम्हुमेलेको

3
अलग सिंटैक्स दिखाने के लिए एक सरल उदाहरण जोड़ें और यह उत्तर एकदम सही होगा।
होगन

3
स्वच्छ उत्तर, प्रभावशाली
हृदय रहमान

3
महान जवाब यह है!
मोहम्मद अफ्रशतेह

80

इसका सिंटैक्स अलग है, और यह मुख्य समर्थक (या आपके दृष्टिकोण पर निर्भर करता है) है।

मैं दूसरों की कही गई बातों को ज्यादा दोहराने की कोशिश नहीं करूंगा, आप आसानी से उसे गूगल कर सकते हैं, लेकिन इसके बजाय, मैं अपने अनुभव से कुछ बातें कहना चाहूंगा, कभी-कभी एक ही प्रोजेक्ट में भी।

SASS समर्थक

  • क्लीनर - यदि आप पाइथन, रूबी (आप प्रतीक जैसे वाक्य रचना के साथ भी प्रॉप्स लिख सकते हैं) या कॉफ़ीस्क्रिप्ट दुनिया से आ रहे हैं, तो यह आपके लिए बहुत स्वाभाविक है - मिक्सिंग, फ़ंक्शंस और आमतौर पर किसी भी पुन: प्रयोज्य सामान को लिखना .sassबहुत आसान है 'और .scss(व्यक्तिपरक) की तुलना में पठनीय ।

स स स

  • व्हाट्सएप संवेदनशील (व्यक्तिपरक), मैं इसे अन्य भाषाओं में बुरा नहीं मानता, लेकिन यहां CSS में यह मुझे परेशान करता है (मुद्दे: नकल, टैब बनाम अंतरिक्ष युद्ध, आदि)।
  • कोई इनलाइन नियम नहीं (यह मेरे लिए गेम ब्रेकिंग था), आप ऐसा नहीं body color: redकर सकते जैसे कि आप .scss में कर सकते हैंbody {color: red}
  • अन्य विक्रेता सामान आयात करना, वेनिला सीएसएस स्निपेट्स की नकल करना - कुछ समय बाद असंभव नहीं बल्कि बहुत उबाऊ। समाधान या तो आपके प्रोजेक्ट में .scssफ़ाइलें (फ़ाइलों के साथ .sass) है या उन्हें परिवर्तित करने के लिए है .sass

इसके अलावा - वे एक ही काम करते हैं।

अब, मुझे जो करना पसंद है वह है मिक्स और वैरिएबल .sassऔर कोड लिखना जो कोड को वास्तव में CSS में संकलित करेगा .scss(यानी विज़ुअल स्टूडियो के लिए समर्थन नहीं है, .sassलेकिन जब भी मैं रेल परियोजनाओं पर काम करता हूं तो मैं आमतौर पर उनमें से दो को संयोजित करता हूं, नहीं inc की एक फाइल में)।

हाल ही में, मैं स्टाइलस को एक पूर्णकालिक सीएसएस प्रीप्रोसेसर के लिए मौका देने पर विचार कर रहा हूं क्योंकि यह आपको एक फाइल में (कुछ अन्य विशेषताओं के बीच) दो वाक्यविन्यासों को संयोजित करने की अनुमति देता है। यह एक टीम के लिए एक अच्छी दिशा नहीं हो सकती है लेकिन जब आप इसे अकेले बनाए रख रहे हैं - यह ठीक है। स्टाइलस वास्तव में सबसे अधिक लचीला होता है जब वाक्यविन्यास प्रश्न में होता है।

और अंतिम वाक्यविन्यास .scssबनाम .sassवाक्यविन्यास तुलना के लिए:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

4
@cimmanon इसमें स्पष्ट रूप से वर्तनी वाले पेशेवरों और विपक्षों को शामिल किया गया है। इस और अन्य उत्तरों के बीच यही अंतर है। मैं लाल रंग से बाहर आने के लिए उकसाया। मुझे लगा कि यह उत्तर के ओवरलैप के सामान्य स्वर आरेख के बावजूद भी उपयोगी था जो कि हर दूसरे SO पोस्ट के पास है। यह किसी के लिए उपयोगी हो सकता है बस दो रास्तों पर चुनाव कर सकता है। मुझे भी लगता है कि यह स्वीकार किए गए उत्तर से थोड़ा बेहतर है क्योंकि यह वास्तव में सिर्फ "सैस अलग है क्योंकि यह SCSS नहीं है" कहने के बजाय भाषा का अंतर दिखाता है, जो मेरे लिए बेकार है। मैं व्यक्तिगत उपयोग के सामान के बिना कर सकता था, लेकिन फिर भी :)
coblr

61

भाषा के मुखपृष्ठ से

Sass के दो वाक्यविन्यास हैं। नया मुख्य सिंटैक्स (Sass 3 के रूप में) "SCSS" ("Sassy CSS" के लिए) के रूप में जाना जाता है , और CSS3 के सिंटैक्स का एक सुपरसेट है। इसका मतलब यह है कि प्रत्येक मान्य CSS3 स्टाइलशीट मान्य SCSS भी है। SCSS फाइलें एक्सटेंशन .scss का उपयोग करती हैं।

दूसरा, पुराने सिंटैक्स को इंडेंट सिंटैक्स (या सिर्फ "सैस") के रूप में जाना जाता है। Haml के स्वभाव से प्रेरित होकर, यह उन लोगों के लिए अभिप्रेत है जो CSS की समानता पर सहमति पसंद करते हैं। कोष्ठक और अर्धविराम के बजाय, यह ब्लॉकों को निर्दिष्ट करने के लिए लाइनों के इंडेंटेशन का उपयोग करता है। यद्यपि अब प्राथमिक सिंटैक्स नहीं है, इंडेंट सिंटैक्स का समर्थन जारी रहेगा। इंडेंटेड सिंटैक्स में फाइलें एक्सटेंशन .sass का उपयोग करती हैं।

SASS एक व्याख्या की गई भाषा है जो सीएसएस से बाहर निकलती है। सैस की संरचना सीएसएस (दूर से) की तरह दिखती है , लेकिन यह मुझे लगता है कि विवरण थोड़ा भ्रामक है; यह सीएसएस, या एक एक्सटेंशन के लिए एक प्रतिस्थापन नहीं है। यह एक दुभाषिया है जो अंत में सीएसएस को बाहर निकालता है, इसलिए सैस में अभी भी सामान्य सीएसएस की सीमाएं हैं, लेकिन यह उन्हें सरल कोड के साथ मास्क करता है।


22

मूल अंतर वाक्य रचना है। जबकि SASS में सफ़ेद स्थान और कोई अर्धविराम के साथ एक ढीला वाक्यविन्यास है, SCSS सीएसएस के समान है।


21

SASS Syntactically Awesome StyleSheets के लिए खड़ा है। यह CSS का विस्तार है जो मूल भाषा में शक्ति और लालित्य जोड़ता है। SASS को कुछ चेज के साथ SCSS के रूप में नाम दिया गया है, लेकिन पुरानी SASS भी है। इससे पहले कि आप SCSS या SASS का उपयोग करें नीचे का अंतर देखें।

यहां छवि विवरण दर्ज करें

कुछ SCSS और SASS सिंटैक्स का एक उदाहरण:

एससीएसएस

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

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

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

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

एस.ए.एस.एस.

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

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

संकलन के बाद आउटपुट सीएसएस (दोनों के लिए समान)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

अधिक गाइड के लिए आप आधिकारिक वेबसाइट देख सकते हैं ।


16

सैस पहले वाला था, और सिंटैक्स थोड़ा अलग है। उदाहरण के लिए, एक मिश्रण सहित:

Sass: +mixinname()
Scss: @include mixinname()

सैस घुंघराले कोष्ठक और अर्धविरामों को नजरअंदाज करता है और घोंसले का शिकार होता है, जिसे मैंने अधिक उपयोगी पाया।


13

एसएएसएस और एससीएसएस लेख के बीच का अंतर विवरण में अंतर बताता है। एसएएसएस और एससीएसएस विकल्पों से भ्रमित न हों, हालांकि मैं भी शुरू में था, एसएससी एससीएस सीएसएस है और अगली पीढ़ी का एससस है।

अगर इससे कोई मतलब नहीं है तो आप नीचे दिए गए कोड में अंतर देख सकते हैं।

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

ऊपर दिए गए कोड में हम उपयोग करते हैं; घोषणाओं को अलग करना। मैंने इस बिंदु को और स्पष्ट करने के लिए एक लाइन पर .border के लिए सभी घोषणाओं को जोड़ा है। इसके विपरीत, नीचे दिए गए SASS कोड को इंडेंटेशन के साथ अलग-अलग लाइनों पर होना चाहिए और इसका कोई उपयोग नहीं है;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

आप नीचे दिए गए CSS से देख सकते हैं कि SCSS शैली पुराने SASS दृष्टिकोण की तुलना में नियमित CSS के समान है।

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

मुझे लगता है कि इन दिनों अधिकांश समय अगर कोई यह उल्लेख करता है कि वे सास के साथ काम कर रहे हैं तो वे पारंपरिक। सस्स तरीके के बजाय संलेखन का उल्लेख कर रहे हैं।


12

sassरूबी, जेड आदि के समान मूल रूबी सिंटैक्स-जैसे है ...

उन वाक्यविन्यासों में, हम उपयोग नहीं करते हैं {}, इसके बजाय हम सफेद रिक्त स्थान के साथ जाते हैं, इसका भी कोई फायदा नहीं है ;...

में scssवाक्यविन्यास अधिक की तरह हैं CSS, लेकिन जैसे अधिक विकल्पों के लिए हो रही के साथ: नेस्टिंग घोषित, आदि, समान करने के लिए lessऔर अन्य पूर्व प्रसंस्करण CSS...

वे मूल रूप से एक ही बात करते हैं, लेकिन मैं वाक्य रचना अंतर है, पर देखो देखने के लिए प्रत्येक की तर्ज की जोड़ी डाल {}, ;और spaces:

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

$width: 100px
$color: green

div
  width: $width
  background-color: $color

एससीएसएस:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

6

कॉम्पैक्ट जवाब:

SCSS, Sass CSS प्री-प्रोसेसर द्वारा समर्थित मुख्य सिंटैक्स को संदर्भित करता है

  • .scssसास द्वारा समर्थित मानक वाक्यविन्यास का प्रतिनिधित्व करने के साथ समाप्त होने वाली फाइलें । SCSS CSS का एक सुपरसेट है।
  • .sassरूबी दुनिया में उत्पन्न होने वाले सैस द्वारा समर्थित "पुराने" सिंटैक्स का प्रतिनिधित्व करने वाली फाइलें समाप्त होती हैं।

4

SASS Syntactically Awesome Style Sheets है और CSS का एक विस्तार है जो नेस्टेड नियम, इनहेरिटेंस, मिक्सिंस की सुविधाएँ प्रदान करता है जबकि SCSS Sassy Cascaded Style Sheets है जो CSS के समान है और CSS और SASS के बीच अंतराल और असंगतताओं को भरता है। यह एमआईटी लाइसेंस के तहत लाइसेंस प्राप्त था। इस लेख में मतभेदों के बारे में अधिक जानकारी है: https://www.educba.com/sass-vs-scss/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.