एचटीएमएल:

<div id="carousel" class="slider__container">
  <div class="slider__slide">
    <span>Slide One</span>
  </div>
  <div class="slider__slide--active">
    <span>Slide Two</span>
  </div>
  <div class="slider__slide">
    <span>Slide Three</span>
  </div>
</div>

एससीएसएस:

body {
  background-color: #7e57c2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.slider__container {
  background: red;
  min-height: 250px;
  width: 200px;
  position: relative;
}

.slider__slide {
  background: blue;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

  &--active {
    opacity: 1; // Why doesn't this inherit the background colour and all other styles?
  }
}

मुझे नहीं पता कि मैं & ऑपरेटर का गलत तरीके से उपयोग कर रहा हूं, लेकिन अगर आप slider__slide और इसके अंदर &--active की स्टाइलिंग को देखें। &--active, slider__slide में परिभाषित अन्य सभी शैलियों को इनहेरिट क्यों नहीं करता है?

आप कोडपेन यहां चेकआउट कर सकते हैं

0
user818700 26 जुलाई 2018, 11:24

6 जवाब

क्योंकि दो अलग-अलग वर्ग हैं, .slider__slide और .slider__slide--active। इस मामले में आपको मूल वर्ग विरासत में लेना होगा

.slider__slide {
  background: blue;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

  &--active {
    @extend .slider__slide;
    opacity: 1;
  }
}

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

<div class="slider__slide slider__slide--active"
2
Igor Ivancha 26 जुलाई 2018, 11:34
@extend को प्यार करो!
 – 
user818700
26 जुलाई 2018, 11:35

ऐसा नहीं है कि यह कैसे काम करता है। & ऑपरेटर को लागू करने का मतलब है, अतिरिक्त वर्ग भी सेट करना होगा! यह एक स्ट्रिंग संयोजन नहीं है।

तो यह कोड:

.slider__slide {
  &.--active {
    opacity: 1;
  }
}

इस सीएसएस में परिवर्तित हो जाएगा:

.slider__slide.--active {
    color: blue;
}

जो इस मार्कअप कोड पर लागू होगा:

<!--markup with two classes 'slider__slide' and '--active'-->
<div class="slider__slide --active">

लेकिन यह मार्कअप कोड नहीं है:

<!--markup with single class 'slider__slide--active'-->
<div class="slider__slide--active">

अपडेट किया गया पेन भी देखें

2
paakubiru 26 जुलाई 2018, 11:35
लेकिन यह करता है एक स्ट्रिंग संयोजन करता है! (ओपी के कोडपेन में संकलित सीएसएस देखें) ठीक यही समस्या है, कि वे विभिन्न वर्गों के साथ समाप्त होते हैं जिनका एक दूसरे से कोई संबंध नहीं है।
 – 
Mr Lister
26 जुलाई 2018, 11:31

आपको सक्रिय में पूरा नाम जोड़ना होगा और यह काम करेगा

.slider__slide {
  background: blue;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

  &.slider__slide--active {
    opacity: 1;
  }
}
1
Sonia 26 जुलाई 2018, 11:31
इसके लिए उपयोगकर्ता को तत्व पर दोनों वर्गों को शामिल करने की आवश्यकता होगी, प्रश्न केवल सक्रिय वर्ग को लागू करने की आवश्यकता के लिए पूछ रहा है
 – 
Sam Willis
26 जुलाई 2018, 12:42
हाँ, स्पष्ट रूप से 2 वर्ग यदि हम ओपी एससीएसएस
 – 
Sonia
26 जुलाई 2018, 12:56

सरल व्याख्या के लिए

एससीएसएस

.some-class {
    width: 100px;
    height: 200px;

    &--modified {
        height: 300px;
    }
}

यह CSS में SCSS कोड का एनालॉग होगा

.some-class {
    width: 100px;
    height: 200px;
}

.some-class--modified {
    height: 300px;
}

यदि आप HTML में केवल ".some-class--modified" का उपयोग करते हैं तो स्पष्ट रूप से यह ".some-class" से "चौड़ाई" नहीं जोड़ेगा क्योंकि वे पूरी तरह से अलग वर्ग हैं।

0
Levan Lomia 26 जुलाई 2018, 11:38

ऐसा इसलिए है क्योंकि आपने background: blue; को कक्षा .slider__slide पर लागू किया है न कि .slider__slide--active पर।

आपको मूल वर्ग का भी उपयोग करना चाहिए और फिर इसके साथ संशोधक का उपयोग करना चाहिए

<div class="slider__slide slider__slide--active"> इसलिए यह मूल शैलियों को भी इनहेरिट करता है।

0
bhansa 26 जुलाई 2018, 12:23

जिस कक्षा में आप सक्रिय का उपयोग करना चाहते हैं, उसके अंदर &:active का उपयोग करें।

.slider__slide {
  background: blue;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

  &:active {
    //styles when active
  }

  &:hover{
    // styles when hovered
  }

}

0
Haripriya 26 जुलाई 2018, 13:43