sass-converter

sass module converter

Setup

Install it in your project:

npm install sass sass-converter --save-dev

and add a script to your package.json like this:

{
  "scripts": {
    "build": "sass --load-path=node_modules sass:css"
  }
}

How to use

For simple module:

// sass/utilities/display.scss
@use "sass-converter/module";

///////////////////////////////
$name: display;
$version: 1.0;
$author: erkanunluturk;
///////////////////////////////

$config: (
  // add class prefix
  prefix: $name,
  // add prefix of media query
  mediaprefix: false, // or true
  // no media query for `xs` since this is the default in Bootstrap
  // add null for xs
  breakpoint: false // sm or (null, sm, md, lg, xl)
);

@function display() {
  @return(
    None: (
      display: none
    ),
    Block: (
      display: block
    )
  );
}

@include module.export(display(), $config);

css output: css/utilities/display.css

.displayNone {
  display: none;
}

.displayBlock {
  display: block;
}

For multiple module:

// sass/utilities/flex.scss
@use "sass-converter/module";

///////////////////////////////
$name: flex;
$version: 1.0;
$author: erkanunluturk;
///////////////////////////////

$config: (
  // add class prefix
  prefix: $name,
  // add prefix of media query
  mediaprefix: false, // or true
  // no media query for `xs` since this is the default in Bootstrap
  // add null for xs
  breakpoint: false // sm or (null, sm, md, lg, xl)
);

@function flex() {
  // flex-wrap
  $wrap: (
    NoWrap: (
      flex-wrap: nowrap
    ),
    Wrap: (
      flex-wrap: wrap
    )
  );
  // flex-direction
  $direction: (
    Row: (
      flex-direction: row
    ),
    Col: (
      flex-direction: column
    )
  );
  // align-items
  $align-items: (
    AlignItemsStart: (
      align-items: flex-start
    ),
    AlignItemsEnd: (
      align-items: flex-end
    )
  );
  @return module.collect($wrap, $direction, $align-items);
}

@include module.export(flex(), $config);

css output: css/utilities/flex.css

.flexNoWrap {
  flex-wrap: nowrap;
}

.flexWrap {
  flex-wrap: wrap;
}

.flexRow {
  flex-direction: row;
}

.flexCol {
  flex-direction: column;
}

.flexAlignItemsStart {
  align-items: flex-start;
}

.flexAlignItemsEnd {
  align-items: flex-end;
}

Thanks

Thanks to Jessica Biggs for more than two maps in one module