LESS focal point loop A loop to generate focal point classes.

gistfile1.less

@focalPointGridSize: 5;
@focalPointGridColSize: (100/@focalPointGridSize)/100;

.focalPointXLoop (@x) when (@x > 0) {
  
  .focalPointYLoop (@y) when (@y > 0) {

    @xPos: floor(percentage((@x) * @focalPointGridColSize));
    @yPos: floor(percentage((@y) * @focalPointGridColSize));

    .focal-point-@{x}-@{y} {
      background-position: @xPos @yPos;
    }

    .focalPointYLoop (@y - 1);
  }

  .focalPointYLoop (0) {
    @xPos: floor(percentage((@x) * @focalPointGridColSize));
    .focal-point-@{x}-0 {
      background-position: @xPos 0;
    }
  }

  .focalPointYLoop (@focalPointGridSize);
  .focalPointXLoop (@x - 1);
}

.focalPointXLoop (0) {
  .focalPointYLoop (@y) when (@y > 0) {

    @yPos: floor(percentage((@y) * @focalPointGridColSize));

    .focal-point-0-@{y} {
      background-position: 0 @yPos;
    }

    .focalPointYLoop (@y - 1);
  }

  .focalPointYLoop (0) {
    .focal-point-0-0 {
      background-position: 0 0;
    }
  }

  .focalPointYLoop (@focalPointGridSize);

}

.focalPointXLoop (@focalPointGridSize);