Valijat @extenddirektiiviga laiendades ei võta Sass laiendatud valijast CSS-i sisu, et see laiendatavasse lisada. See töötab vastupidi. See võtab laiendava valija ja lisab selle laiendatud valikule.
Selle tööpõhimõtte tõttu on selle kasutamine erinevates ulatusides võimatu. Näiteks ei saa @mediate laiendada plokis deklareeritud kohatäitjat ega pikendada kohatäitet juurist, kui olete @mediadirektiivi sees.
Kindlasti leiame võimaluse, kuidas seda kasutada @extend, muidu mikserdage. Tõepoolest, see on teostatav, kuid see on natuke keeruline, ma nimetan seda segu häkkimiseks. Enne projekti kõikjal rakendamist võiksite mõelda kaks korda. Võib-olla oleks ainult segude kasutamine lihtsam. Jätan teile selle kohtunikuks.
Pakendamine @extend
Ideed on tegelikult üsna lihtne mõista. Kõigepealt määratleme mixini. Ainus parameeter on see $extend, mis määratleb, kas mixin peaks proovima laiendada, mitte kaasata. Ilmselt on see tõeväärtus (vaikeväärtus true).
Kui $extendon true, siis laiendame mixini nime saanud kohatäitjat (kahjuks ei arvutata seda automaatselt). Kui see on nii false, siis viskame CSS-koodi välja nagu tavaline mixin.
Segistist määratleme ülalnimetatud kohatäite. Vältimaks CSS-koodi kordamist kohahoidjas, peame lisama ainult mixini, seadistades $extendselle falsenii, et see puistab CSS-koodi kohahoidja tuuma.
/// *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); )Näide
Lihtsa näitena kasutame Nicolas Gallagheri mikropuhastust.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Selle kasutamine on üsna lihtne:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Tulemus CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Ülim tekstilõik
Kui soovite boileri salvestada, et muuta see korduvkasutatavaks, on hea meel teada, et selle jaoks on ülifaili jupi loomine väga lihtne. Avage jaotises Sublime Tööriistad> Uus koodilõik ... ja kleepige allolev sisu.
Muutke julgelt võtit, et panna kõik, mis teie paati hõljub; see on sõna, mille peate enne jupi tablaiendamiseks vajutama sisestama. Läksin kaasa mixtend.
mixtend source.scss