Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Build Status npm semantic-release style: styled-components


Styless enables less syntax in your styled-components


$ yarn add --dev babel-plugin-styless


  "plugins": ["babel-plugin-styless"]

Note that styless should appear before babel-plugin-styled-components if used.

Key features

  • Simplifies the code

    use @main instead of ${props => props.theme.main}

  • Uses variables directly in your styled components

    @size: if(@small, 4px, 10px);
  • Uses operations directly in your styled components

    use @size * 3 instead of ${props => parseFloat(props.size) * 3 + "px"}

  • Uses functions directly in your styled components.

    color: darken(@highlight, 5%);
There is no need to import `darken`.
  • Supports rgb, hsl and hsv color spaces
    color: hsv(90, 100%, 50%);
  • Migrate less to styled-components seamlessly.

    There is no confusion when transitioning from less to styled-components caused by width: 3px * 2.

  • Supports variable overwritten

    const Button = styled.button`
        @highlight: blue;                           // can be overwritten by theme or props
        background: darken(@highlight, 5%);         // make green darken by 5%
    <ThemeProvider theme={{highlight: "red"}}>
        <Button highlight="green">click me</Button> // green (set in props) overwrites red (set in theme)
  • Supports imports and mixins
    const Button = styled.button`
        @import (reference) "variables";
  • Supports css props
    <button css="color: @color;"/>
    <button css={`color: @color;`}/>
    <button css={css`color: @color;`}/>
  • Still supports the styled-components syntax for more complex jobs!
    `${props => props.main}`

Your first Styless component

const Button = styled.button`
    @main: palevioletred;
    @size: 1em;
    font-size: @size;
    margin: @size;
    padding: @size / 4 @size;
    border-radius: @size / 2;
    color: @main;
    border: 2px solid @main;
    background-color: white;
<Button main="mediumseagreen">Themed</Button>
<Button main="mediumseagreen" size="1.5em">Themed large</Button>

This is what you'll see in your browser 🎉, play with it on codesandbox

Advanced Styless component example

const Button = styled.button`
    @faded: fade(black, 21%);
    @size: if(@small, 4px, 10px);
    cursor: pointer;
    cursor: if(@disabled, not-allowed);
    color: hsv(0, 0%, 99%);
    padding: @size @size * 3;
    border: 1px solid @faded;
    border-bottom: 4px solid @faded;
    border-radius: ${4}px;
    text-shadow: 0 1px 0 @faded;
    background: linear-gradient(@highlight 0%, darken(@highlight, 5%) 100%);
    &:active {
        background: darken(@highlight, 10%);
// Notice that the @highlight variable is resolved from the theme, and overwritten from a props in the second button.
<ThemeProvider theme={{highlight: "palevioletred"}}>
    <Button>Click me</Button>
    <Button highlight="hsl(153, 100%, 33%)">Or me</Button>
    <Button disabled small>But not me</Button>

This is what you'll see in your browser 🎉, play with it on codesandbox

Note that with webstorm-styled-components, we get syntax highlighting, color preview and ctrl+click access to variables!


  • How to refer to a constants.less file, see the receipe for theme.
  • Cool, how does it work? Head over to the explanations.
  • Why less? The @color systax reduces the confusion from $color when comparing to the SC syntax ${props}. If there is enough demand, a scss plugin could be created.
  • The styled-components mixins such as ${hover}; must be terminated with a semi colon. The following will not work.
const Button = styled.button`
  color: red;
  • How to import a less files for all components? As SC components are small in nature, it can be convenient to have a common less file be imported in all components. Add the following to your .babelrc to have common.less imported automatically.
    "cwd": "babelrc",
    "import": "../less/common.less"
    "import": "~antd/lib/style/themes/default.less",
    "lessOptions": {
      "javascriptEnabled": true