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

Question

मैं CSS को बहुत अच्छी तरह से जानता हूं, लेकिन Sass के बारे में उलझन में हूं। SCSS CSS से अलग कैसे है, और अगर मैं CSS के बजाय SCSS का उपयोग करता हूँ तो क्या यह वही काम करेगा?

Comments

SCSS CSS का एक सुपरसेट है। नीचे दिए गए लिंक से आपको बेहतर समझ के लिए मदद मिलेगी stackoverflow.com/a/51423768/5852550

— श्रीकृष्णा

Answer 1

Idriss जवाब के अलावा :

सीएसएस

CSS में हम कोड को दर्शाए गए bellow के रूप में पूरी लंबाई में लिखते हैं।

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

एससीएसएस

एससीएसएस में हम इस कोड को छोटा कर सकते हैं @mixinताकि हमें बार-बार लिखने colorऔर widthसंपत्तियों की जरूरत न पड़े। हम इसे एक फ़ंक्शन के माध्यम से परिभाषित कर सकते हैं, इसी तरह PHP या अन्य भाषाओं में।

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

एस.ए.एस.एस.

एसएएसएस में, एससीएसएस की तुलना में पूरी संरचना नेत्रहीन और साफ है।

• जब आप कॉपी और पेस्ट का उपयोग कर रहे हों तो यह सफेद स्थान के प्रति संवेदनशील होता है,

• ऐसा लगता है कि यह वर्तमान में इनलाइन सीएसएस का समर्थन नहीं करता है।

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color

Comments

अगर im responsive.dataTables.scss का उपयोग करता है, तो responsive.ataTables.min.css का उपयोग करता है तो यह काम करता है या नहीं? यह वही है?

— उर्वी_२०१५ २५'१

बहुत बढ़िया जवाब। सटीक और व्याख्यात्मक उत्तर।

— मुहम्मद उस्मान

@ उर्वी_204 यदि आप हाश द्वारा दिए गए उत्तर से संतुष्ट हैं, तो आप इसे एक सही उत्तर के रूप में चुन सकते हैं)

— इस्लाम मुर्तजाव

Answer 2

CSS एक स्टाइलिंग भाषा है जिसे कोई भी ब्राउज़र वेबपेजों को समझता है।

SCSS एक विशेष प्रकार की फ़ाइल है SASS, जो रूबी में लिखा गया प्रोग्राम है जो CSSब्राउज़र के लिए स्टाइल शीट को इकट्ठा करता है, और जानकारी के SASSलिए CSS, वैरिएबल, नेस्टिंग और बहुत कुछ की तरह अतिरिक्त कार्यक्षमता को जोड़ता है जो लेखन को CSSआसान और तेज़ बना सकता है।
SCSS फाइलें सर्वर द्वारा एक पारंपरिक के उत्पादन के लिए एक वेब ऐप चलाने के लिए संसाधित की जाती हैं, CSSजिसे आपका ब्राउज़र समझ सकता है।

Answer 3

cssचर भी है। आप उन्हें इस तरह से उपयोग कर सकते हैं:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Answer 4

और यह कम है

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Answer 5

चर परिभाषाएँ सही:

$      => SCSS, SASS
--     => CSS
@      => LESS

सभी उत्तर अच्छे हैं लेकिन सवालों के जवाब से थोड़ा अलग है

"सैस के बारे में। एससीएसएस सीएसएस से कैसे अलग है" : एसएसएसएस अच्छी तरह से CSS3 सिंटैक्स का गठन किया गया है । इसे बनाने के लिए sass प्रीप्रोसेसर का उपयोग करता है।

और अगर मैं CSS के बजाय SCSS का उपयोग करता हूं तो क्या यह समान काम करेगा? हाँ। यदि आपकी विचारधारा sass प्रीप्रोसेसर का समर्थन करती है। की तुलना में यह एक ही काम करेगा।

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

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

---

• फ़ुहार सूचना:

---

सीएसएस प्रीप्रोसेसर क्या है?

सीएसएस अपने आप में जटिल तर्क और कार्यक्षमता से रहित है जिसे पुन: प्रयोज्य और संगठित कोड लिखना आवश्यक है। नतीजतन, एक डेवलपर सीमाओं से बंधा होता है और कोड रखरखाव और स्केलेबिलिटी में अत्यधिक कठिनाई का सामना करना पड़ता है, खासकर जब व्यापक कोड और कई सीएसएस स्टाइलशीट वाले बड़े प्रोजेक्ट्स पर काम करते हैं। यह वह जगह है जहाँ CSS Preprocessors बचाव के लिए आते हैं।

