Изменение цвета в Twitter Bootstrap на Rails 3.1 с помощью SASS - PullRequest
Новая
       35

Изменение цвета в Twitter Bootstrap на Rails 3.1 с помощью SASS

2 голосов
/ 04 октября 2011

Twitter Bootstrap - это крутой инструментарий таблиц стилей от Twitter, основанный на LESS.Я не использую LESS, однако я использую twitter-bootstrap-rails gem, и, похоже, все работает нормально.Однако я не могу понять, как изменить цвета в CSS, в частности цвет ссылки.

Мои дальнейшие исследования указывают на то, что гем предоставляет только предварительно отрендеренный файл CSS с объявлениями фиксированных цветов, а непеременные, которые могут быть изменены в одном месте.Я хотел бы иметь возможность просто изменять цвета, изменяя переменную, например $linkColor = #00ff00

Кто-нибудь имеет какие-либо идеи относительно того, как эффективно изменять цвета во всем интерфейсе без использования LESS?

Я хочу избегать использования LESS, так как Rails 3.1 уже использует SASS, но если кто-то здесь считает, что использование обоих не имеет большого значения, я открыт для предложений.

Любая помощь или предложение будут высоко оценены

Ответы [ 3 ]

3 голосов
/ 07 ноября 2011

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

Как пример, в главе application.css.scss: 

@import "bootstrap/reset";
@import "bootstrap/variables";

// overwrite variables here

@import "bootstrap/mixins";

@import "bootstrap/scaffolding";

@import "bootstrap/type";
@import "bootstrap/forms";
@import "bootstrap/tables";
@import "bootstrap/patterns";

// rest of your manifest

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

2 голосов
/ 04 ноября 2011

Я нашел хороший компромисс: я держу источник .less в папке, и у меня есть команда guard, чтобы скомпилировать это для css напрямую в vendor / assets.

Это позволяет мне использовать меньше миксоввнутри дополнительного .less, где это имеет смысл (то есть: добавить новый цвет), и сохранить остальную часть приложения в scss.

Я сделал это, потому что я действительно хотел напрямую полагаться на источник Twitter Boostrap, а не по адаптации scss, которая может в какой-то момент позже отстать.

Свяжитесь со мной, если вам нужна дополнительная информация, я планирую написать в блоге об этом.

0 голосов
/ 05 октября 2011

Я нашел две отдельные версии SCSS файлов начальной загрузки.Оба (в файле preboot.scss) позволяют просто изменить переменную для таких вещей, как linkColor.

Теперь, как интегрировать их в свое приложение, я не уверен.Но, похоже, это можно сделать с помощью SCSS, если вы хотите избежать LESS.

...