Sass'ta @include vs @extend kullanılıyor mu?

Sass'ta, @includebir mixin ile kullanmakla @extendbir yer tutucu sınıfla kullanmak arasındaki farkı tam olarak anlayamıyorum . Aynı şey değil mi?

Uzantılar özelleştirmeye izin vermez, ancak çok verimli CSS üretirler.

%button
  background-color: lightgrey
  &:hover, &:active
    background-color: white

a
  @extend %button

button
  @extend %button

Sonuç:

a, button {
  background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
  background-color: white;
}

Karışımlarla, yinelenen CSS elde edersiniz, ancak her kullanım için sonucu değiştirmek için bağımsız değişkenler kullanabilirsiniz.

=button($main-color: lightgrey, $active-color: white)
  background-color: $main-color
  border: 1px solid black
  border-radius: 0.2em

  &:hover, &:active
    background-color: $active-color

a
  +button

button
  +button(pink, red)

Sonuçlar:

a {
  background-color: lightgrey;
  border: 1px solid black;
  border-radius: 0.2em;
}
a:hover, a:active {
  background-color: white;
}

button {
  background-color: pink;
  border: 1px solid black;
  border-radius: 0.2em;
}
button:hover, button:active {
  background-color: red;
}

Extends ve mixins'i etkili bir şekilde kullanarak kodunuzu nasıl daha temiz ve daha sürdürülebilir hale getirebileceğinizi görmek için lütfen bu ardışık kod örneklerini izleyin: http://thecodingdesigner.com/posts/balancing

SASS'nin ne yazık ki medya sorguları içinde extends kullanımına izin vermediğini unutmayın (ve yukarıdaki bağlantıdan ilgili örnek yanlıştır). Medya sorgularına göre genişletmeniz gerektiğinde, bir mixin kullanın:

=active
  display: block
  background-color: pink

%active
  +active

#main-menu
  @extend %active // Active by default

#secondary-menu
  @media (min-width: 20em)
    +active // Active only on wide screens

Sonuç:

#main-menu {
  display: block;
  background-color: pink;
}

@media (min-width: 20em) {
  #secondary-menu {
    display: block;
    background-color: pink;
  }
}

Bu durumda çoğaltma kaçınılmazdır, ancak bunu çok fazla önemsememelisiniz çünkü web sunucusunun gzip sıkıştırması bununla ilgilenecektir.

PS Ortam sorguları içinde yer tutucu sınıfları tanımlayabileceğinizi unutmayın.

Güncelleme 2014/12/28 : Uzattı ürünler üretmekte daha kompakt CSS Katmalar , ama CSS gzip'lenmiş edildiğinde bu fayda azalmaktadır. Sunucunuz gzip ile sıkıştırılmış CSS sunuyorsa (gerçekten gerekir!), O zaman extends size neredeyse hiç fayda sağlamaz. Böylece her zaman mixin kullanabilirsiniz ! Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz: http://www.sitepoint.com/sass-extend-nobody-told-you/

İyi bir yaklaşım, her ikisini de kullanmaktır - size çok sayıda özelleştirme sağlayacak bir karışım oluşturmak ve ardından bu karışımın genel yapılandırmaları için genişletmeler yapmaktır. Örneğin (SCSS Sözdizimi):

@mixin my-button($size: 15, $color: red) {
  @include inline-block;
  @include border-radius(5px);
  font-size: $size + px;
  background-color: $color;
}
%button {
  @include my-button;
}
%alt-button {
  @include my-button(15, green);
}
%big-button {
  @include my-button(25);
}

Bu sizi tekrar tekrar my-button mixini çağırmaktan kurtarır. Aynı zamanda, genel düğmeler için ayarları hatırlamanız gerekmediği, ancak yine de seçmeniz durumunda süper benzersiz, tek seferlik bir düğme yapma olanağınız olduğu anlamına gelir.

Bu örneği uzun zaman önce yazdığım bir blog gönderisinden alıyorum . Bu yardımcı olur umarım.

Kanımca uzantılar saf kötülüktür ve kaçınılması gerekir. İşte nedeni:

scss verilen:

%mystyle {color: blue;}
.mystyle-class {@extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {@extend %mystyle}

Aşağıdaki css oluşturulacaktır:

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
  color: blue;
}

Bir tarayıcı bir seçiciyi anlamadığında, tüm seçici satırını geçersiz kılar. Bu, değerli mystyle sınıfınızın artık mavi olmadığı anlamına gelir (birçok tarayıcı için). Bu gerçekten ne anlama geliyor? Herhangi bir zamanda, bir tarayıcının seçiciyi anlamayabileceği bir uzantı kullanırsanız, uzantının diğer her kullanımı geçersiz kılınır. Bu davranış aynı zamanda kötü iç içe geçmeye de izin verir:

%mystyle {color: blue;}
@mixin mystyle-mixin {@extend %mystyle; height: 0;}
::-webkit-input-placeholder {@include mystyle-mixin} 
//you thought nesting in a mixin would make it safe?
.mystyle-class {@extend %mystyle;}

Sonuç:

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
  color: blue;
}

::-webkit-input-placeholder {
  height: 0;
}

Tl; dr: @extend, herhangi bir tarayıcıya özgü seçicilerle asla kullanmadığınız sürece mükemmel şekilde uygundur. Bunu yaparsanız, kullandığınız her yerde stilleri aniden yıkacaktır. Bunun yerine mixin'e güvenmeye çalışın!

Bir parametreyi kabul ederse, derlenen çıktının ne ilettiğinize bağlı olarak değişeceği mixins kullanın.

@include opacity(0.1);

Statik tekrarlanabilir stil blokları için ext (yer tutucuyla) kullanın .

color: blue;
font-weight: bold;
font-size: 2em;

D4nyll'in önceki cevabına tamamen katılıyorum. Orada bir metin seçeneği genişletmek konusunda ve bu tema araştırma yaparken ben şikayetleri çok yaklaşık uzatmak yüzden sadece ve mixin kullanmak yerine genişletmek için bir ihtimal varsa, sadece atlamak uzatmak akılda var buldum.