एससीएसएस एक नेस्टेड चयनकर्ता का विस्तार और नेस्टेड rulesets

Question

ठीक ओवरराइड तो मैं एक नेस्टेड चयनकर्ता के साथ एक प्लेसहोल्डर है:

%block { 
    .title { 
    font-size:12px; 
    } 
} 

मैं इसे विस्तार और .title वर्ग में जोड़ना चाहते हैं:

.superblock { 
    @extend %block; 
    .title { 
    font-weight:bold; 
    } 
} 

.superblock .title { 
    font-size: 12px; 
    font-weight: bold; } 

हालांकि, इस सवाल का जवाब मैं यह है:: इस सवाल का जवाब मैं चाहते हैं तो यह है

.superblock .title { 
    font-size: 12px; } 

.superblock .title { 
    font-weight: bold; } 

क्या मैं कुछ गलत कर रहा हूं या यह कैसे काम करता है? स्पष्ट करने के लिए मैं इसे मर्ज करना चाहता हूं। अगर मैं सीधे .superblock के अंदर कुछ जोड़ता हूं और .superblock2 की तरह जोड़ता हूं जो किसी भी समस्या के बिना वे% ब्लॉक को विलय करता है।

Answer 1

सास में डुप्लिकेट चयनकर्ताओं को "विलय" करने की कोई कार्यक्षमता नहीं है। सीएसएस संकलित होने के बाद आपको ऐसा करने के लिए एक और उपयोगिता की आवश्यकता होगी।

@extend निर्देश मिश्रणों के स्थान पर कक्षाओं का उपयोग करने का एक तरीका नहीं है (कम शैली मिश्रित कॉल के समान)। क्यों @extend काम करता है जिस तरह से यह करता है स्पष्ट हो जाता है जब आप का विस्तार वर्गों के बजाय सामान्य वर्गों का विस्तार कर रहे:

.block { 
    font-size:12px; 
} 

.foo { 
    @extend .block; 
    font-weight: bold; 
} 

आउटपुट:

.block, .foo { 
    font-size: 12px; 
} 

.foo { 
    font-weight: bold; 
} 

एक विस्तार वर्ग का उपयोग सिर्फ मूल वर्ग के नाम के उत्सर्जन को दबा ।

अब आपने देखा है कि @extend ऐसा क्यों करता है, क्या आप अभी भी @extend ऑफ़र चाहते हैं? जवाब नहीं है, तो आप एक mixin उपयोग करने की आवश्यकता:

@mixin block { 
    // styles 
    .title { 
     font-size: 12px; 
     @content; 
    } 
} 

.superblock { 
    @include block { 
     font-weight: bold; 
    } 
} 

आउटपुट:

.superblock .title { 
    font-size: 12px; 
    font-weight: bold; 
} 

Answer 2

यह काफी यह है। एसएएसएस अलग-अलग घोषणाओं का उत्पादन अलग-अलग करता है।

और इसमें चयनकर्ता द्वारा घोषणाओं को समूहीकृत करने की कोई कार्यक्षमता नहीं है, यह स्मार्ट नहीं है।

लेकिन आपको सीएसएस की शुद्धता के बारे में चिंता करने की आवश्यकता नहीं है। आधुनिक वेब सर्वर सीएसएस gzipped की सेवा करते हैं, सभी नकल अच्छी तरह से संपीड़ित किया जाएगा।

Answer 3

आप एक उपकरण का उपयोग कर सकते हैं, मैं इसे इस्तेमाल किया सीएसएस https://github.com/addyosmani/grunt-uncss

साफ करने के लिए "UnCSS साथ अपनी परियोजनाओं से अप्रयुक्त सीएसएस दूर करने के लिए एक घुरघुराना काम।"

Answer 4

कम कर सकते हैं। हालांकि आप लिखेंगे:

.superblock { 
    .title { 
    .block .title; 
    } 
} 

यह सुनिश्चित नहीं है कि यह @extend के साथ भी काम करता है।