PostCss Make Grid

index.css

@import "./sircus-tools-sizes-mixins";

@mixin sircusToolsSize 12, height, vh;
@mixin sircusToolsSize 12, width, %;

@media (--g-viewport-sm) {
  @mixin sircusToolsSize 12, width, %, sm-;
}
@media (--g-viewport-md) {
  @mixin sircusToolsSize 12, width, %, md-;
}
@media (--g-viewport-lg) {
  @mixin sircusToolsSize 12, width, %, lg-;
}

package.json

{
  "name": "sircus-tools-sizes-mixins",
  "description": "",
  "version": "0.0.0",
  "homepage": "http://sircus.github.io",
  "keywords": [],
  "author": {
    "name": "blivesta",
    "url": "http://blivesta.com"
  },
  "license": "MIT",
  "scripts": {
    "build": "postcss index.css -d build -c postcss.config.js -w"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "postcss": "^5.0.21",
    "postcss-browser-reporter": "^0.5.0",
    "postcss-calc": "^5.2.1",
    "postcss-cli": "^2.5.2",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.1",
    "postcss-conditionals": "^2.0.2",
    "postcss-extend": "^1.0.1",
    "postcss-for": "^2.0.2",
    "postcss-import": "^8.1.2",
    "postcss-mixins": "^4.0.1",
    "postcss-nested": "^1.0.0",
    "postcss-reporter": "^1.3.3",
    "postcss-simple-vars": "^1.2.0",
    "css-mqpacker": "^5.0.1",
    "stylefmt": "^3.2.1"
  }
}

postcss.config.js

module.exports = {
  use: [
    'postcss-import',
    'postcss-custom-media',
    'postcss-custom-properties',
    'postcss-mixins',
    'postcss-nested',
    'postcss-for',
    'postcss-calc',
    'postcss-simple-vars',
    'postcss-conditionals',
    'postcss-extend',
    'autoprefixer',
    'css-mqpacker',
    'stylefmt',
    'postcss-reporter',
    'postcss-browser-reporter'
  ],
}

sircus-tools-sizes-mixins.css

@define-mixin sircusToolsSize $column, $property, $unit, $viewport {
  $half: calc($column / 2);

  @for $i from 1 to $column {
    $val: calc($(i)$(unit) / $column * 100);

    .t-$(viewport)$(property)$(i)of$(column) {
      $(property): $val;
    }

    @if $i == $half {
      .t-$(viewport)$(property)Half {
        @extend .t-$(viewport)$(property)$(i)of$(column);
      }
    }
    @if $i == $column {
      .t-$(viewport)$(property)Full {
        @extend .t-$(viewport)$(property)$(i)of$(column);
      }
    }
  }
}