styled-scss v0.1.6

// page.scss

$bgColor: black;

@styled.button SpecialButton($primary: bool, $color: string) {
  display: inline-block;
  background: $bgColor;
  border-color: $color;

  @if $primary {
    background-color: $color;
    border-color: $bgColor;
  }
}

// pageStyles.js

import styled from "styled-components";
export const SpecialButton = styled.button`
  display: inline-block;
  background: black;
  border-color: ${props => props.color};
  ${({ color, primary }) =>
    primary &&
    css`
      background-color: ${color};
      border-color: black;
    `};
`;

Docs

styled-scss can also generate type interfaces to go along with the code! Right now it can only do Reason, but TypeScript and Flow should be supported soon

$ styled page.scss --types reason

styled-scss can also output to an Emotion runtime! Just pass the --runtime flag to the CLI

$ styled page.scss --runtime emotion