Termasuk kelas lain di SCSS

309

Saya memiliki ini di file SCSS saya:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

Di kelas-b, saya ingin mewarisi semua properti dan deklarasi bersarang dari class-a. Bagaimana ini dilakukan? Saya mencoba menggunakan @include class-a, tetapi itu hanya melempar kesalahan saat kompilasi.

inheritance sass F21
sumber

Jawaban:

624

Sepertinya @mixindan @includetidak diperlukan untuk kasus sederhana seperti ini.

Seseorang bisa melakukan:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}
F21
sumber
40
@extend berfungsi dengan baik, tetapi tidak akan berfungsi jika salah satu kelas berada dalam arahan (biasanya kueri media); kecuali mereka berdua dalam arahan yang sama.
MartinAnsty
13
lihat di sini untuk beberapa fakta menyenangkan tentang @extend- ada beberapa efek samping rumit yang harus Anda waspadai: stackoverflow.com/questions/30744625/…
Toni Leigh
2
Terima kasih @ToniLeigh, PlaceHolder menarik karena mereka menghemat pembuatan pemilih CSS tambahan jika pemilih induk hanya digunakan untuk memperpanjang (tidak digunakan di mana pun). Seperti pada contoh di atas .myclasstidak digunakan di tempat lain (saya kira) selain .myotherclass, maka lebih baik untuk .myclassdidefinisikan sebagai %myclassdan diperluas .myotherclasssebagai @extend %myclass;. Ini akan menghasilkan sebagai.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Abhijeet
5
Contoh menggunakan Place Holder Vs Contoh menggunakan pemilih kelas normal
Abhijeet
@ MartinAnsty Ya, itu menyebalkan.
Abram
51

Coba ini:

  1. Buat kelas dasar placeholder (% kelas dasar) dengan properti umum
  2. Perpanjang kelas Anda (.my-base-class) dengan placeholder ini.

  3. Sekarang Anda dapat memperluas% kelas dasar di salah satu kelas Anda (mis. Kelas saya).

    %base-class {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
}

.my-base-class {
    @extend %base-class;
}

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}
Ashwin
sumber
Saya pikir jawaban ini sama dengan yang paling populer. Apakah saya benar?
Yevgeniy Afanasyev
1
@Yevgeniy Afanasyev Tidak, Anda tidak memperluas kelas secara langsung, tetapi Anda dapat langsung memperpanjang placeholder.
Ashwin
Tidak pernah ditanya :(
Yevgeniy Afanasyev
1
@Yevgeniy Afanasyev memperluas kelas secara langsung (jawaban paling populer) tidak bekerja untuk saya, tetapi memperpanjang placeholder melakukan pekerjaan. Karenanya saya memposting jawabannya karena itu bukan jawaban yang sama.
Ashwin
3
Terima kasih telah mengirim jawaban alternatif, tetapi tidak jelas dari jawaban Anda mengapa kami membutuhkannya. Jika Anda dapat menambahkan lebih banyak alasan untuk mengklarifikasi kasus penggunaan atau keuntungan dari pendekatan ini, itu akan dihargai. Terima kasih.
Yevgeniy Afanasyev
16

Menggunakan @extend adalah solusi yang bagus, tetapi perlu diketahui bahwa css yang dikompilasi akan memecah definisi kelas. Setiap kelas yang memperpanjang placeholder yang sama akan dikelompokkan bersama dan aturan yang tidak diperpanjang di kelas akan berada dalam definisi yang terpisah. Jika beberapa kelas diperluas, akan sulit untuk mencari pemilih di css yang dikompilasi atau alat dev. Sedangkan mixin akan menduplikasi kode mixin dan menambahkan gaya tambahan.

Anda dapat melihat perbedaan antara @extend dan @mixin di sassmeister ini

Ari
sumber
Tautan penerima tamu rusak.
LexieHankins
11 
@extend .myclass;
@extend #{'.my-class'};
mcmaxwell
sumber
22
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
adiga
2
@extend #{'.my-class', '.my-other-class'};
iarroyo
2
Apa arti dari hashbang di sini?
Konrad Viltersten
7

Opsi lain bisa menggunakan Pemilih Atribut:

[class^="your-class-name"]{
  //your style here
}

Sedangkan setiap kelas dimulai dengan "nama kelas Anda" menggunakan gaya ini.

Jadi dalam kasus Anda, Anda bisa melakukannya seperti ini:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

Lebih lanjut tentang Selektor Atribut di w3Schools

Khanji
sumber