All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Want to make grid system extendable with LESS

  • # July 11, 2013 at 9:29 am

    Hi all!

    I have this 12 column grid system i have “semi made” for personal use. But it has always had to have classes in the DOM. But since LESS 1.4.1 is now out, i wanted to be able to make it extendable directly in the stylesheet instead of having the DOM filled with classes and extra elements.

    But one of the key features about the grid system, is that it has breakpoint prefixes on the classes for verious screen sizes (mobile first) (no prefix, bp1-, bp2- etc..). And that it has changing gutter sizes via a class on the row element (.row, .row–sticky, .row–narrow, .row–custom). The rows dosn’t have bp prefixes in my codepen, but will later, just getting the basic to work first.

    Now i’m trying to do what i want, but i have no idea how to get the extend to work in the way i want.

    I have this [Codepen]( “LESS Grid system with extend”) and i hope you can understand what i am trying to do.

    Problem is that the two tests in the bottom gives me the following compiled CSS that is wrong:
    .ROWROWROW > .col,
    .row–sticky > .NAVIGATION {
    padding-left: 0;

    But i want:
    .row–sticky > .col,
    padding-left: 0;

    Kind regards,

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed