Media queries with less and Bootstrap

Question

I am just getting started with less. In an attempt to mmake less ugly Bootstrap's multitude of classes on tags, I have attempted to write some simple wrappers in less.

The entireity of my code is below.

// Import boostrap.
@import "./less/bootstrap.less";

// General classes for content.
focus {
    .span12;
}

content {
    .span8;
}

side {
    .span4;
}

The purpose of this less file is to provide nice looking wrappers that do a single thing, such as Bootstrap's .span12 class. I will, in time, extend this to buttons of sorts.

Either way, I am running into a problem when compiling the less file using lessc style.less.

The error it gives is:

NameError: .span12 is undefined in /srv/http/www/style.less on line 6, column 5:
5 focus {
6     .span12;
7 }

I have found some documentation with the .makeColumn(i) class but the problem with that is Bootstrap already has perfectly good media queries and I wanted to avoid writing my own.

Is there anyway to wrap the classes that already have the media queries or do I need to just suck it up and write my own for my wrappers?

Answer 1

You are going to run into a few major problems in this approach.

First, there are issues in that Bootstrap is dynamically generating the .spanX series of classes, so they are not immediately accessible as mixins, as I note in this answer.

Second, some of Bootstrap's span code is not set by the .spanX series, but is done through an attribute selector of [class*="span"] (see, as of this writing, line 602 of the mixins.less file; they are also extensively used in the responsive files for the @media rules). This selector code would not be picked up by a .span12 inclusion of code, and if you are not putting .span12 in your code, then your code will not have those properties applied. So you need to work around that.

There may be other issues not immediately obvious, but the point is, if you want to use Bootstrap for grid purposes (especially responsive), it is probably best to use it as it is designed. If you do not, then it is best to go and copy the Bootstrap code and modify it as you desire to make your own reduced grid code (if your intent is to use less overall classes in your html).