Возможно ли в 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?

— Crush

1

Будьте осторожны при использовании @extendвместе с bootstrap / любым фреймворком, так как он может работать не так, как вы ожидаете. Есть некоторые вещи, о которых следует знать, как указано в этом сообщении: stackoverflow.com/questions/30744625/…

— Патрик Аффентранджер

2

Но разве это не дублирует CSS из bootstrap.scss, если вы сделаете это в нескольких файлах в своем проекте?

— fritzmg

1

Означает ли это импорт весь bootstrap.cssв styles.cssили просто .btn? Я имею ввиду в выходном пакете? Если он импортирует весь bootstrap.css, он без надобности увеличит размер styles.css.

— darKnight

8

** Я могу ошибаться, но если я получу то, что вы пытаетесь сделать, не можете ли вы просто использовать @extend .classname;команду внутри элемента, который вы хотите расширить? Естественно, вы должны изменять только свой собственный код, чтобы сохранить возможность обновления.

— Марк Эрнст
источник

2

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

— ScottS
источник

1

Как показал принятый ответ, это возможно с помощью @import, однако @import устарел sass

Команда Sass не рекомендует продолжать использовать правило @import. В течение следующих нескольких лет Sass постепенно откажется от него и в конечном итоге полностью удалит его из языка. Вместо этого предпочтите правило @use.

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

— эхаб
источник

Есть компилятор dart sass, который отлично компилирует sass с использованием @use. Но вы должны указать, какой файл вы хотите скомпилировать в настройках, иначе все файлы будут скомпилированы, даже если вы хотите объединить их в один файл и скомпилировать только его.

— Тоби