function Sass छद्म चयनकर्ताओं के साथ विस्तारित




extend mixins (2)

ऐसा लगता है जैसे SASS विस्तार में छद्म तत्वों के साथ इतनी अच्छी तरह से काम नहीं करता है।

इस तरह के मुद्दे के आसपास कार्य करें:

%before-icon
  color: red

.foo
  /* Some styles here */

  &:before
    @extend %before-icon

परिणाम:

.foo:before {
  color: red;
}

.foo {
  /* Some styles here */
}

इसके अलावा, ऐसा लगता है कि आप चीजों को अधिक समझ रहे हैं। आपको अपना कोड समझना और बनाए रखना मुश्किल होगा

पीएस आपको _mixins.scss को _mixins.scss_mixins.scss में रखना चाहिए।

मैक ओएसएक्स पर कुछ एसएएस फाइलों का प्रबंधन करने के लिए मैं कम्पास का उपयोग कर रहा हूं I मेरे पास ये फ़ाइलें हैं:

sass/
      screen.scss
            partials folder/
      ...
            _fonts.scss
            _functions.scss
      ...

फोंट में मुझे यह नियम है, जिसे मैं @ एक्सपेंड में पुनः उपयोग करना चाहता हूं।

//fonts.scss
.icon-ab-logo, {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-ab-logo:before { //i want to reuse this.
content: "\e000";
}

फ़ंक्शंस में मेरे पास यह स्क्रीन। एससीएसएस है:

.logo {
position: absolute;
top: 0;
bottom: 0px;
z-index: 500;
width: 9.5em;
background: $logo;
@include transition(all 0.2s);
   &:after{
     @include icon( ".icon-ab-logo" );
   }
 }

अंत में functions.scss में मैं इसे कॉल करता हूं:

    @mixin icon( $icon ){
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      @extend #{$icon}:before; //<- this is the problem, no errors just isn't parsed.
    }

क्या कोई संदर्भ करने का एक तरीका है-इनॉन-एब-लोगो: एक मिक्सिन का उपयोग करने से पहले? समाधान? पढ़ने के लिए धन्यवाद।


जब आप एक छद्म वर्ग या छद्म तत्व का विस्तार करना चाहते हैं, तो आप केवल अभिभावक चयनकर्ता का विस्तार करना चाहते हैं (अर्थात सब कुछ जिसे बृहदान्त्र से पहले आता है)।

%foo:before {
  color: red;
}

.bar {
  @extend %foo;
}

उत्पन्न करता है:

.bar:before {
  color: red;
}

तो आपके उदाहरण के लिए, आप क्या करना चाहते हैं:

.icon-ab-logo, {
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

%foo:before, .icon-ab-logo:before { //i want to reuse this.
    content: "\e000";
}

@mixin icon( $icon ){
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    @extend #{$icon};
}

.bar {
    @include icon('%foo');
}

ध्यान रखें कि आपका मिक्सिन कई शैलियों को उत्पन्न करता है, इसलिए यह व्यापक पुन: उपयोग के लिए वास्तव में उपयुक्त नहीं है यह उस तरह का विस्तार करने के लिए बहुत अधिक समझदारी पैदा करेगा।





mixins