0

I've just started using LESS and I love it. I'm now looking into grid.less which creates grids using LESS semantics.

This enables me to do something like this

//css
.mydiv { .column(9); }

//html
<div class="mydiv"> 9 column wide</div>

I've not studied less.js, but is there somehow possible to do the following:

//html
<div class="column(9)"> 9 column wide</div>

Is there any way to achieve this?

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
Steven
  • 19,224
  • 47
  • 152
  • 257
  • No, not with less alone. You shouldn't be adding presentation detail into the HTML anyway. – Kyle Jun 14 '13 at 09:52
  • I don't see any problems passing on parameters to CSS in HTML. It reduces the amount of CSS code I need to write. Now that SASS/LESS is getting a foothold, I think this would be a step in the right direction. So it would be neat to find out how I could test this. – Steven Jun 14 '13 at 10:47

1 Answers1

2

LESS cannot easily read a parameter from the HTML, as LESS is a preprocessor (it processes the CSS before anything is presented in HTML). However, you can prebuild classes that will essentially do the same thing. You just need to set a practical limit to how many columns wide something might be. My example here is modest (5 columns max), but easily changed with the variable parameter. It uses a loop structure in LESS to build up to the maximum number of column classes you desire:

LESS

@numColClasses: 5;

.buildColumnClasses(@colNum) when (@colNum =< @numColClasses) {
  .column@{colNum} {
      .column(@colNum);
  }
  .buildColumnClasses((@colNum + 1));
}
//end loop
.buildColumnClasses(@colNum) when (@colNum > @numColClasses) {}

//start loop
.buildColumnClasses(1);

(Pseudo) CSS Output

.column1 {
  code-for-columns-at: 1 wide;
}
.column2 {
  code-for-columns-at: 2 wide;
}
.column3 {
  code-for-columns-at: 3 wide;
}
.column4 {
  code-for-columns-at: 4 wide;
}
.column5 {
  code-for-columns-at: 5 wide;
}

Use in HTML much like you were noting

<div class="column5"> 5 column wide</div>
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Thanks for the explanation @scotts. This is what I'm using now. But I fail to see the benefits of LESS when working with grids. Because when working with grids, you usually don't want to change the width of a column. So when I still have to define col1 -> col12, I might just as well set the width and not use LESS to calculate this. Or am I missing something? – Steven Jun 14 '13 at 16:39
  • Preprocessors like LESS are not specifically designed to help with "grids," but to make generating CSS easier. So it does help do that, as my small code I created could generate 100 levels of column CSS code which would be a whole lot to type manually. Your argument that "you usually don't want to change the width" is valid as well for your "parameter passing" idea--why pass the parameter if the width is not normally going to change? Setting `mydiv` width to what you expect using `.column()` is then quite valid (preprocessor or not). It depends if you want the column count visible in the HTML. – ScottS Jun 14 '13 at 17:32
  • You will still have to define 100 `.column1{ .column(1); }` in your CSS so that you can use this in your html `
    `. The width of one single column will not change (the base col width). But I will be using various number of columns for one div depending on the content. If I could have passed an variable, I wouldn't have to write `col1 - col12` in my css as the LESS would preprocess my css with my variables. I'm sure passing parameters from HTML into CSS could be useful in other circumstances as well. Maybe we'll see this in the future (or not). Thanks for your input :)     – Steven Jun 14 '13 at 17:50
  • True. That is a valid point about having to have all of them defined in the CSS when you may only be using one or two column sizes. Of course, such dynamic interaction is really more what javascript is for :-). – ScottS Jun 14 '13 at 18:48