Мне поручили переписать существующий код CSS в SASS. Это мой первый опыт работы с SASS, еще новичок.
Итак, первое, с чего я начал, я объединил все файлы css в один файл. Теперь я просматриваю это и пытаюсь разделить вещи на разные файлы .scss.
Я построил архитектуру своей папки SASS в соответствии с шаблоном «7-1», который состоит из 7 папок: рефераты, база, макет, модули, страницы, темы и поставщики. Все идет нормально.
В процессе разделения моего CSS на разные файлы я столкнулся с проблемой, на которую не смог найти ответы в гугле:
Скажем, у меня есть 2 файла CSS — main.css и admin.css. В main.css определен класс:
.first-line {
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
}
и класс с таким же именем определен в admin.css
.first-line {
padding-left:15x;
padding-right:10px;
}
Как я понял из онлайн-учебников SASS (поправьте меня, если я ошибаюсь), код SASS должен привести только к одному файлу main.scss, куда я импортирую все частицы, модули и т. д., и он будет скомпилирован в один файл main.css. Если да, то как мне решить подобную проблему, когда мне нужно, чтобы класс определялся по-разному только для одной страницы?
Попробуйте вложить этот класс .first-line в оба файла (родительский класс будет отличаться при вложении) ..... поэтому при компиляции в один файл это не вызовет проблем
Если это одностраничное приложение, это означает, что вы используете JavaScript.
Вы можете просто определить уникальный класс для каждой страницы и назначить этот класс элементу body
или html
(я предпочитаю последний), а во время выполнения вы можете просто динамически установить класс страницы. Таким образом, вы можете определить класс first-line
и установить значения по умолчанию и поместить его в общий файл .scss, а затем перезаписать существующие атрибуты или добавить новые в этот класс для каждой отдельной страницы по мере необходимости.
Например, вы можете структурировать его следующим образом:
pages/common.scss
:first-line {
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
}
main.scss
:html {
import 'pages/common';
&.admin {
@import 'pages/admin';
}
&.other-page {
@import 'pages/other-page';
}
}