एचटीएमएल:
<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 में परिभाषित अन्य सभी शैलियों को इनहेरिट क्यों नहीं करता है?
आप कोडपेन यहां चेकआउट कर सकते हैं
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"
ऐसा नहीं है कि यह कैसे काम करता है। & ऑपरेटर को लागू करने का मतलब है, अतिरिक्त वर्ग भी सेट करना होगा! यह एक स्ट्रिंग संयोजन नहीं है।
तो यह कोड:
.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">
अपडेट किया गया पेन भी देखें
आपको सक्रिय में पूरा नाम जोड़ना होगा और यह काम करेगा
.slider__slide {
background: blue;
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
&.slider__slide--active {
opacity: 1;
}
}
सरल व्याख्या के लिए
एससीएसएस
.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" से "चौड़ाई" नहीं जोड़ेगा क्योंकि वे पूरी तरह से अलग वर्ग हैं।
ऐसा इसलिए है क्योंकि आपने background: blue; को कक्षा .slider__slide पर लागू किया है न कि .slider__slide--active पर।
आपको मूल वर्ग का भी उपयोग करना चाहिए और फिर इसके साथ संशोधक का उपयोग करना चाहिए
<div class="slider__slide slider__slide--active"> इसलिए यह मूल शैलियों को भी इनहेरिट करता है।
जिस कक्षा में आप सक्रिय का उपयोग करना चाहते हैं, उसके अंदर &:active का उपयोग करें।
.slider__slide {
background: blue;
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
&:active {
//styles when active
}
&:hover{
// styles when hovered
}
}