Чи можливо в SASS успадкувати від класу в іншому файлі?

102

Питання майже все це говорить.

Наприклад, якщо я використовував, скажімо, Twitter Bootstrap , чи можу я визначити класи у власному таблиці стилів SASS, які успадковуються від CSS-класів Bootstrap? Або спадкування в SASS працює лише в межах одного файлу?

— Дан Дао
джерело

180

ТАК! це можливо.

Якщо ви хочете, щоб усі <button>елементи успадкували .btnклас із кнопок за замовчуванням Twitter Bootstrap

У вашому styles.scssфайлі вам доведеться спочатку імпортувати _bootstrap.scss:

@import "_bootstrap.scss";

Потім нижче імпорту:

button { @extend .btn; }

— agustibr
джерело

Мені погано робити це, оскільки інші відповіді майже відповіли на це запитання (я просто занедбав перевірку на деякий час, а потім забув); але я приймаю вашу відповідь, тому що вона є найповнішою - тобто вона провадить мене протягом усього процесу. Дякую!

— Дан Дао

4

Це працює лише з іншими файлами SCSS? Ви не можете цього зробити з файлами CSS?

— розчавити

1

Будьте обережні, коли ви використовуєте @extendразом із завантажувальним файлом / будь-яким фреймворком, оскільки це може не працювати як ви очікуєте У цьому дописі слід пам’ятати про деякі речі: stackoverflow.com/questions/30744625/…

— Patrik Affentranger

2

Але це не дублює CSS з bootstrap.scss, якщо ви робите це у кількох файлах у своєму проекті?

— фріцмг

1

Це імпорт цілого bootstrap.cssв styles.cssабо просто .btn? Я маю на увазі у вихідному пакеті? Якщо він імпортує цілий bootstrap.css, він збільшуватиме розмір styles.cssбез потреби.

— індивідуаліст ,

8

** Я можу помилитися, але якщо я отримаю те, що ви намагаєтеся зробити, чи не можете ви просто використовувати @extend .classname;команду всередині елемента, який ви хочете розширити? Природно, вам слід змінити лише власний код, щоб зберегти оновлення.

— Марк Ернст
джерело

2

Наскільки мені відомо, ви повинні використовувати@import файл, який містить класи, які ви хочете використовувати у своєму файлі SASS, щоб використовувати їх у цьому файлі. Однак я не є експертом SASS / SCSS, тому хтось може знати інший спосіб віддаленого їх використання, про який я не знаю.

— Скотс
джерело

1

Подібно до того, як прийнята відповідь показала, що це можливо і при застосуванні @import, проте @import застарілий через sass

Команда Sass перешкоджає подальшому використанню правила @import. Sass поступово буде припиняти його протягом наступних кількох років, а згодом і повністю видаляти його з мови. Віддайте перевагу замість правила @use.

Правило @use краще підходить для використання зараз, оскільки воно не забруднює сферу модуля імпорту (користувача). на жаль, на момент написання правила використання використовується лише в Dart sass.

— ехаб
джерело