Rozszerzając selektor za pomocą @extenddyrektywy, Sass nie pobiera zawartości CSS z rozszerzonego selektora, aby umieścić ją w rozszerzającym. Działa na odwrót. Pobiera rozszerzający selektor i dołącza go do rozszerzonego.
Ze względu na sposób działania uniemożliwia korzystanie z niego w różnych zakresach. Na przykład nie możesz rozszerzyć symbolu zastępczego, który został zadeklarowany w @mediabloku, ani nie możesz rozszerzyć symbolu zastępczego z katalogu głównego, jeśli znajdujesz się w @mediadyrektywie.
Z pewnością znajdziemy sposób na użycie, @extendjeśli to możliwe, mieszając w inny sposób. Rzeczywiście, jest to wykonalne, ale jest to trochę skomplikowane, nazywam to hackiem mieszanym. Warto pomyśleć dwa razy przed wdrożeniem w dowolnym miejscu projektu. Być może używanie samych miksów byłoby łatwiejsze. Zostawię ci tego sędziego.
Zawijanie @extend
Pomysł jest właściwie dość prosty do zrozumienia. Najpierw definiujemy mixin. Jedynym parametrem jest $extend, który określa, czy mixin powinien raczej rozszerzać niż włączać. Oczywiście jest to wartość logiczna (domyślnie true).
Jeśli $extendtak true, rozszerzamy symbol zastępczy nazwany tak jak mixin (niestety nie jest to obliczane automagicznie). Jeśli tak false, zrzucamy kod CSS tak, jak zrobiłby to zwykły mixin.
Z mieszanki definiujemy wspomniany symbol zastępczy. Aby uniknąć powtarzania kodu CSS w zastępczym, mamy tylko do włączenia mixin ustawiając $extendsię falsetak, że zrzuca kod CSS w rdzeniu zastępczy za.
/// *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); )Przykład
Jako prosty przykład użyjemy mikro-clearfix od Nicolasa Gallaghera.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Korzystanie z niego jest dość proste:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Wynik CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublime Text Snippet
Jeśli chcesz zapisać standardowy szablon, aby umożliwić jego wielokrotne użycie, z przyjemnością dowiesz się, że bardzo łatwo jest utworzyć w tym celu fragment Sublime Text. W Sublime przejdź do Narzędzia> Nowy fragment… i wklej poniższą zawartość.
Nie krępuj się zmienić klucza, aby umieścić wszystko, co pływa na twojej łodzi; jest to słowo, które należy wpisać przed naciśnięciem przycisku, tababy rozwinąć fragment. Poszedłem z mixtend.
mixtend source.scss