Bootstrap только для mixins/placeholders - с семантическими классами

Question

Я думаю об использовании только семантических классов в своем HTML, в то же время используя стили классов Bootstrap внутри семантических классов.

Например:

Примеси:

.newsItem { 
    @include span4; 
} 

или заполнители/продолжается:

.newsItem { 
    extend span4; 
} 

Возможно ли это вообще? и видите ли вы какую-то причину, почему это не рекомендуется? Благодарю.

Answer 1

@include span4; и @extend .span4; не будет работать, потому что:

• В первой, не существует каких-либо Примеси называют таким образом в загрузчике.
• Во втором нет никакого селектора, называемого span4, селектора генерируются с помощью микшинов, таких как grid-core-span-x.

Для этой цели встроены миксины: makeRow() и makeColumn().

В вашем случае, если вы хотите использовать span4 в вашем .newsItem DIV, вы должны сделать это в вашем SASS:

.newsItem { 
    @include makeColumn(4); 
} 

Код из этих Mixins прост.

@mixin makeRow() { 
    margin-left: $gridGutterWidth * -1; 
    @include clearfix(); 
} 

@mixin makeColumn($columns: 1, $offset: 0) { 
    float: left; 
    margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2); 
    width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)); 
} 

Это Примеси имеют МИНУСЫ. Я не использую их, поскольку адаптивная сетка не будет использоваться в вашем семантическом классе. Зачем? Потому что, если вы посмотрите на файлы, которые обеспечивают бутстрап отзывчивый (например, _responsive-767px-max.scss), только классы spanX преобразуются в 100% ширину. Код:

@media (max-width: 767px) { 
    /* ... */ 

    [class*="span"], 
    .uneditable-input[class*="span"], 
    .row-fluid [class*="span"] { 
     float: none; 
     display: block; 
     width: 100%; 
     margin-left: 0; 
     @include box-sizing(border-box); 

     /* ... */ 
}