एक सीएसएस प्रीप्रोसेसर एक उपकरण है जिसका उपयोग डिफ़ॉल्ट वेनिला सीएसएस की मूल कार्यक्षमता को अपनी स्क्रिप्टिंग भाषा के माध्यम से करने के लिए किया जाता है। यह जटिल तार्किक सिंटैक्स का उपयोग करने में हमारी मदद करता है जैसे - चर, फ़ंक्शंस, मिश्रण, कोड नेस्टिंग, और विरासत में कुछ नाम, अपने वैनिला सीएसएस को सुपरचार्ज करना। CSS Preprocessors का उपयोग करके, आप सीमलेस कार्यों को स्वचालित रूप से स्वचालित कर सकते हैं, पुन: प्रयोज्य कोड स्निपेट का निर्माण कर सकते हैं, कोड पुनरावृत्ति और ब्लोटिंग से बच सकते हैं और नेस्टेड कोड ब्लॉक लिख सकते हैं जो अच्छी तरह से व्यवस्थित और पढ़ने में आसान हैं। हालांकि, ब्राउज़र केवल देशी वेनिला सीएसएस कोड को समझ सकते हैं और सीएसएस प्रीप्रोसेसर सिंटैक्स की व्याख्या करने में असमर्थ होंगे। इसलिए, जटिल और उन्नत प्रीप्रोसेसर सिंटैक्स को पहले देशी सीएसएस सिंटैक्स में संकलित करने की आवश्यकता होती है जिसे तब क्रॉस ब्राउज़र संगतता मुद्दों से बचने के लिए ब्राउज़र द्वारा व्याख्या की जा सकती है।

लेख में आगे बढ़ते हुए, हम उन 3 सबसे लोकप्रिय CSS Preprocessors पर नज़र डालेंगे जो वर्तमान में दुनिया भर के डेवलपर्स अर्थात Sass, LESS और Stylus द्वारा उपयोग की जा रही हैं। इससे पहले कि आप सास बनाम लेस बनाम स्टाइलस के बीच विजेता का फैसला करें, हमें पहले उन्हें विस्तार से जानने दें।

सैस - सिंथेटिक रूप से बहुत बढ़िया स्टाइल शीट्स

सैस "सिंथेटिक रूप से विस्मयकारी स्टाइल शीट्स" के लिए संक्षिप्त नाम है। सैस न केवल दुनिया में सबसे लोकप्रिय सीएसएस प्रीप्रोसेसर है, बल्कि सबसे पुराना भी है, जिसे 2006 में हैम्पटन कैटलिन द्वारा लॉन्च किया गया था और बाद में इसे नताली वेइज़ानबाम द्वारा विकसित किया गया था। हालांकि सैस को रूबी भाषा में लिखा गया है, लेकिन एक प्रीकॉम्प्लेयर लिबास ने सैस को अन्य भाषाओं में पार्स करने की अनुमति दी और इसे रूबी से अलग कर दिया। Sass में एक विशाल सक्रिय समुदाय है और शुरुआती लोगों के लिए नेट पर व्यापक शिक्षण संसाधन उपलब्ध हैं। अपनी परिपक्वता, स्थिरता और शक्तिशाली तार्किक कौशल के लिए धन्यवाद, सैस ने अपने प्रतिद्वंद्वी साथियों के आगे सीएसएस प्रीप्रोसेसर के सबसे आगे स्थापित किया है।

Sass को 2 सिंटैक्स में लिखा जा सकता है या तो Sass या SCSS का उपयोग कर। दोनों के बीच क्या अंतर है? चलो पता करते हैं।

सिंटेक्स घोषणा: एससीएस बनाम एससीएसएस

• SCSS का उद्देश्य Sassy CSS है। Sass के विपरीत, SCSS इंडेंटेशन पर आधारित नहीं है।
• Sass के लिए .sass एक्सटेंशन को मूल सिंटैक्स के रूप में उपयोग किया जाता है, जबकि SCSS .scss एक्सटेंशन के साथ एक नया सिंटैक्स प्रदान करता है।
• Sass के विपरीत, SCSS में सीएसएस की तरह घुंघराले ब्रेक्स और सेमीकोलन हैं।
• SCSS के विपरीत, Sass को पढ़ना मुश्किल है क्योंकि यह CSS से काफी भिन्न है। यही कारण है कि SCSS ने इसे और अधिक अनुशंसित Sass सिंटैक्स कहा क्योंकि यह पढ़ने में आसान है और मूल रूप से Sass की शक्ति के साथ आनंद लेते हुए Native CSS जैसा दिखता है।

संकलित सीएसएस कोड के साथ सैस बनाम एससीएसएस सिंटैक्स के साथ नीचे दिए गए उदाहरण पर विचार करें।

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

दोनों ही मामलों में, यह सैस या एससीएसएस हो, संकलित सीएसएस कोड समान होगा -

#box {
      color: #fff;
      background: #00f;

सास का उपयोग

संभवतः सबसे लोकप्रिय फ्रंट एंड फ्रेमवर्क बूटस्ट्रैप सैस में लिखा गया है। संस्करण 3 तक, बूटस्ट्रैप को LESS में लिखा गया था लेकिन बूटस्ट्रैप 4 ने सैस को अपनाया और इसकी लोकप्रियता को बढ़ाया। सैस का उपयोग करने वाली कुछ बड़ी कंपनियां हैं - जैपियर, उबेर, एयरबीएनबी और किकस्टार्टर।

लेस - लीनर स्टाइल शीट्स

