Как @ extend из другого файла sass, или как достичь OOSASS? [дубликат]

этот вопрос уже есть ответ здесь:

мой вопрос на самом деле шире, чем в заголовке написано. Именно здесь я сталкиваюсь с проблемой с моей идеей, но я открыт для всех видов решений. Позвольте мне объяснить мой общий цель.

мне нравится, что могут делать препроцессоры CSS. Мне нравятся идеи простые OOCSS селекторы и SMACSS. Я новичок во всем этом. Я пытаюсь обновить свои методы проектирования, чтобы каким-то образом включить лучшее из всех миров. У меня есть теоретический метод, который работает так:

  • используйте только семантические имена классов или идентификаторы или что угодно
  • определите модули или шаблоны в некоторой общей таблице стилей
  • имейте в таблицы стилей страницы которые @расширяют модули от общего стилей на семантические селекторы, относящиеся к данной страницы

значит так:

/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}

плюс:

/* homepage.scss */
@import modules.sass

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

становится этот:

/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}

Я не обязательно видел, как кто-то еще это делает, но мне показалось, что это хорошая идея. Проблема, с которой я сталкиваюсь в своей великой схеме, заключается в том, что @extend не работает из импортированного файла. Кто-то где-то еще так сказал, что это невозможно. Это правда? У меня есть миксины для работы. но проблема с ними в том, что они дублируют каждый атрибут в выходном css, что не кажется идеальным.

Я на самом деле более пристрастен к LESS (синтаксис), но это даже не имеет расширения на данный момент. Должен ли я не беспокоиться о неэффективности миксинов или есть какой-то способ достичь того, о чем я прошу?

Примечание: Я авто-компиляции моей Сасс средство Prepros. Когда я пытаюсь скомпилировать код, такой как выше, я получаю ошибку как.

предупреждение на линии 11 ... sassдомой.scss: "#intro " не удалось @ расширить "ruddy". Селектор "ruddy" не найден.

Если я просто скопирую код из модуля.СКС на странице.scss тогда проблема уходит.

9
css css-preprocessor oocss sass

2 ответов

проблема:

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

ruddy и fullwidth не селекторы. Если вы расширяете .ruddy class, вам нужно включить период, так как это часть селектора.

#intro {@extend .ruddy; @extend .fullwidth}
aside {@extend .ruddy;}
.thing {@extend .fullwidth;}
6

это неправда.

вы можете объявить классы (включая %префиксами те) в одном файле импортируйте первый файл во второй файл и расширьте классы во втором файле.

пример:

foo.Сасс!--16-->

%foo
  color: red

бар.Сасс!--16-->

@import foo.sass
html
  @extend %foo

выполнить sass bar.sass bar.css.

бар.в CSS появляется

html {
  color: red; }

PS для реального опыта SASS, вы должны рычагикомпас. Компас-это куча вещей под одним названием:

  • удобный инструмент для эффективной компиляции SASS;
  • огромная библиотека удобных стилей SASS на все случаи жизни;
  • экосистема расширений, которые вы можете легко установить и использовать в своих проектах. Вот что выделяет Сасс. Вам не нужно изобретать колесо снова и снова.

UPD наконец-то ошибка смс!

вы пропускаете точку в названии класса. aside {@extend ruddy;} должно быть aside {@extend .ruddy;}.

8