styled-scss
styled-scss copied to clipboard
rrdelaney
A Sass to JavaScript and React compiler
trafficstars
$ npm install --global styled-scss
styled-scss compiles Sass with dynamic variables to a styled-components runtime
Take your Sass file
// 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;
}
}
Run styled-scss on it
$ styled page.scss
Get styled-components
// 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
Type generation
$ styled page.scss --types reason
styled-scss can also output to an Emotion runtime! Just pass the
I don't like styled-components though!
--runtime flag to the CLI$ styled page.scss --runtime emotion
rrdelaney