Как обернуть несколько классов начальной загрузки с помощью LESS?

Question

Я скачал оригинальный загрузочный МЕНЬШЕ файлы, и в моем HTML-файла У меня есть следующий код, который работает отлично:

<div class="col-md-4 col-md-offset-8"> 

Но я хотел бы сделать что-то вроде этого:

<div class="my-cell"> 

и в моем файле меньше есть:

.my-cell{ 
    .col-md-04; 
    .col-md-offset-8; 
} 

Но я получаю сообщение об ошибке от менее компилятора Visual Studio,: «Необъявленных подмешать»

Чем меньше файлов будет найден, потому что следующая строка работает:

.col-xs-12; 

Как я могу обернуть несколько твиттер-самозагрузки меньше классов в один класс?

Answer 1

Если у вас меньше файлов, у вас также должен быть файл mixins.less. Пройдите через него, и есть много миксинов, доступных для создания столбца, строки или сетки и т. Д. Скопировав некоторые из них здесь, проверьте исходный файл, который вы загрузили.

Кроме того, не забудьте включить в свой mixin.less файл, прежде чем использовать его в менее файл как т его:

@import "mixins.less"; //path of the file - relative to the path of file you are writing your less code. 



// Below is some code from mixins.less but refer the actual file. 
// Creates a wrapper for a series of columns 
.make-row(@gutter: @grid-gutter-width) { 
    margin-left: (@gutter/-2); 
    margin-right: (@gutter/-2); 
    .clearfix(); 
} 

// Generate the extra small columns 
.make-xs-column(@columns; @gutter: @grid-gutter-width) { 
    position: relative; 
    float: left; 
    width: percentage((@columns/@grid-columns)); 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@gutter/2); 
    padding-right: (@gutter/2); 
} 

// Generate the small columns 
.make-sm-column(@columns; @gutter: @grid-gutter-width) { 
    position: relative; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@gutter/2); 
    padding-right: (@gutter/2); 

    // Calculate width based on number of columns available 
    @media (min-width: @screen-sm-min) { 
    float: left; 
    width: percentage((@columns/@grid-columns)); 
    } 
} 

// Generate the small column offsets 
.make-sm-column-offset(@columns) { 
    @media (min-width: @screen-sm-min) { 
    margin-left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-sm-column-push(@columns) { 
    @media (min-width: @screen-sm-min) { 
    left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-sm-column-pull(@columns) { 
    @media (min-width: @screen-sm-min) { 
    right: percentage((@columns/@grid-columns)); 
    } 
} 

// Generate the medium columns 
.make-md-column(@columns; @gutter: @grid-gutter-width) { 
    position: relative; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@gutter/2); 
    padding-right: (@gutter/2); 

    // Calculate width based on number of columns available 
    @media (min-width: @screen-md-min) { 
    float: left; 
    width: percentage((@columns/@grid-columns)); 
    } 
} 

// Generate the medium column offsets 
.make-md-column-offset(@columns) { 
    @media (min-width: @screen-md-min) { 
    margin-left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-md-column-push(@columns) { 
    @media (min-width: @screen-md) { 
    left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-md-column-pull(@columns) { 
    @media (min-width: @screen-md-min) { 
    right: percentage((@columns/@grid-columns)); 
    } 
} 

// Generate the large columns 
.make-lg-column(@columns; @gutter: @grid-gutter-width) { 
    position: relative; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@gutter/2); 
    padding-right: (@gutter/2); 

    // Calculate width based on number of columns available 
    @media (min-width: @screen-lg-min) { 
    float: left; 
    width: percentage((@columns/@grid-columns)); 
    } 
} 

// Generate the large column offsets 
.make-lg-column-offset(@columns) { 
    @media (min-width: @screen-lg-min) { 
    margin-left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-lg-column-push(@columns) { 
    @media (min-width: @screen-lg-min) { 
    left: percentage((@columns/@grid-columns)); 
    } 
} 
.make-lg-column-pull(@columns) { 
    @media (min-width: @screen-lg-min) { 
    right: percentage((@columns/@grid-columns)); 
    } 
} 

И после того, как импортировать файл подмешать, просто использовать его как:

.my-cell{ 
     .make-md-column(@columns; @gutter: @grid-gutter-width); //pass the parameters accordingly. for grid, gutter you can use variables.less file as well as the defaults are already defined there 
}