Creating new class using boostrap less mixins? - css

Question

I have one element
HTML
<div class="content col-md-10 col-md-offset-1">
</div>
What i need in LESS i something like this
.content{
.col-md-10;
.col-md-offset-1;
}
That later i can use shortner code like this
<div class="content col-md-10 col-md-offset-1">
</div>
I know i must use only content like this
<div class="content">
</div>
I have tried something like this but does not work?
.content{
.make-md-column(10);
.make-md-offset(1);
}

Answer 1

Update
It's called make-md-column-offset not make-md-offset
Running the following through any Online Less Compiler should work:
#grid-gutter-width: 30px;
#screen-md-min: 992px;
#grid-columns: 12;
// 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));
}
}
.content{
.make-md-column(10);
.make-md-column-offset(1);
}
Original
My guess would be you have something missing from the build process like importing the mixin functions or variables.
Here is the section on bootstrap grid mixins:
http://getbootstrap.com/css/#grid-less
Here is a Example Usage:
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
So your syntax looks fine. I'd make sure you don't have any build errors.