Menggunakan @include vs @extend di Sass?

Di Sass, saya tidak bisa membedakan antara menggunakan @includedengan mixin dan menggunakan @extenddengan kelas placeholder. Bukankah mereka sama saja?

Perluasan tidak mengizinkan penyesuaian, tetapi ekstensi menghasilkan CSS yang sangat efisien.

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

a
  @extend %button

button
  @extend %button

Hasil:

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

Dengan mixin, Anda mendapatkan CSS duplikat, tetapi Anda dapat menggunakan argumen untuk mengubah hasil untuk setiap penggunaan.

=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)

Hasil dalam:

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;
}

Silakan ikuti rangkaian contoh kode ini untuk melihat bagaimana Anda dapat membuat kode Anda lebih bersih dan lebih mudah dipelihara dengan menggunakan extends dan mixin secara efektif: http://thecodingdesigner.com/posts/balancing

Perhatikan bahwa SASS sayangnya tidak mengizinkan penggunaan meluas di dalam kueri media (dan contoh terkait dari tautan di atas salah). Dalam situasi di mana Anda perlu memperluas berdasarkan kueri media, gunakan mixin:

=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

Hasil:

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

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

Duplikasi tidak bisa dihindari dalam kasus ini, tetapi Anda tidak boleh terlalu peduli tentang itu karena kompresi gzip server web akan menanganinya.

PS Perhatikan bahwa Anda dapat mendeklarasikan kelas placeholder dalam kueri media.

Pembaruan 2014-12-28 : Memperluas menghasilkan CSS yang lebih ringkas daripada mixin , tetapi manfaat ini berkurang ketika CSS di-gzip. Jika server Anda menyajikan CSS yang di-gzip (memang seharusnya!), Maka ekstensi hampir tidak memberi Anda manfaat. Jadi, Anda selalu bisa menggunakan mixin ! Lebih lanjut tentang ini di sini: http://www.sitepoint.com/sass-extend-nobody-told-you/

Pendekatan yang baik adalah menggunakan keduanya - buat mixin yang akan memungkinkan Anda banyak penyesuaian dan kemudian memperluas konfigurasi umum dari mixin tersebut. Misalnya (Sintaks SCSS):

@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);
}

Ini menyelamatkan Anda dari memanggil mixin tombol-saya berulang kali. Ini juga berarti Anda tidak perlu mengingat pengaturan untuk tombol umum tetapi Anda masih memiliki kemampuan untuk membuat tombol sekali pakai yang sangat unik jika Anda pilih.

Contoh ini saya ambil dari postingan blog yang saya tulis belum lama ini. Semoga ini membantu.

Menurut pendapat saya meluas adalah kejahatan murni dan harus dihindari. Inilah alasannya:

diberi scss:

%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}

Css berikut akan dibuat:

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

Jika browser tidak memahami pemilih, itu membuat seluruh baris pemilih tidak valid. Ini berarti kelas mystyle Anda yang berharga tidak lagi berwarna biru (untuk banyak browser). Apa sebenarnya artinya ini? Jika suatu saat Anda menggunakan perluasan di mana browser mungkin tidak memahami pemilih, setiap penggunaan perpanjangan lainnya akan dibatalkan. Perilaku ini juga memungkinkan terjadinya kejahatan bersarang:

%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;}

Hasil:

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

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

Tl; dr: @extend tidak apa-apa selama Anda tidak pernah menggunakannya dengan pemilih khusus browser. Jika Anda melakukannya, itu akan tiba-tiba merusak gaya di mana pun Anda menggunakannya. Coba andalkan mixin saja!

Gunakan mixins jika menerima parameter, di mana output yang dikompilasi akan berubah tergantung pada apa yang Anda berikan ke dalamnya.

@include opacity(0.1);

Gunakan perpanjang (dengan placeholder) untuk blok gaya statis yang dapat diulang.

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

Saya setuju dengan jawaban sebelumnya oleh d4nyll. Ada teks tentang opsi perpanjang dan ketika saya sedang meneliti tema ini saya menemukan banyak keluhan tentang memperpanjang, jadi ingatlah itu dan jika ada kemungkinan untuk menggunakan mixin daripada memperpanjang, lewati saja.