Amikor egy választót @extendkibővít az irányelvvel, a Sass nem veszi ki a kiterjesztett választó CSS-tartalmát a kiterjesztőbe. Ez fordítva működik. Fogja a kiterjesztő választót, és hozzáfűzi a kibővítetthez.
Működése miatt lehetetlenné teszi a különböző hatókörű felhasználást. Például nem bővítheti ki a @mediablokkban deklarált helyőrzőt , és nem bővítheti ki a helyőrzőt gyökérből sem, ha @mediairányelvbe tartozik.
Biztosan találunk módot a használatra, @extendha lehetséges, egyébként keverjük össze. Valóban kivitelezhető, de kissé trükkös, ezt hívom a mix hacknek. Érdemes kétszer meggondolni, mielőtt a projekt mindenhol megvalósítaná. Talán csak a keverékek használata lenne könnyebb. Meghagylak ennek a bírójának.
Csomagolás @extend
Az ötlet valójában nagyon egyszerűen megragadható. Először meghatározzuk a mixint. Az egyetlen paraméter az $extend, amely meghatározza, hogy a mixinnek meg kell-e próbálnia kiterjeszteni, nem pedig beilleszteni. Nyilvánvaló, hogy logikai érték (alapértelmezés szerint true).
Ha $extendvan true, akkor kiterjesztjük a helykitöltő elnevezett mixin (sajnos, ez nem automágikusan számítható). Ha mégis false, akkor a CSS kódot úgy dobjuk ki, mint egy szokásos mixin.
A mixinből meghatározzuk a fent említett helyőrzőt. Annak elkerülése érdekében, hogy a CSS-kód megismétlődjön a helyőrzőben, a mixint csak úgy kell beállítanunk, $extendhogy beállítsa a -ra, hogy falsea CSS-kódot a helyőrző magjába dobja .
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Példa
Egyszerű példaként Nicolas Gallagher mikrotiszta javítását használjuk.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Használata meglehetősen egyszerű:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Eredmény CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Fenséges szövegrészlet
Ha el akarja menteni a kazánlemezt annak érdekében, hogy nagymértékben újrafelhasználható legyen, örömmel fogja tudni, hogy ehhez nagyon könnyű létrehozni egy Sublime szövegrészletet. A Sublime alatt lépjen az Eszközök> Új részlet ... elemre, és illessze be az alábbi tartalmat.
Nyugodtan változtassa meg a kulcsot, hogy bármi úszik a hajón; ez a szó, amelyet be kell írni, mielőtt elütnénk taba kódrészlet kibővítéséhez. Mentem mixtend.
mixtend source.scss