Проблема перезаписи CSS в SASS: одно и то же определение класса в двух файлах css

Мне поручили переписать существующий код 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. Если да, то как мне решить подобную проблему, когда мне нужно, чтобы класс определялся по-разному только для одной страницы?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
106
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте вложить этот класс .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';
  }
}

Другие вопросы по теме