Sass के साथ मीडिया के सवालों के भीतर चयनकर्ताओं का विस्तार

Question 1

मेरे पास एक आइटम वर्ग और एक कॉम्पैक्ट "संशोधक" वर्ग है:

.item { ... }
.item.compact { /* styles to make .item smaller */ }

यह ठीक है। हालाँकि, मैं एक ऐसी @mediaक्वेरी जोड़ना चाहूँगा जो .itemस्क्रीन के काफी छोटे होने पर क्लास को कॉम्पैक्ट करने के लिए मजबूर करे ।

पहले सोचा, यह वही है जो मैंने करने की कोशिश की:

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

लेकिन यह निम्नलिखित त्रुटि उत्पन्न करता है:

आप @media के भीतर से बाहरी चयनकर्ता का चयन नहीं कर सकते हैं। आप एक ही निर्देश के भीतर केवल @ चयनकर्ताओं का चयन कर सकते हैं।

मैं शैलियों को कॉपी / पेस्ट करने के लिए उपयोग किए बिना SASS का उपयोग करके इसे कैसे पूरा करूंगा?

Question 2

सरल उत्तर है: आप नहीं कर सकते क्योंकि सास इसके लिए चयनकर्ता की रचना नहीं कर सकती (या नहीं करेगी)। आप मीडिया क्वेरी के अंदर नहीं हो सकते हैं और मीडिया क्वेरी के बाहर कुछ बढ़ा सकते हैं। यह निश्चित रूप से अच्छा होगा यदि यह चयनकर्ताओं को बनाने की कोशिश करने के बजाय बस इसकी एक प्रति ले जाएगा। लेकिन ऐसा नहीं है तो आप नहीं कर सकते।

एक मिश्रण का उपयोग करें

यदि आपके पास एक ऐसा मामला है, जहां आप मीडिया के प्रश्नों के अंदर और बाहर कोड के ब्लॉक का पुन: उपयोग करने जा रहे हैं और फिर भी चाहते हैं कि इसे विस्तारित करने में सक्षम हों, तो एक मिक्सिन और एक विस्तार वर्ग दोनों लिखें:

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

बाहर से एक मीडिया क्वेरी के भीतर चयनकर्ता का विस्तार करें

यह वास्तव में आपके उपयोग के मामले में मदद नहीं करेगा, लेकिन यह एक और विकल्प है:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

रुको जब तक सैस इस प्रतिबंध को हटा देता है (या इसे अपने आप को पैच कर देता है)

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

Question 3

रिकॉर्ड के लिए, यहां बताया गया है कि मैंने केवल एक बार उत्पन्न शैलियों को दोहराते हुए समस्या को हल किया:

// This is where the actual compact styles live
@mixin compact-mixin { /* ... */ }

// Include the compact mixin for items that are always compact
.item.compact { @include compact-mixin; }

// Here's the tricky part, due to how SASS handles extending
.item { ... }
// The following needs to be declared AFTER .item, else it'll
// be overridden by .item's NORMAL styles.
@media (max-width: 600px) {
  %compact { @include compact-mixin; }

  // Afterwards we can extend and
  // customize different item compact styles
  .item {
    @extend %compact;
    /* Other styles that override %compact */
  }
  // As shown below, we can extend the compact styles as many
  // times as we want without needing to re-extend
  // the compact mixin, thus avoiding generating duplicate css
  .item-alt {
    @extend %compact;
  }
}

Question 4

मेरा मानना है कि SASS / SCSS @extendमीडिया क्वेरी के अंदर निर्देश का समर्थन नहीं करता है । http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

आपको इसके बजाय एक मिश्रण का उपयोग करने की आवश्यकता हो सकती है, हालांकि कोड ब्लोट को आपके उद्देश्य के विरुद्ध तौला जाना चाहिए।

Question 5

यह सबसे साफ, आंशिक समाधान है जो मैंने पाया है। यह जहां संभव है @ कस्टम का फायदा उठाता है और मीडिया के सवालों के अंदर मिक्सिंस पर वापस गिर जाता है।

क्रॉस-मीडिया क्वेरी @ Sass में निर्देश

पूर्ण विवरण के लिए लेख देखें, लेकिन यह है कि आप एक मिश्रण 'प्लेसहोल्डर' को कॉल करते हैं, जो तब तय करता है कि @extend या @include आउटपुट करें या नहीं।

@include placeholder('clear') {
   clear: both;
   overflow: hidden;
}

.a {
    @include _(clear);
}
.b {
    @include _(clear);
}
.c {
    @include breakpoint(medium) {
      @include _(clear);
   }
}

अंततः यह केवल मिश्रणों का उपयोग करने से बेहतर नहीं हो सकता है, जो वर्तमान में स्वीकृत उत्तर है।

Question 6

मैं ब्रेकप्वाइंट का उपयोग करता हूं, लेकिन यह एक ही विचार है:

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }

इसे कैसे उपयोग करे:

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

मिक्सिंस के बारे में एक पाठ है जहां आप इस विकल्प के बारे में अधिक जानकारी प्राप्त कर सकते हैं।

Question 7

क्या आप पुनर्गठन कर सकते हैं?

.compact { //compact-styles }
.item {}
.item.compact { @extend .compact } 

@media (max-width: 600px) {
    .item { @extend .compact; }
}

अगर मैं प्रलेखन को सही ढंग से समझता हूं, तो यह काम करना चाहिए। मुझे लगता है कि जिस तरह से आप कोशिश कर रहे हैं वह काम नहीं करेगा कि यह @itend को पार्स करने पर यह .item.compact नहीं देखता है, लेकिन यह एक असंबद्ध अनुमान है, इसलिए इसे नमक के एक ट्रक लोड के साथ लें! :)