How to read this LESS css?

Question

I am trying to figure out Joni Korpi's Frameless CSS frameless grid (http://framelessgrid.com/) and I'm having a hard time reading the .less file he has. I have a basic understanding that LESS uses variables so I know column = 48 and gutter = 24 and that's about it.

Does 1cols = 1 * (48 + 24) - 24)/ 12 ?

What I don't understand is @1col: @1cols; and .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; }

Can anybody help?

https://github.com/jonikorpi/Frameless/blob/master/frameless.less

@font-size: 16;         // Your base font-size in pixels
@em: @font-size*1em;    // Shorthand for outputting ems, e.g. "12/@em"

@column: 48;    // The column-width of your grid in pixels
@gutter: 24;    // The gutter-width of your grid in pixels


//
// Column-widths in variables, in ems
//

 @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
 @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
 @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
 @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
 @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
 @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
 @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
 @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
 @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;


//
// Column-widths in a function, in ems
//

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

Answer 1

@1cols etc are just variable names. Variable names in less are allowed to start with numbers.

@1col: @1cols;

That's just making the saying that variable @1col equals the variable @1cols set earlier. Presumably, "1col" because 1 is singular, but the others are plural, so it just gives you the option of using either @1col or @1cols both of them being the same value.

@1cols: ( 1 * (@column + @gutter) - @gutter) / @em;

That's just math. If you want a section that's 3 columns width, that's 3 times the (column width + gutter width) minus one gutter.

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

That's a mixin function that takes a variable number of columns with a default parameter of 1. You can use it like this:

.my-class{
   .width(3);
}
/* these two are identical */
.my-class{
   width: @3cols;
}

The benefit of the first method is that you can replace 3 with a variable so you can use it elsewhere.

Answer 2

@ is a variable identifier... similar to $ in php.

So what hes doing is defining a mixin which is in some respects like a function, that takes the argument @cols with a default value of 1 if none is provided. this mixin then sets the width css property to the value of the expression:

(@cols * (@column + @gutter) - @gutter) / @em;

Your @em value is going to be the value of 1em in pixels i think. So if your base font-size is 12 then @em = 12.

As far as the @1col: @1cols; thats just a convenience so that you can use @1col (singular) or @1cols (plural) and they mean the same thing.

Answer 3

The other answers nicely explain what LESS files do, so I'll talk about his use of @em.

If you do

.some_class { 
    just_an_em: @em 
}

in your .less file, it will come out to

.come_class {
    just_an_em: 16em
}

in .css after compiling. This seems to be because LESS preserves units upon division so that '16/@em' gives '1em', as expected.