Можно ли добавить класс span3 в mixin, чтобы не помещать его в каждый элемент моего HTML?
Что-то вроде:
.myclass {
.span3;
// other rules...
}
ИЗМЕНИТЬ
Извиняюсь, я забыл указать важную деталь: span3 - стандартный класс Bootstrap.
Я не нашел его определения в любом файле структуры Bootstrap.
То, что вы действительно хотите, называется расширением в терминологии 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.
Это легко сделать с Less.js, но реальный вопрос: "Должен ли я смешивать классы структурной сетки с моими неструктурными классами?"
И ответ - нет.
Это плохая идея, преимущество сетки заключается в том, что она создает разделение проблем между структурным стилем и другим стилем. Я не говорю "никогда, никогда, никогда не будет". Но в целом это не должно. Мне даже не нравится видеть это:
<div class="span3 sidebar">
<ul class="nav">
...
</ul>
</div>
Где span3 находится в том же div как класс .sidebar. Проблема заключается в том, что теперь ваша боковая панель не просто "плавает" внутри столбца сетки, она стала частью сетки - что (в общем) затрудняет сохранение ваших стилей из-за обходных решений необходимо создать, чтобы заставить этот тип стиля быть отзывчивым.
Ну, вы можете это сделать, но сначала вы должны определить .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;
}
}