Может ли Bootstrap 3 Grid быть расширенным?

Question

Я работаю над проектом, в котором мы оставляем Bootstrap меньше файлов нетронутыми. Мы также не хотим использовать классы Bootstrap в HTML, поскольку мы не можем использовать его в будущем. Я экспериментирую с использованием функции «расширить», чтобы группировать имена классов с версией BS в таблице стилей. Это хорошо работает, за исключением столбцов сетки. Поскольку имена классов столбцов построены с помощью mixin-grid-mix, я не могу их расширять. Любые мысли о том, как не использовать имена классов BS для сетки И не раздувать CSS?

Если вы не знакомы с возможностью расширения, вы можете просмотреть документацию здесь: http://www.lesscss.org/#-extend

//Not ideal because it duplicates declarations. 
.mytable { 
    .table; 
} 

//Good because it groups the selectors instead of duplicating declarations. 
.mytable { 
    &:extend(.table all); 
} 

//This does not work, but I wish it did. 
.search { 
    &:extend(.col-sm-6); 
} 

//This is not ideal because it duplicates declarations. 
.search { 
    .make-sm-column(6); 
} 

Answer 1

.col-sm-6 динамично генерировать на время компиляции, так can not extended.

.search { 
    .make-sm-column(6); 
} 

генерирует:

.search { 
    position: relative; 
    min-height: 1px; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
@media (min-width: 768px) { 
    .search { 
    float: left; 
    width: 50%; 
    } 
} 

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

В теории вы можете можете скомпилировать дважды:

1. lessc bootstrap.less> bootstrap.css

2. lessc test.less> test.css с test.less:

   @import (less) "bootstrap.css"; 
   .search { 
       &:extend(.col-sm-6); 
   } 
   

делает diff над bootstrap.css и test.css я нашел, как ожидалось, среди других:

> .col-sm-6, 
> .search { 
1010c1082,1093 
< .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
--- 

перекомпиляции кажется futher:

• пут .col-MD- * и т.д. на новой линии
• изменения, например, от 0,75 до .75
• изменения (enabled = false) в (enabled=false)

, которые все не имеют смысла при первом взгляде

Answer 2

Вы c расширить столбцы в SASS

.cols 
    @extend .row 
    .col1, .col2 
    @extend .col-xs-6 

Answer 3

Как уже говорилось, сетка не может действительно быть продлен так, альтернативное решение должно быть найдено. Несмотря на то, что принятый ответ правильный, я хотел бы поделиться другим подходом, который можно рассмотреть.

1. Сформировать вашу сетку или просто скопировать все соответствующие классы (.col-xs-1, .col-xs-2 ЕСС). С помощью CSS и поместить их в новый файл с именем Меньше чем-то вроде grid.less (обратите внимание на расширение меньше).

2. импортировать этот файл в основной .less файл следующим образом:

   @import (reference) "grid.less";

3. Теперь вы можете &:extend(.col-sm-6);

Импорт с помощью (reference) сгенерирует CSS без каких-либо следов .col-xx-x классов и будет записывать только значения, которые вы фактически использование.