Making font sizes based on fibonacci sequence with LESS

Even though it is not the best idea to use a lot of JavaScript in LESS, it come in handy when you need to define something more involved. The snippet below allows you to create font sizes based on the fibonacci sequence. Not only that, you can specify what property you want to target and what you want to name the classes that are generated.

.fibo( @n,@unit,@property) {
  @{property}: ~`
    (function(n,unit){
    var previous, current, temp;
  if (n == 0){
      return n + unit;
    }else{
    previous = 1;   current = 1;
    for (i = 3; i<=n; i++){
      temp = previous + current;
      previous  = current;
      current = temp;

    }
     return current+unit;
   }
   })( "@{n}", "@{unit}", "@{property}" )`;

}

.make-fibo-for(   @how-many ; @unit; @j : 1  ;  @starting-term:0 ; @step-size:1  ; @class-name:fs ; @property : font-size )
when not((@how-many)=0)  {

  .@{class-name}-@{j}{
    .fibo(@starting-term,~"@{unit}", ~"@{property}");

  }
  .make-fibo-for(   (@how-many - 1), @unit ,
    (@j + 1) ,  (@starting-term+@step-size) , @step-size , @class-name , @property );
}

which will output the following:

.fs-1 {
  font-size: 5px;
}
.fs-2 {
  font-size: 8px;
}
.fs-3 {
  font-size: 13px;
}
.fs-4 {
  font-size: 21px;
}
.fs-5 {
  font-size: 34px;
}
.fs-6 {
  font-size: 55px;
}
.fs-7 {
  font-size: 89px;
}
.fs-8 {
  font-size: 144px;
}
.fs-9 {
  font-size: 233px;
}