@extendYönerge ile bir seçiciyi genişletirken , Sass genişletilmiş seçiciden CSS içeriğini genişletilmiş olana yerleştirmez. Tersi işler. Genişletme seçiciyi alır ve genişletilmiş olana ekler.
Nasıl çalıştığından dolayı farklı kapsamlardan kullanılmasını imkansız kılar. Örneğin, bir @mediablokta bildirilmiş bir yer tutucuyu genişletemezsiniz veya bir @mediayönergenin içindeyseniz bir yer tutucuyu kökten genişletemezsiniz .
Elbette @extendmümkün olduğunda kullanmanın bir yolunu bulabiliriz , aksi takdirde karıştırın. Gerçekten, yapılabilir ama biraz zor, ben buna mixtend hack diyorum. Projenizin her yerine uygulamadan önce iki kez düşünmek isteyebilirsiniz. Belki sadece mixins kullanmak daha kolay olurdu. Seni bunun yargıcı olarak bırakacağım.
Sarma @extend
Fikrin anlaşılması aslında oldukça basit. Önce mixini tanımlıyoruz. Tek parametre, $extendmixin'in dahil etmek yerine genişletmeyi deneyip denemeyeceğini tanımlayan parametredir . Açıkçası, bu bir booleandır (varsayılan olarak true).
Eğer $extendbir true, biz mixin (maalesef bu automagicallylar hesaplanan değildir) adıyla anılan bir yer tutucu uzanır. Eğer öyleyse false, CSS kodunu normal bir karışımın yapacağı gibi dökeriz.
Karışımın dışında, yukarıda belirtilen yer tutucuyu tanımlıyoruz. Yer tutucu CSS kodunu tekrarlamaktan kaçınmak için, biz sadece ayarlayarak mixin eklemek zorunda $extendiçin falseYer tutucunun çekirdeğinde CSS kodunu döker böylece.
/// *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); )Misal
Basit bir örnek olarak, Nicolas Gallagher'ın mikro-açık düzeltmesini kullanacağız.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Bunu kullanmak oldukça basittir:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Sonuç CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublime Metin Parçacığı
Yaygın olarak yeniden kullanılabilir hale getirmek için klibi kaydetmek istiyorsanız, bunun için bir Sublime Metin parçacığı oluşturmanın çok kolay olduğunu bilmekten memnuniyet duyacaksınız. Sublime'da Araçlar> Yeni snippet… seçeneğine gidin ve içeriği aşağıya yapıştırın.
Teknenizi yüzen her şeyi koymak için anahtarı değiştirmekten çekinmeyin ; tabpasajı genişletmek için vurmadan önce yazılacak kelimedir . İle gittim mixtend.
mixtend source.scss