SASS'de başka bir dosyadaki bir sınıftan miras almak mümkün müdür?

102

Soru hemen hemen her şeyi söylüyor.

Örneğin, Twitter Bootstrap kullanıyor olsaydım, Bootstrap'in CSS sınıflarından miras alan kendi SASS stil sayfamda sınıfları tanımlayabilir miydim? Veya SASS'deki kalıtım yalnızca tek bir dosya kapsamında mı çalışır?

— Dan Tao
kaynak

180

EVET! Mümkün.

Tüm <button>öğelerin .btnsınıfı Twitter Bootstrap'in Varsayılan düğmelerinden devralmasını istiyorsanız

Senin içinde styles.scssdosyanın ilk ithalat gerekir _bootstrap.scss:

@import "_bootstrap.scss";

Ardından, içe aktarmanın altında:

button { @extend .btn; }

— agustibr
kaynak

Bunu yaptığım için kendimi kötü hissediyorum çünkü diğer cevaplar bu soruyu oldukça fazla cevapladı (sadece bir süre tekrar kontrol etmeyi ihmal ettim ve sonra unuttum); ama cevabınızı en eksiksiz olduğu için kabul ediyorum - yani, tüm süreç boyunca bana yol gösteriyor. Teşekkürler!

— Dan Tao

4

Bu yalnızca diğer SCSS dosyalarıyla mı çalışır? Bunu CSS dosyalarıyla yapamaz mısınız?

— ezmek

1

@extendBeklediğiniz gibi çalışmayabileceği için bootstrap / herhangi bir çerçeve ile birlikte kullanırken dikkatli olun . Bu yazıda ana hatlarıyla belirtildiği gibi dikkat edilmesi gereken bazı şeyler var: stackoverflow.com/questions/30744625/…

— Patrik Affentranger

2

Ancak bu, projenizde birden fazla dosyada yaparsanız, CSS'yi bootstrap.scss'den çoğaltmaz mı?

— fritzmg

1

Bu, tamamını bootstrap.cssiçine mi styles.cssyoksa sadece içine mi aktarıyor .btn? Yani çıktı paketinde mi? Tamamı ithal ederse bootstrap.css, styles.cssgereksiz yere boyutunu artıracaktır .

— darKnight

8

** Yanılıyor olabilirim, ancak yapmaya çalıştığınız @extend .classname;şeyi alırsam, genişletmek istediğiniz öğenin içindeki komutu kullanamaz mısınız? Doğal olarak, güncellenebilirliği korumak için yalnızca kendi kodunuzu değiştirmelisiniz.

— Mark Ernst
kaynak

2

Bildiğim kadarıyla, sen kullanmak zorunda@import o dosyasında bunları kullanmak için lütfen SUKDÖ'nün dosyasına kullanmak istediğiniz sınıfları içeren dosyanın. Ancak, ben bir SASS / SCSS uzmanı değilim, bu nedenle birisi, farkında olmadığım bir şekilde onları uzaktan kullanmanın başka bir yolunu biliyor olabilir.

— ScottS
kaynak

1

Kabul edilen yanıtın gösterdiği gibi, bu @import ile mümkündür, ancak @import sass tarafından kullanımdan kaldırılmıştır.

Sass ekibi, @import kuralının kullanılmaya devam edilmesini önermiyor. Sass, önümüzdeki birkaç yıl içinde aşamalı olarak aşamalı olarak kaldıracak ve sonunda onu dilden tamamen kaldıracak. Bunun yerine @use kuralını tercih edin.

@Use kuralı, içe aktaran (kullanıcı) modülünün kapsamını kirletmediğinden şu anda kullanım için daha uygundur. maalesef kullanım kuralı yazılırken sadece Dart sass'ta uygulanmaktadır.

— ehab
kaynak

@use kullanarak sass derleyen bir dart sass derleyicisi var. Ancak, ayarlarda hangi dosyayı derlemek istediğinizi hedeflemelisiniz, yoksa tüm dosyalar, onları tek bir dosyada birleştirmek ve yalnızca onu derlemek isteseniz bile, derlenecektir.

— Tobi