Меньше и Bootstrap: как использовать класс span3 (или spanX [any number]) как mixin?

Ответ 1

Новый ответ (требуется LESS 1.4.0)

То, что вы действительно хотите, называется расширением в терминологии LESS и SASS. Например, вам нужен элемент HTML (просто пример)...

<div class="myclass"></div>

... полностью вести себя так, как если бы он добавил класс span3 из начальной загрузки, но без добавления этого класса в HTML. Это можно сделать в LESS 1.4.0 с помощью :extend(), но все же нелегко, в основном из-за динамического генерации класса бутстрапа не будет поднято :extend().

Вот пример. Предположим, что этот начальный код LESS ( не динамически сгенерированный класс .span3 в качестве загрузочного файла):

.span3 {
  width: 150px;
}

.someClass .span3 {
  font-size: 12px;
}

.someOtherClass.span3 {
  background: blue;
}

Вы добавляете этот МЕНЬШИЙ код в 1.4.0:

.myclass {
  &:extend(.span3);
}

Что создает этот CSS:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}

ПРИМЕЧАНИЕ, как он автоматически не расширил другие экземпляры .span3. Это другое чем SASS, но это означает, что вам нужно быть более явным в расширении. Это имеет то преимущество, что вы избегаете чрезмерного взлома кода CSS.

Чтобы полностью расширить, просто добавьте ключевое слово all в extend() (это обновлено из моего исходного кода, поскольку я не знал о опции all):

.myclass {
  &:extend(.span3 all);
}

Что производит это:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}

Это делает ваш .myclass полностью эквивалентным (в моем примере) классу .span3. Однако это означает, что вам нужно переопределить любые динамические классы бутстрапов, чтобы они не были динамическими. Что-то вроде этого:

.span3 {
  .span(3);
}

Это значит, что :extend(.span3) найдет класс с жестким кодированием. Это нужно сделать для любой селекторной строки, которая динамически использует [email protected]{index} для добавления .span3.

Оригинальный ответ

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

Хорошо, я считаю, что я обнаружил вашу проблему. Прежде всего, bootstrap определяет серию .spanX классов в файле mixins.less, поэтому вам, очевидно, нужно быть уверенным, что вы включаете это в загрузочной загрузке. Однако я предполагаю, что это то, что у вас есть уже включенные.

Основная проблема

Основная проблема заключается в том, как bootstrap генерирует их сейчас, используя динамическое имя класса в цикле. Это цикл, который определяет серию .spanX:

.spanX (@index) when (@index > 0) {
      [email protected]{index} { .span(@index); }
      .spanX(@index - 1);
 }
.spanX (0) {}

В настоящее время, поскольку само имя класса динамически генерируется, оно не может использоваться как имя mixin. Я не знаю, является ли это ошибкой или просто ограничением LESS, но я знаю, что в настоящее время для записи любое динамически генерируемое имя класса не функционирует как имя mixin. Следовательно, .span3 может быть в коде CSS, который будет помещен как класс в ваш HTML, но он не доступен напрямую для целей mixin.

Исправление

Однако из-за того, как они структурировали код, вы все равно можете получить то, что вам нужно, потому что, как вы можете видеть выше в коде цикла, они используют истинный mixin для определения кода для классов .spanX. Поэтому вы должны иметь возможность сделать это:

.myclass {
    .span(3);
    // other rules...
}

Код .span(3) - это то, что цикл использует для заполнения класса .span3, поэтому вызов его для ваших классов даст тот же код, что и .span3. В частности, bootstrap имеет значение, указанное в mixins.less для этого mixin:

.span (@columns) {
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

Итак, вы получите свойства width для .span3 в .myclass.

Ответ 2

Это легко сделать с Less.js, но реальный вопрос: "Должен ли я смешивать классы структурной сетки с моими неструктурными классами?"

И ответ - нет.

Это плохая идея, преимущество сетки заключается в том, что она создает разделение проблем между структурным стилем и другим стилем. Я не говорю "никогда, никогда, никогда не будет". Но в целом это не должно. Мне даже не нравится видеть это:

<div class="span3 sidebar">
  <ul class="nav">
    ...
  </ul>
</div>

Где span3 находится в том же div как класс .sidebar. Проблема заключается в том, что теперь ваша боковая панель не просто "плавает" внутри столбца сетки, она стала частью сетки - что (в общем) затрудняет сохранение ваших стилей из-за обходных решений необходимо создать, чтобы заставить этот тип стиля быть отзывчивым.

Ответ 3

Ну, вы можете это сделать, но сначала вы должны определить .somethign, в этом примере я сделаю это font-wight: bold; и font-size 20px. Как вы можете видеть во втором классе .body мне не нужно было определять font-weight: bold; и font-size: 20px;, я просто добавил .something в него

.something {
    font-weight: bold;
    font-size: 20px;
}
.body {
    background-color: gray;
    border: ridge 2px black;
    .something
}

Здесь вы можете увидеть пример. http://jsfiddle.net/7GMZd/

ВЫ НЕ МОЖЕТЕ ЭТОТ ЭТОТ ПУТЬ

.body {
    background-color: gray;
    border: ridge 2px black;
    .something {
         font-weight: bold;
         font-size: 20px;
    }
}