Grow your CSS skills. Land your dream job.

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](http://codepen.io/dennisjohnsen/pen/xHqgl “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,
    .ROWROWROW > .COLCOLCOL,
    .HEADER > .NAVIGATION {
    padding-left: 0;
    }

    Kind regards,
    Dennis

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".