Search code examples
cssstylesheetplaceholder

Can I shorten | truncate | crop my CSS file with some kind of placeholder?

Ok peep's... So I'm creating a Master CSS file to use with all my web app's.

My first thought was to have every permutation of a width: style I'd use, to hand. ie:

str = '';
ver = 0;
while(1){
    if( ver == 1000 )   break;
    str += '\n.w' + ver + 'x{ width: ' + ver + 'px; }';
    if( ver < 100 ) ver ++;
        else        ver += 100;
}

Would return the str value of:

.w0x{width:0px;}
.w1x{width:1px;}
.w2x{width:2px;}
......
.w100x{width:100px;}
.w200x{width:200px;}
.w300x{width:300px;}
......
.w1000x{width:1000px;}

Which I would then copy from the browser window into an awaiting file: master_snippet.css.

Ok... So there is no problem with the coding, it all works fine.

The Problem is the conceptual finished product. I'd have to create one of these string for every style I was using ie:

  • width
    • min
    • max
  • height
    • min
    • max
  • padding
  • margin
  • etc...

Just thinking about the amount of permutations makes me reach for the asprin bottle ?!?!?!?!? And I'm sure that if my browser was capable, it would do the same when it loaded such a file.

And So, My Question Is...

Is there some kind of placeholder I can use to save on the written permutations? ie:

Instead of the having a .w5x & .w10x instantiated like this:

.w5x{width:5px;}
.w10x{width:10px;}

<hr class="w5x">
<hr class="w10x">

All I'd have to do is instantiate the style once in the css document with a placeholder, of let's say ? for now.

Then when I instantiate the two <hr> tags, as above & below, the placeholder does it's thing and a valid style is appended to the element being styled, which in this case is the <hr>'s. ie:

.w?x{width:?px;}

<hr class="w5x">
<hr class="w10x">
Solution

  • cheers dudes, less/sass it is...