eyeglass-restyle/test/fixtures/dynamic-modifiers.scss

@import "restyle";

@function number($str) {
  $nums: (
    '0': 0,
    '1': 1,
    '2': 2,
    '3': 3,
    '4': 4,
    '5': 5,
    '6': 6,
    '7': 7,
    '8': 8,
    '9': 9
  );
  @return map-get($nums, $str);
}

@function get-width($numCols) {
  @return (
    width: percentage(1 / number($numCols))
  );
}

@include restyle-define(test, (
  columns: none,
  restyle-modifiers: (
    '{cols}-column': (
      columns: restyle-var(cols),
      restyle-function(get-width): restyle-var(cols)
    ),
    '{rows}-rows': (
      rows: restyle-var(rows)
    ),
    'disabled-{is-disabled}': (
      disabled: restyle-var(is-disabled)
    ),
    '{cols}x{rows}': (
      rows: restyle-var(rows),
      columns: restyle-var(cols),
    ),
    '{foo}-bar': (
      foo: restyle-var(foo)
    )
  )
));

.test {
  @include restyle(test);

  &.cols-2 {
    @include restyle(2-column test);
  }
  &.cols-4 {
    @include restyle(4-column test);
  }
  &.4x3 {
    @include restyle(4x3 test);
  }
  &.2x2 {
    @include restyle(2x2 test);
  }
  &.4x4.foo-bar {
    @include restyle(4x4 foo-bar test);
  }


  &.is-disabled {
    @include restyle(disabled-true test);
  }
  &.is-not-disabled {
    @include restyle(disabled-false test);
  }
}