Разделите базовую таблицу стилей между общедоступными страницами и панелью администратора

Я обновил приложение rails и теперь хочу использовать разные базовые стили и переменные между общедоступными страницами и панелью администратора.

Как лучше всего это сделать?

Я использую SASS и имею base.scss, который в основном содержит изменения типографики, и я хочу использовать разные листы, будь то на общедоступных страницах или страницах администратора.

У меня есть класс администратора для тега html, но его использование (html.admin h1Например) переопределяет пользовательские стили на странице.

Есть ли способ сделать это на основе контроллера?

как насчет двух разных application.scss и двух разных раскладок application.html.erb?

Fabrizio Bertoglio 23.10.2018 13:41

Спасибо за совет. В настоящее время у нас есть альтернативный макет для информационной панели, но, поскольку мы все еще используем довольно много стилей между макетами, есть ли способ настроить таргетинг только на лист base.scss вместо дублирования application.scss?

Jim B 23.10.2018 14:00
Приемы 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 сценарий полностью изменился.
1
2
34
1

Ответы 1

Благодаря комментарию Фабрицио мне удалось решить эту проблему.

Поскольку используются два разных макета, мне удалось создать отдельный лист application.scss, сначала импортировать исходный application.scss, а затем любые переопределения. Затем включите новую таблицу стилей в <% = stylesheet_link_tag%> вместо исходной.

Мне действительно нужно было добавить это в прекомпилированный файл assets.rb, но в остальном он работает как шарм!

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