css क्या कम से कम "विस्तार" सुविधा है?




css3 sass (2)

हां, Less.js v1.4.0 में extend पेश किया गया।

:extend()

@extend और स्टाइलस द्वारा उपयोग किए जाने वाले एट-नियम ( @extend ) वाक्यविन्यास को लागू करने के बजाय, कम से कम छद्म-वर्ग वाक्यविन्यास को लागू किया गया है, जो कम से कम एक चयनकर्ता को सीधे या किसी कथन के अंदर लागू होने के लिए लचीलापन प्रदान करता है। तो ये दोनों काम करेंगे:

.sidenav:extend(.nav) {...}

या

.sidenav {
    &:extend(.nav);
    ...
}

इसके अतिरिक्त, आप "नेस्टेड" कक्षाओं को विस्तारित करने के लिए all निर्देशों का भी उपयोग कर सकते हैं:

.sidenav:extend(.nav all){};

और आप उन वर्गों की अल्पविराम से अलग सूची जोड़ सकते हैं जिन्हें आप विस्तारित करना चाहते हैं:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

नेस्टेड चयनकर्ताओं को विस्तारित करते समय आपको मतभेदों को ध्यान में रखना चाहिए:

नेस्टेड चयनकर्ता। चयनकर्ता .selector1 और selector2 :

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

अब। .selector3:extend(.selector1 .selector2){}; आउटपुट:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

,। .selector3:extend(.selector1 all){}; आउटपुट:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

,। .selector3:extend(.selector2){}; आउटपुट

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

और अंत में। .selector3:extend(.selector2 all){}; :

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

SASS में एक विशेषता है जिसे @extend कहा जाता है जो चयनकर्ता को किसी अन्य चयनकर्ता के गुणों का उत्तराधिकारी करने की अनुमति देता है, लेकिन गुणों की प्रतिलिपि किए बिना (मिश्रणों की तरह)।

क्या कम से कम यह सुविधा भी है?


कम ढांचे में एक समारोह का विस्तार करने का आसान तरीका

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

उत्पादन

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

https://codepen.io/sprushika/pen/MVZoGB/ देखें





extend