Rails 3: доступ к переменным начальной загрузки в твиттере + миксины без его импорта

Question

Я впервые использую Rails 3 (особенно конвейерная обработка активов и менее-rails-bootstrap), поэтому здесь я мог бы упустить какую-то действительно базовую концепцию. Я попробовал два подхода для включения Twitter-загрузки в свой проект, и у обоих возникли проблемы.

Подход № 1: app/assets/stylesheets/application.css имеет require twitter/bootstrap. Это включает в себя файл начальной загрузки css с использованием отдельного тега link / href, что хорошо. Однако проблема заключается в том, что в моем собственном файле CSS, скажем, app/stylesheets/mystyles.css я не могу получить доступ к переменным + миксинам, определенным в меньшем количестве в коде начальной загрузки, например @gray, .box-shadow и т. Д.

Подход № 2: Поставьте @import 'twitter/bootstrap' на вершину app/assets/stylesheets/mystyles.css. Это позволяет мне получить доступ к переменным + миксинам, определенным в less (в коде начальной загрузки), и это хорошо. Однако проблема заключается в том, что он загружает весь загрузочный CSS в верхней части mystyles.css, увеличивая размер файла. Если есть несколько разных таблиц стилей, то @import twitter/ bootstrap это приведет к многократному дублированию.

Какой рекомендуемый подход для решения этой ситуации?

Answer 1

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

Пример

application.css:

/*
 * Notice we aren't including twitter/bootstrap/bootstrap in here
 *= require bootstrap_and_overrides
 *= require mystyles
 */

bootstrap_and_overrides.less:

# Bootstrap with both bootstrap's variables, and your own
@import "twitter/bootstrap/bootstrap";
@import "myvariables";

mystyles.less:

# Your styles with both bootstrap's variables, and your own
@import "myvariables";
h1 {
  // Use 
  color: @textColor;
}

myvariables.less:

@import "twitter/bootstrap/variables";
@textColor: green;

Answer 2

Я нашел возможный способ сделать это, не приводя (слишком много) к повторению CSS-кода.*