जवाबों:
Sass एक सीएसएस प्री-प्रोसेसर है जिसमें सिंटैक्स एडवांसमेंट है। उन्नत सिंटैक्स में स्टाइल शीट को प्रोग्राम द्वारा संसाधित किया जाता है, और नियमित सीएसएस स्टाइल शीट में बदल दिया जाता है। हालाँकि, वे CSS मानक का विस्तार नहीं करते हैं ।
CSS चरों का समर्थन किया जाता है और उनका उपयोग किया जा सकता है लेकिन साथ ही पूर्व-प्रोसेसर चरों का भी नहीं।
एससीएसएस और सैस के बीच अंतर के लिए, सास प्रलेखन पृष्ठ पर इस पाठ को सवाल का जवाब देना चाहिए:
सैस के लिए दो सिंटेक्स उपलब्ध हैं। पहला, जिसे SCSS (Sassy CSS) के रूप में जाना जाता है और इस संदर्भ में उपयोग किया जाता है, CSS के वाक्य-विन्यास का विस्तार है। इसका मतलब यह है कि प्रत्येक वैध सीएसएस स्टाइलशीट एक समान अर्थ वाली एससीएसएस फाइल है। इस वाक्यविन्यास को नीचे वर्णित सैस सुविधाओं के साथ बढ़ाया गया है। इस सिंटैक्स का उपयोग करने वाली फ़ाइलों में .scss एक्सटेंशन होता है।
दूसरा और पुराना सिंटैक्स , जिसे इंडेंट सिंटैक्स (या कभी-कभी "सैस") के रूप में जाना जाता है, सीएसएस लिखने का अधिक संक्षिप्त तरीका प्रदान करता है। यह चयनकर्ताओं के घोंसले के शिकार करने के लिए कोष्ठक के बजाय इंडेंटेशन का उपयोग करता है, और अलग-अलग गुणों के लिए अर्धविराम के बजाय नईलाइन्स। इस सिंटैक्स का उपयोग करने वाली फ़ाइलों में .sass एक्सटेंशन होता है।
हालाँकि, यह सब केवल सास प्री-कंपाइलर के साथ काम करता है जो अंत में CSS बनाता है। यह स्वयं CSS मानक का विस्तार नहीं है।
scss
और sass
सिर्फ व्यक्तिगत वरीयता की तुलना में अधिक है इन दिनों। scss
अधिक प्रचलित है - जैसे सबसे लोकप्रिय सीएसएस चौखटे में इस्तेमाल किया Bootstrap
, Foundation
, Materialize
आदि मुख्य यूआई चौखटे पक्ष scss
से अधिक sass
कोणीय, प्रतिक्रिया, Vue - डिफ़ॉल्ट रूप से। किसी भी ट्यूटोरियल या क़ौम आम तौर पर इस्तेमाल करेगा scss
जैसे create-react-app
facebook.github.io/create-react-app/docs/...
मैं उन डेवलपर्स में से एक हूं, जिन्होंने सैस बनाने में मदद की।
अंतर यूआई है। पाठ बाहरी के नीचे वे समान हैं। यही कारण है कि sass और scss फाइलें एक दूसरे को आयात कर सकती हैं। दरअसल, Sass में चार सिंटेक्स पार्सर हैं: scss, sass, CSS और कम। ये सभी एक अलग सिंटैक्स को एक सार सिंटैक्स ट्री में परिवर्तित करते हैं, जिसे आगे सीएसएस आउटपुट में संसाधित किया जाता है या यहां तक कि किसी अन्य प्रारूप में सैस-कन्वर्ट टूल के माध्यम से।
आपको सबसे ज्यादा पसंद आने वाले वाक्यविन्यास का उपयोग करें, दोनों पूरी तरह से समर्थित हैं और यदि आप अपना मन बदलते हैं तो आप बाद में उनके बीच बदल सकते हैं।
सास .sass
फ़ाइल नेत्रहीन .scss
फ़ाइल से अलग है , उदा
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
$color: red;
@mixin my-border($color) {
border: 1px solid $color;
}
body {
background: $color;
@include my-border(green);
}
किसी भी मान्य सीएसएस दस्तावेज़ को केवल विस्तार से बदलकर Sassy CSS (SCSS) में परिवर्तित किया जा सकता .css
है .scss
।
.scss
के .css
रूप में एक ही .css
करने के लिए .scss
?
.css
केवल मान्य होता है .scss
। जैसे ही आप scss विशिष्ट कोड जोड़ते हैं, फ़ाइल का नाम वापस बदलना अमान्य css फ़ाइल के रूप में समाप्त हो जाएगा। css
एक वर्ग है, और scss
एक आयत है। सभी वर्ग आयत हैं, लेकिन सभी आयत वर्ग नहीं हैं।
Sass ( Syntactically Awesome StyleSheets ) में दो वाक्यविन्यास हैं:
इसलिए वे दोनों अलग-अलग संभावित सिंटैक्स के साथ सास प्रीप्रोसेसर का हिस्सा हैं ।
SCSS और मूल Sass के बीच सबसे महत्वपूर्ण अंतर :
SCSS :
सिंटैक्स CSS के समान है (इतना है कि प्रत्येक नियमित वैध CSS3 भी मान्य SCSS है , लेकिन दूसरी दिशा में संबंध स्पष्ट रूप से नहीं होता है)
ब्रेसिज़ का उपयोग करता है {}
;
:
@mixin
निर्देश@include
के निर्देशमूल सैस :
=
इसके बजाय असाइनमेंट साइन है:
=
संकेत का उपयोग करता है+
संकेत के साथ पहले रखा जाता हैकुछ लोग Sass को पसंद करते हैं , मूल सिंटैक्स - जबकि अन्य SCSS को पसंद करते हैं । किसी भी तरह से, लेकिन यह ध्यान देने योग्य है कि सास का इंडेंट सिंटैक्स नहीं रहा है और इसे कभी भी अपदस्थ नहीं किया जाएगा ।
Sass- रूपांतरण के साथ रूपांतरण :
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
इसका सिंटैक्स अलग है, और यह मुख्य समर्थक (या आपके दृष्टिकोण पर निर्भर करता है) है।
मैं दूसरों की कही गई बातों को ज्यादा दोहराने की कोशिश नहीं करूंगा, आप आसानी से उसे गूगल कर सकते हैं, लेकिन इसके बजाय, मैं अपने अनुभव से कुछ बातें कहना चाहूंगा, कभी-कभी एक ही प्रोजेक्ट में भी।
SASS समर्थक
.sass
बहुत आसान है 'और .scss
(व्यक्तिपरक) की तुलना में पठनीय ।स स स
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
भाषा के मुखपृष्ठ से
Sass के दो वाक्यविन्यास हैं। नया मुख्य सिंटैक्स (Sass 3 के रूप में) "SCSS" ("Sassy CSS" के लिए) के रूप में जाना जाता है , और CSS3 के सिंटैक्स का एक सुपरसेट है। इसका मतलब यह है कि प्रत्येक मान्य CSS3 स्टाइलशीट मान्य SCSS भी है। SCSS फाइलें एक्सटेंशन .scss का उपयोग करती हैं।
दूसरा, पुराने सिंटैक्स को इंडेंट सिंटैक्स (या सिर्फ "सैस") के रूप में जाना जाता है। Haml के स्वभाव से प्रेरित होकर, यह उन लोगों के लिए अभिप्रेत है जो CSS की समानता पर सहमति पसंद करते हैं। कोष्ठक और अर्धविराम के बजाय, यह ब्लॉकों को निर्दिष्ट करने के लिए लाइनों के इंडेंटेशन का उपयोग करता है। यद्यपि अब प्राथमिक सिंटैक्स नहीं है, इंडेंट सिंटैक्स का समर्थन जारी रहेगा। इंडेंटेड सिंटैक्स में फाइलें एक्सटेंशन .sass का उपयोग करती हैं।
SASS एक व्याख्या की गई भाषा है जो सीएसएस से बाहर निकलती है। सैस की संरचना सीएसएस (दूर से) की तरह दिखती है , लेकिन यह मुझे लगता है कि विवरण थोड़ा भ्रामक है; यह सीएसएस, या एक एक्सटेंशन के लिए एक प्रतिस्थापन नहीं है। यह एक दुभाषिया है जो अंत में सीएसएस को बाहर निकालता है, इसलिए सैस में अभी भी सामान्य सीएसएस की सीमाएं हैं, लेकिन यह उन्हें सरल कोड के साथ मास्क करता है।
मूल अंतर वाक्य रचना है। जबकि SASS में सफ़ेद स्थान और कोई अर्धविराम के साथ एक ढीला वाक्यविन्यास है, SCSS सीएसएस के समान है।
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);
}
अधिक गाइड के लिए आप आधिकारिक वेबसाइट देख सकते हैं ।
सैस पहले वाला था, और सिंटैक्स थोड़ा अलग है। उदाहरण के लिए, एक मिश्रण सहित:
Sass: +mixinname()
Scss: @include mixinname()
सैस घुंघराले कोष्ठक और अर्धविरामों को नजरअंदाज करता है और घोंसले का शिकार होता है, जिसे मैंने अधिक उपयोगी पाया।
एसएएसएस और एससीएसएस लेख के बीच का अंतर विवरण में अंतर बताता है। एसएएसएस और एससीएसएस विकल्पों से भ्रमित न हों, हालांकि मैं भी शुरू में था, एसएससी एससीएस सीएसएस है और अगली पीढ़ी का एससस है।
अगर इससे कोई मतलब नहीं है तो आप नीचे दिए गए कोड में अंतर देख सकते हैं।
/* 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;
}
मुझे लगता है कि इन दिनों अधिकांश समय अगर कोई यह उल्लेख करता है कि वे सास के साथ काम कर रहे हैं तो वे पारंपरिक। सस्स तरीके के बजाय संलेखन का उल्लेख कर रहे हैं।
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;
}
कॉम्पैक्ट जवाब:
SCSS, Sass CSS प्री-प्रोसेसर द्वारा समर्थित मुख्य सिंटैक्स को संदर्भित करता है ।
.scss
सास द्वारा समर्थित मानक वाक्यविन्यास का प्रतिनिधित्व करने के साथ समाप्त होने वाली फाइलें । SCSS CSS का एक सुपरसेट है।.sass
रूबी दुनिया में उत्पन्न होने वाले सैस द्वारा समर्थित "पुराने" सिंटैक्स का प्रतिनिधित्व करने वाली फाइलें समाप्त होती हैं।SASS Syntactically Awesome Style Sheets है और CSS का एक विस्तार है जो नेस्टेड नियम, इनहेरिटेंस, मिक्सिंस की सुविधाएँ प्रदान करता है जबकि SCSS Sassy Cascaded Style Sheets है जो CSS के समान है और CSS और SASS के बीच अंतराल और असंगतताओं को भरता है। यह एमआईटी लाइसेंस के तहत लाइसेंस प्राप्त था। इस लेख में मतभेदों के बारे में अधिक जानकारी है: https://www.educba.com/sass-vs-scss/