css-фреймворк и цветовые схемы

#css #colors #color-scheme #blueprint-css

#css #Цвет #цветовая схема #план действий-css

Вопрос:

Я не могу найти CSS frameowrk, который позволяет мне подключать мою собственную цветовую схему.

Например, в мой текущий проект я импортировал blueprint / screen.css. Чтобы изменить цвет шрифта, я должен изменить body { color ..}, h2 { color ..}, h3 {color ..} и т.д.

Нет ли чего-нибудь, что обеспечивает хорошие значения по умолчанию css, но также позволяет поиграть с цветовыми схемами?

1. thirtydot: можете ли вы прокомментировать lesscss.org ответ, я хочу поддержать его!

2. Конечно, никаких проблем 🙂 Кроме того, вам нужно убедиться, что вы пишете @username , иначе уведомления о комментариях не будет. Я обратил внимание на ваш комментарий только потому, что случайно заглянул сюда еще раз.

Ответ №1:

Ты можешь попробовать http://lesscss.org /.

Это позволяет вам использовать такие вещи, как переменные в вашем CSS, что звучит именно так, как вам нужно:

 // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Ответ №2:

Создайте свой собственный CSS-файл, который загружается после Blueprint. Вам нужно будет переопределить все, но значения по умолчанию в Blueprint недалеко ушли от значений по умолчанию в браузере.

Если у вас есть несколько цветовых схем, которые вы хотите быстро переключить, задайте класс в своем теге <html>. Затем используйте свой CSS-файл, чтобы определить пользовательские стили для каждого из них.

CSS:

 .theme1 body {
    font-family: Tahoma;
    color: #500;
}

.theme2 body {
    font-family: Verdana;
    color: #050;
}

Для первой темы:

 <html class="theme1">

Для второй темы:

 <html class="theme2">

1. Это то, что я думал сделать, но это кажется ужасным способом решения проблемы (я понимаю, что другого способа может и не быть).

2. Я использую grep / sed для извлечения всех атрибутов css, связанных с цветом, и собираюсь поместить их в собственный CSS-файл. Не элегантно, но должно сработать 🙂

Ответ №3:

Не могли бы вы просто отредактировать файл blueprint / screen.css? Вы также могли бы использовать что-то вроде SASS, а затем создать все значения по умолчанию в верхней части таблицы стилей, а затем распространить их по всей таблице стилей при ее рендеринге.