क्या सैस नुकसान प्रदर्शन करता है?

Question

मैं खुद को शिक्षित कर रहा हूं। this पढ़ना:

इंजन, दाएं से बाएं प्रत्येक नियम का मूल्यांकन करता है सबसे दायीं ओर चयनकर्ता ("कुंजी" कहा जाता है) से शुरू और जब तक यह एक मैच पाता है या नियम को छोड़ देता है प्रत्येक चयनकर्ता के माध्यम से घूम रहा है। ("चयनकर्ता" दस्तावेज़ तत्व है जो करने के लिए नियम लागू करना चाहिए।)

उदाहरण के लिए:

ul li a {...} 
#footer h3 {...} 
* html #atticPromo ul li a {...] 

अब, मेरे लिए कुछ उदाहरण कोड एस.ए.एस.एस. आउटपुट:

#content #blog { 
    /* ... */ 
} 
/* line 85, ../sass/screen.scss */ 
#content #flickr { 
    /* ... */ 
} 

#content #flickr div p { 
    /* ... */ 
} 

यह थोड़ा अजीब लगता है .. क्या मैं कुछ गलत कर रहा हूँ? क्या यह मेरे और सास के बीच एक संचार समस्या है? क्या हम इसे खो रहे हैं?

संपादित: कुछ एससीएसएस कोड:

#flickr { 
    @include columns(5,8); 
    background: url('../img/ipadbg.png') no-repeat; 

    #ipod-gloss { 
     z-index: 999; 
     position: relative; 
    } 

    div { 
     margin-top: -80px; 
     margin-right: 20px; 

     h2 { 
      color: $white; 
      font-size: 24px; 
     } 

     p { 
      margin-top: 40px; 
     } 
    } 
} 

साइड बोनस!: आलेख कहता है कि ब्राउज़र (या कम से कम फ़ायरफ़ॉक्स) चयनकर्ताओं को दाएं से बाएं से खोजें। मैं समझ नहीं पाया कि यह एक और अधिक कुशल क्यों है। कोई सुराग?

Answer 1

आप रख-रखाव के बीच अपने समझौता खोजने के लिए और प्रतिपादन प्रदर्शन (नेस्टिंग यह आसान स्टाइलशीट में चारों ओर अपना रास्ता खोजने के लिए बनाता है) है।

अंगूठे का एक नियम कहता है कि आपको अपने आप को तीन-स्तर के घोंसले तक सीमित करने का प्रयास करना चाहिए और यदि आवश्यक नहीं है तो आपको घोंसला आईडी से बचना चाहिए।

हालांकि, मुझे लगता है कि घोंसला बहुत ज्यादा नहीं है। जैसे ही मैं मिश्रणों की शक्ति के बारे में जागरूक हो गया, मैंने उन्हें बहुत उपयोग किया।

@mixin small-button($active-color: $active-color, $hover-color: $button-hover-color, $shadow: true) 
    display: inline-block 
    padding: 4px 10px 
    margin: 
    right: 10px 
    bottom: 10px 
    border: none 
    background-color: $button-color 
    color: $font-color-inv 
    +sans-serif-font(9px, 700) 
    text-align: center 
    text-transform: uppercase 
    cursor: pointer 
    @if $shadow 
    +light-shadow 
    &:hover 
    text-decoration: none 
    background-color: $hover-color 
    &:last-child 
    margin-right: 0 
    a 
    color: $font-color-inv 
    &, &:hover 
     text-decoration: none 
    &.disabled 
    +opacity(0.75) 
    &:hover 
     background-color: $button-color 
    &.active 
    background-color: $active-color 
    &.disabled:hover 
     background-color: $active-color 

तुम देखो, काफ़ी कोड:

उदाहरण के लिए, यह मेरा अक्सर इस्तेमाल किया बटन mixin है। इस पृष्ठ पर कई तत्वों को इस तरह के मिश्रणों को लागू करने के परिणामस्वरूप एक बड़ी सीएसएस फ़ाइल होगी जिसका अर्थ व्याख्या करने में अधिक समय लगता है।

