Из-за bootstrap3, много моего html закончится следующим образом:
<div class="form-group">
<label class="control-label col-xs-4 col-sm-6">Name on card</label>
<div class="col-xs-8 col-sm-6">
<input class="form-control" type="text" placeholder="Name on Card" required />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4 col-sm-6">Card Number</label>
<div class="col-xs-8 col-sm-6">
<input class="form-control" type="text" placeholder="Card Number" name="EWAY_CARDNUMBER" required value="4444333322221111" />
</div>
</div>
См. приведенный выше код, ярлык node имеет несколько классов для разных экранов мультимедиа. И я хочу, чтобы они просто использовали мой собственный класс, чтобы сократить их.
Я пытаюсь сделать меньше, чтобы создать класс, который простирается от нескольких классов, таких как
my-control-label:extend(.control-label, .col-xs-4, col-sm-6){}
Но это не работает, потому что меньше использует точное совпадение для приведенного выше примера. Да, я мог бы попытаться расширить "все", как показано ниже:
my-control-label:extend(.control-label all, .col-xs-4 all, col-sm-6 all){}
Но это раздражает, и он взорвёт сгенерированный css.
Итак, есть ли простой способ избежать такого дублирования?
Спасибо, Рон
Обновление # 1:
Даже продлить все не работает для моего случая
HTML
<div id='finalise'>
<form class='form-horizontal'>
<div class='form-group' >
<label class='my-label' />
<div class='my-controls'>
<input class="form-control" type="text" placeholder="Name on Card" required />
</div>
...
</div>
</form>
</div>
Минус:
#finalise {
.my-label:extend(.control-label all, .col-xs-4 all, .col-sm-3 all, .col-lg-2 all){}
.my-controls:extend(.control-label all, .col-xs-8 all, .col-sm-5 all, .col-lg-4 all){}
}
Сгенерированный css:
@media (min-width: 768px) {
.form-horizontal .control-label,
.form-horizontal #finalise .label,
.form-horizontal #finalise .controls {
text-align: right;
}
}
См. 3-я строка не будет применять html node, поэтому он не работает.
Любые предложения?
Обновление # 2: Хотя это не общий способ объединить несколько классов в пользовательский, но он решил эту проблему. Он использует bootstrap grid mixins, решил эту проблему. Спасибо NiloVelez
HTML
<div id='finalise'>
<form class='form-horizontal'>
<div class='form-group' >
<label class='control-label' />
<div class='controls'>
<input class="form-control" type="text" placeholder="Name on Card" required />
</div>
...
</div>
</form>
</div>
Минус:
#finalise {
.form-group {
.make-row();
}
.control-label {
.make-xs-column(4);
.make-sm-column(5);
.make-lg-column(6);
}
.controls {
.make-xs-column(8);
.make-sm-column(5);
.make-lg-column(6);
}
}