LESS "लीनर स्टाइल्सशीट्स" का एक संक्षिप्त नाम है। यह 2009 में एलेक्सिस सेलियर द्वारा 2009 में सास के शुरुआती लॉन्च के 3 साल बाद जारी किया गया था। जबकि सैस को रूबी में लिखा गया है, LESS को जावास्क्रिप्ट लिखा गया है। वास्तव में, LESS एक जावास्क्रिप्ट लाइब्रेरी है जो देशी वेनिला सीएसएस की कार्यक्षमता को मिक्सिन्स, वेरिएबल्स, नेस्टिंग और रूल सेट लूप के साथ बढ़ाती है। Sass vs LESS एक गरमागरम बहस रही है। यह कोई आश्चर्य की बात नहीं है कि Lass, Sass की सबसे मजबूत प्रतियोगी है और इसका दूसरा सबसे बड़ा उपयोगकर्ता आधार है। हालांकि, जब बूटस्ट्रैप ने बूटस्ट्रैप 4 के लॉन्च के साथ सास के पक्ष में LESS डंप किया, तो LESS ने लोकप्रियता में कमी कर दी है। Sass पर LESS के कुछ नुकसानों में से एक यह है कि यह फ़ंक्शन का समर्थन नहीं करता है। Sass के विपरीत, LESS @ का उपयोग चर घोषित करने के लिए करता है जो @media और @keyframes के साथ भ्रम पैदा कर सकता है। तथापि, Sass और Stylus या किसी अन्य पूर्वप्रक्रमकों पर LESS का एक प्रमुख लाभ, इसे अपनी परियोजना में जोड़ना आसान है। आप ऐसा कर सकते हैं या तो NPM का उपयोग करके या Less.js फ़ाइल को शामिल करके। सिंटेक्स घोषणा: कम उपयोग। LESS का सिंटैक्स, SCSS से काफी मिलता-जुलता है, इस अपवाद के साथ कि चर की घोषणा करने के लिए $ साइन के बजाय LESS @ का उपयोग करता है।

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

LESS का उपयोग लोकप्रिय बूटस्ट्रैप फ्रेमवर्क जब तक कि संस्करण 4 का प्रक्षेपण LESS में नहीं लिखा गया था। हालाँकि, SEMANTIC UI नामक एक अन्य लोकप्रिय रूपरेखा अभी भी LESS में लिखी गई है। सैस का उपयोग करने वाली बड़ी कंपनियों में हैं - इंडीगोगो, पैट्रोन और वीचैट

लेखनी

स्टाइलस को 2010 में पूर्व नोड जेएस डेवलपर टीजे होलोवैचुक द्वारा लॉन्च किया गया था, जो सास की रिहाई के लगभग 4 साल बाद और लेस के रिलीज होने के 1 साल बाद था। लेखनी को नोड जेएस लिखा गया है और जेएस स्टैक के साथ पूरी तरह से फिट बैठता है। स्टाइलस सास के तार्किक कौशल और लेस की सादगी से काफी प्रभावित था। भले ही स्टाइलस अभी भी नोड जेएस डेवलपर्स के साथ लोकप्रिय है, लेकिन यह खुद के लिए एक बड़ा हिस्सा बनाने में कामयाब नहीं हुआ है। सैस या लेस के ऊपर स्टाइलस का एक फायदा यह है कि यह बेहद शक्तिशाली अंतर्निहित कार्यों से लैस है और भारी कंप्यूटिंग को संभालने में सक्षम है।

सिंटेक्स घोषणा: स्टाइलस उपयोग .styl एक्सटेंशन। स्टाइलस, सिंटेक्स लिखने में बहुत अधिक लचीलापन प्रदान करता है, देशी सीएसएस का समर्थन करता है और साथ ही कोष्ठक कॉलोनियों और अर्धविरामों के चूक की अनुमति देता है। इसके अलावा, ध्यान दें कि स्टाइलस चर को परिभाषित करने के लिए @ या $ प्रतीकों का उपयोग नहीं करता है। इसके बजाय, स्टाइलस एक परिवर्तनीय घोषणा को इंगित करने के लिए असाइनमेंट ऑपरेटरों का उपयोग करता है।

STYLUS SYNTAX WRITTEN ने NATIVE CSS पसंद किया

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

या

पूरी तरह से ब्रैक के बिना स्टाइलस साइनस

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

या

रंग और SEMICOLONS के बिना स्टाइल SYNTAX

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color

Comments

"scss अच्छी तरह से CSS3 के सिंटैक्स का गठन किया गया है।" CSS3 सिंटैक्स वैध / अच्छी तरह से गठित SCSS सही है? सभी SCSS वैध सीएसएस नहीं है, लेकिन सभी सीएसएस मान्य SCSS है। या मैं गलत समझ रहा हूं कि आप यहां क्या कह रहे हैं?

— स्टीफनजैनसेन

CSS3 SCSS से आता है यह एक ट्रांसशिपिंग प्रक्रिया परिणाम है। हमें इस वास्तविकता के अनुसार सोचना चाहिए

— हामिट YILDIRIM