एसएएसएस/एससीएसएस व्यक्तिगत फाइलों (उत्तरदायी डिजाइन) में @extend का उपयोग करके

Question

मैं अपनी साइट पर "मोबाइल पहला" दृष्टिकोण का उपयोग कर रहा हूं, और मैं एससीएसएस का उपयोग कर रहा हूं।

मैं 3 एससीएसएस स्टाइलशीट है:

• base.scss (सभी के लिए कार्य किया)
• medium.scss (> = 768px खिड़की)
• large.scss (> = 1024px गुणा खिड़की)

वे हैं इस तरह की सेवा की:

<link rel="stylesheet" href="/css/base.css" type="text/css" /> 
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" /> 
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" /> 

दूसरे शब्दों में, large.scss को base.scss में सीएसएस का कोई ज्ञान नहीं है, फिर भी मुझे में base.css में रहने वाली कक्षा का विस्तार करने की आवश्यकता है।

मैं यह कैसे कर सकता हूं?

मैं तत्वों मैं जैसे बटन, विस्तार करने के लिए, एक अलग स्टाइलशीट में, और उसके बाद medium.scss में @import 'buttons.scss'; का उपयोग की जरूरत को अलग करने की कोशिश की, लेकिन तब buttons.scss में सभी सीएसएस कि पत्र में रूप में अच्छी तरह रेंडर किया जाएगा।

क्या सीएसएस को संकलित करते समय SASS "प्रतिपादन इंजन" में base.scss में कक्षाओं को बेनकाब करने का कोई तरीका है ताकि उन्हें medium.scss में उपयोग किया जा सके?

Answer 1

मुझे हाल ही में इसी तरह की समस्या थी। मेरा समाधान: मिश्रण।

_mixins.scss

@mixin someSpacing($base: 5px;){ 
    padding: $base; 
    margin: $base; 
} 

उपसर्ग के रूप में उपयोग करने के लिए अंडरस्कोर, सास अभ्यस्त उन फ़ाइलों को संकलित याद रखें। तो अब आप बस अपनी फाइलों में _mixins.scss आयात कर सकते हैं। इसके अतिरिक्त आप अधिक लचीलापन देने के लिए पैरामीटर के साथ अपने मिश्रण को बढ़ा सकते हैं।

उदा। base.scss

@import '_mixins.scss'; 

    .classA { 
     @include someSpacing(3px); 
    } 

large.scss

@import '_mixins.scss'; 

    .anotherClass { 
     @include someSpacing(10px); 
    } 

अधिक सास संदर्भ में विवरण: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

Answer 2

मैं भी एक बार इस की जरूरत है। मैं आज क्रिस Eppstein पूछा और उन्होंने कहा:

विस्तार आउटपुट फ़ाइल प्रति है

तो, हाँ। @include आपकी एकमात्र आशा है।

Answer 3

अपने कार्य के लिए सही दृष्टिकोण सभी विस्तारणीय चयनकर्ताओं को आंशिक रूप से स्टोर करना और उन आंशिक फ़ाइलों को अपनी आउटपुट फ़ाइलों में आयात करना है।

प्रोजेक्ट/आंशिक/_extendables।सास

.foo 
    color: red 

%bar 
    width: 50px 

परियोजना/base.sass

@import partials/extendables 

.baz 
    @extend .foo 

परियोजना/medium.sass

@import partials/extendables 

.quux 
    @extend %bar 

इसके अलावा

, दृष्टिकोण आप जवाबदेही मैं के आयोजन के लिए प्रयोग कर रहे हैं बहुत पुराना जब तक आपको IE के कुछ पुराने जंगली संस्करण का समर्थन करने के लिए मजबूर नहीं किया जाता है, तो आपको आधुनिक दृष्टिकोण का उपयोग करना चाहिए:

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

• मीडिया प्रश्नों सास मीडिया क्वेरी उत्साह से भरा हुआ सुविधा का उपयोग कर यथा-स्थान बारीकी से लागू किया जाना चाहिए,,:

  परियोजना/partials/घटकों/_menu.sass

  .menu 
  
      @media (max-width: 600px) 
      // Mobile styles for menu container 
  
      @media (min-width: 601px) 
      // Desktop styles for menu container 
  
  
  .menu-item 
  
      @media (max-width: 600px) 
      // Mobile styles for menu items 
  
      @media (min-width: 601px) 
      // Desktop styles for menu items