SCSS'ye başka bir sınıf eklemek

309

SCSS dosyamda bu var:

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

.class-b{

 //Inherite class-a here

 //some properties
}

Sınıf b'de, tüm özelliklerini ve iç içe bildirimlerini miras almak istiyorum class-a. Bu nasıl yapılır? Kullanmayı denedim @include class-a, ancak derlerken bir hata atıyor.

inheritance sass

— F21
kaynak

624

Öyle görünüyor @mixinve böyle @includebasit bir dava için gerekli değil.

Biri sadece şunları yapabilir:

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}

— F21
kaynak

40

@extend iyi çalışır, ancak sınıflardan biri bir yönerge içindeyse (genellikle bir medya sorgusu) çalışmaz; ikisi de aynı direktifte olmadıkça.

— MartinAnsty

13

hakkında bazı eğlenceli gerçekler için buraya bakın @extend- bilmeniz gereken bazı yan etkiler var: stackoverflow.com/questions/30744625/…

— Toni Leigh

2

Teşekkürler @ToniLeigh, PlaceHolder , üst seçici yalnızca uzatmak için kullanılıyorsa (hiçbir yerde kullanılmıyorsa) ek bir CSS seçicisinin oluşturulmasını engeller . Örneğin yukarıdaki gibi .myclassbaşka bir yerde kullanılmaz dışında (herhalde) .myotherclasso zaman gelmiş daha iyidir, .myclassolarak tanımlanır %myclassve genişletilmiş .myotherclassolarak @extend %myclass;. Olarak üretecek.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— Abhijeet

5

Yer Tutucu Vs kullanma örneği Normal sınıf seçici kullanma örneği

— Abhijeet

@MartinAnsty Şey, bu berbat.

— Abram

51

Bunu dene:

Ortak özelliklere sahip bir yer tutucu temel sınıf (% base-class) oluşturma
Sınıfınızı (.my-base-class) bu yer tutucuyla genişletin.

Artık sınıflarınızdan herhangi birinde (örneğin, benim sınıfım)% base sınıfı genişletebilirsiniz.

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

Bence bu cevap en popüler cevapla aynı. Haklı mıyım?

— Yevgeniy Afanasyev

1

@Yevgeniy Afanasyev Hayır, bir sınıfı doğrudan genişletemezsiniz, ancak doğrudan bir yer tutucuyu genişletebilirsiniz.

— Ashwin

Asla sorulmadı :(

— Yevgeniy Afanasyev

1

@Yevgeniy Afanasyev doğrudan sınıfı genişleten (en popüler cevap) benim için işe yaramadı, ancak bir yer tutucuyu genişletmek işi yaptı. Bu yüzden aynı cevap olmadığı için cevabı yayınladım.

— Ashwin

3

Alternatif bir cevap gönderdiğiniz için teşekkür ederiz, ancak cevabınızdan neden buna ihtiyacımız olduğu açık değildir. Bir kullanım durumunu veya bu yaklaşımın avantajlarını açıklığa kavuşturmak için lütfen daha fazla gerekçe ekleyebiliyorsanız, takdir edilecektir. Teşekkür ederim.

— Yevgeniy Afanasyev

16

@Extend kullanmak iyi bir çözümdür, ancak derlenen css'nin sınıf tanımını kıracağını unutmayın. Aynı yer tutucuyu genişleten sınıflar birlikte gruplandırılacak ve sınıfta genişletilmeyen kurallar ayrı bir tanımda olacaktır. Birkaç sınıf genişletilirse, derlenmiş css veya geliştirici araçlarında bir seçici aramak gereksiz olabilir. Oysa bir mixin, mixin kodunu çoğaltır ve ek stiller ekler.

Bunda @extend ve @mixin arasındaki farkı görebilirsiniz sassmeister

— Ari
kaynak

Sassmeister bağlantısı kopuk.

— LexieHankins

11

@extend .myclass;
@extend #{'.my-class'};

— mcmaxwell
kaynak

22

Bu kod soruyu cevaplayabilirken, bu kodun soruyu neden ve / veya nasıl cevapladığı konusunda ek bağlam sağlamak uzun vadeli değerini arttırır.

— adiga

2

@extend #{'.my-class', '.my-other-class'};

— iarroyo

2

Buradaki hashbang'ın anlamı nedir?

— Konrad Viltersten

7

Başka bir seçenek Özellik Seçici kullanıyor olabilir:

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

Oysa "sınıfınızın adı" ile başlayan her sınıf bu stili kullanır.

Yani sizin durumunuzda, bunu şöyle yapabilirsiniz:

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

W3Schools'daki Özellik Seçiciler hakkında daha fazla bilgi

— Khanji
kaynak