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?

— Dan Tao
sumber

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