Small flexgrid using Less

flexgrid.less

@media-unit: rem;

.with-unit(@v) { @r: ~'@{v}@{media-unit}'; }

@all: {
  @value: 0;
  @with-unit: auto;
  width: auto;
  media: ~'screen and (min-width: @{value})';
};

@xs: {
  @value: 30;
  @with-unit: .with-unit(@value)[];
  width: @with-unit;
  media: ~'screen and (min-width: @{with-unit})';
};

@sm: {
  @value: 48;
  @with-unit: .with-unit(@value)[];
  width: @with-unit;
  media: ~'screen and (min-width: @{with-unit})';
};

@md: {
  @value: 64;
  @with-unit: .with-unit(@value)[];
  width: @with-unit;
  media: ~'screen and (min-width: @{with-unit})';
};

@lg: {
  @value: 75;
  @with-unit: .with-unit(@value)[];
  width: @with-unit;
  media: ~'screen and (min-width: @{with-unit})';
};

.row, .col {
  @supports (display: flex) {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
  }
}

.row {
  flex-direction: row;
}

.col {
  flex-direction: column;
}

.row.reverse {
  flex-direction: row-reverse;
}

.col.reverse {
  flex-direction: column-reverse;
}

.generate-class(@name, @props...) {
  .@{name} {
    .property(@name, @value, @other...) {
      @{name}: @value;
      
      .property() {}
      .property(@other...);
    }
    .property(@props...);
  }
}

.rulesets(@type) {
  #class-name(@name, @idx) when not (@type = all) {
    @result: ~'@{name}-@{type}-@{idx}';
  }
  #class-name(@name, @idx) when (@type = all) and not (@idx = 0) {
    @result: ~'@{name}-@{idx}';
  }
  #class-name(@name, @idx) when (@type = all) and (@idx = 0) {
    @result: @name;
  }
  #class-name(@name) when not (@type = all) {
    @result: ~'@{name}-@{type}';
  }
  #class-name(@name) when (@type = all) {
    @result: @name;
  }

  .classes-by-names(@names) { 
    .classes(@i: 1, @class: extract(@names, @i)) when (@i =< length(@names)) {
      .generate-class(@class...);

      .classes((@i + 1));
    }

    .classes();
  }

  .columns(@n, @i: 0) when (@i =< @n) {
    .getValue(@idx) when (@idx = 0) { @r: @n };
    .getValue(@idx) when not (@idx = 0) { @r: @idx };
    @v: (.getValue(@i)[] * 100% / @n);

    @names:
      #class-name(col, @i)[] flex-basis @v max-width @v,
      #class-name(offset, @i)[] margin-left @v;

    .classes-by-names(@names);

    .columns(@n, (@i + 1));
  }

  @media @@type[media] {
    .columns(12);

    @j: justify-content;
    @ai: align-items;
    @o: order;
  
    @names:
      #class-name(start)[] @j flex-start,
      #class-name(center)[] @j center,
      #class-name(end)[] @j flex-end,
      #class-name(around)[] @j space-around,
      #class-name(between)[] @j space-between,
      #class-name(stretch-horizontal)[] @j stretch,
      
      #class-name(stretch-vertical)[] @ai stretch,
      #class-name(top)[] @ai flex-start,
      #class-name(middle)[] @ai center,
      #class-name(bottom)[] @ai flex-end,
      
      #class-name(first)[] @o -1,
      #class-name(last)[] @o 1;

    .classes-by-names(@names);
    
    .@{type} {
      width: @@type[width];
    }
  }
}

.rulesets(all);
.rulesets(xs);
.rulesets(sm);
.rulesets(md);
.rulesets(lg);