पुराने फैशन वाले सीएसएस-तरीके में आप प्रत्येक बटन तत्व उदास करेंगे। कक्षा। मॉल-बटन। लेकिन यह विधि असमान वर्गों के साथ आपके मार्कअप को प्रदूषित करती है।

सास एक समाधान प्रदान करता है हालांकि: @extend directive के माध्यम से चयनकर्ता विरासत।

आप mixin के अपने पैरामीटर के लिए डिफ़ॉल्ट सेट हैं, तो आप भी एक साधारण वर्ग है, जो अपने डिफ़ॉल्ट के साथ mixins का उपयोग करता है प्रदान कर सकते हैं:

// Use this mixin via @extend if you are fine with the parameter defaults 
.small-button 
    +small-button 

और फिर आप बस विभिन्न संदर्भों में इस वर्ग से विरासत कर सकते हैं :

.small-button, #admin-interface input[type=submit] { 
    display: inline-block; 
    ... 
} 

:

#admin-interface 
    input[type=submit] 
    @extend .small-button 

जिसके परिणामस्वरूप सीएसएस बयान अल्पविराम से अलग चयनकर्ताओं के साथ एक नियम में .Small बटन के सभी उपयोगों को एकत्रित करती

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

Answer 2

SASS केवल एक भाषा है जो सीएसएस पर संकलित होती है। यदि आप ब्राउज़र में यह कैसे चलते हैं, इस मामले में SASS के प्रदर्शन से संबंधित हैं, तो SASS समीकरण में प्रवेश नहीं करता है - इसे संकलित किया जाएगा और ब्राउज़र को नियमित सीएसएस के रूप में सेवा दी जाएगी।

1. घोंसला सब कुछ करने के लिए आप नहीं करते हैं:

   ---

   मैं क्या एस.ए.एस.एस. के अपने उपयोग के देख सकते हैं से, वहाँ मेरा सुझाव सकता चीजों की एक जोड़ी है।

एसएएसएस में एक-दूसरे के अंदर घोंसले के नियमों की क्षमता एक भाषा सुविधा है, लेकिन ऐसा करने के लिए आपको समझ में नहीं आता है, लेकिन आपको ऐसा करने की आवश्यकता नहीं है।

---

अपने सामान्य सीएसएस उपयोग के संदर्भ में:

1. नेस्टिंग हो जाता है बहुत गंभीर/unwieldly, कक्षाएं जहां यह समझ में आता है का उपयोग करें।
2. जब डीओएम तत्वों के पदानुक्रम का उपयोग करना आवश्यक है, तो [बाल संयोजक] का उपयोग करने पर विचार करें: .foo > .bar।

आईडी अद्वितीय होने के लिए हैं, इस प्रकार हमेशा एक तत्व को संदर्भित करना चाहिए। अधिकांश समय, वे स्वयं के लिए सीएसएस नियम हो सकते हैं - #content #flickr उदाहरण के लिए केवल #flickr बन जाएगा - और ब्राउज़र एक आईडी के लिए लुकअप को अनुकूलित करेंगे। केवल #id1 #id2 जैसे कुछ की आवश्यकता होगी यदि #id2 को अलग-अलग पृष्ठों पर विभिन्न संदर्भों में दिखाई देने की आवश्यकता है।

यदि आपके चयनकर्ता में #id div p जैसी चीजें हैं, तो div या तो एक अनिवार्य या एक विशिष्ट उद्देश्य की सेवा है।

• यदि यह ज़रूरत से ज़्यादा है, #id p को नियम बदलते हैं, जो किसी भी <p> कि #id का वंशज के रूप में होता चयन करता है।
• यदि यह एक विशिष्ट उद्देश्य परोसता है, तो <div> को कक्षा के नाम से वर्गीकृत करने पर विचार करें जो इसके उद्देश्य का वर्णन करता है - शायद <div class="photos-list">। फिर आपका सीएसएस .photos-list p बन सकता है, जो कहीं अधिक रखरखाव योग्य और पुन: प्रयोज्य है।

---