Apakah mungkin di SASS untuk mewarisi dari kelas di file lain?

102

Pertanyaannya cukup banyak menjelaskan semuanya.

Misalnya, jika saya menggunakan, katakanlah, Twitter Bootstrap , dapatkah saya mendefinisikan kelas di stylesheet SASS saya sendiri yang mewarisi dari kelas CSS Bootstrap? Atau apakah warisan di SASS hanya bekerja dalam lingkup satu file?

css inheritance stylesheet sass Dan Tao
sumber

Jawaban:

180

IYA! itu mungkin.

Jika Anda ingin semua <button>elemen mewarisi .btnkelas dari tombol Default Bootstrap Twitter

Di styles.scssfile Anda, Anda harus mengimpor terlebih dahulu _bootstrap.scss:

@import "_bootstrap.scss";

Lalu di bawah impor:

button { @extend .btn; }
agustibr
sumber
Saya merasa tidak enak karena melakukan ini karena jawaban yang lain cukup banyak menjawab pertanyaan ini (saya hanya lalai untuk memeriksa kembali sebentar dan kemudian lupa); tetapi saya menerima jawaban Anda karena itu yang paling lengkap — yaitu, itu menuntun saya melalui keseluruhan proses. Terima kasih!
Dan Tao
4
Apakah ini hanya berfungsi dengan file SCSS lainnya? Bisakah Anda tidak melakukan ini dengan file CSS?
hancurkan
1
Hati-hati saat Anda menggunakan @extendbersama dengan bootstrap / kerangka kerja apa pun, karena mungkin tidak berfungsi seperti yang Anda harapkan. Ada beberapa hal yang harus diperhatikan seperti yang diuraikan dalam posting ini: stackoverflow.com/questions/30744625/…
Patrik Affentranger
2
Tetapi bukankah ini menduplikasi CSS dari bootstrap.scss, jika Anda melakukannya di banyak file dalam proyek Anda?
fritzmg
1
Apakah ini mengimpor keseluruhan bootstrap.cssmenjadi styles.cssatau hanya .btn? Maksud saya dalam bundel keluaran? Jika mengimpor seluruhnya bootstrap.css, itu akan meningkatkan ukuran yang styles.csstidak perlu.
maverick
8

** Saya mungkin salah, tetapi jika saya mendapatkan apa yang Anda coba lakukan, tidak bisakah Anda menggunakan @extend .classname;perintah di dalam elemen yang ingin Anda perluas? Secara alami, Anda hanya perlu memodifikasi kode Anda sendiri untuk menjaga pembaruan.

Mark Ernst
sumber
2

Sepengetahuan saya, Anda harus menggunakan@import file yang berisi kelas yang ingin Anda gunakan ke dalam file SASS Anda untuk menggunakannya di file itu. Namun, saya bukan ahli SASS / SCSS, jadi seseorang mungkin mengetahui cara lain untuk menggunakannya dari jarak jauh yang tidak saya sadari.

ScottS
sumber
1

Sama seperti jawaban yang diterima telah menunjukkan hal ini dimungkinkan dengan @import, namun @import telah ditinggalkan oleh sass

Tim Sass mencegah penggunaan lanjutan aturan @import. Sass akan secara bertahap menghapusnya selama beberapa tahun ke depan, dan akhirnya menghapusnya dari bahasa sepenuhnya. Lebih suka aturan @use sebagai gantinya.

Aturan @use lebih cocok untuk digunakan sekarang, karena tidak mencemari cakupan modul pengimporan (pengguna). sayangnya pada saat penulisan aturan penggunaan hanya diterapkan di Dart sass.

ehab
sumber