Style your components declaratively with familiar less syntax
Styless enables less syntax in your styled-components
$ yarn add --dev babel-plugin-styless
.babelrc
{
"plugins": ["babel-plugin-styless"]
}
Note that styless
should appear before babel-plugin-styled-components
if used.
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`.
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)
</ThemeProvider>
const Button = styled.button`
@import (reference) "variables";
.bg-light-blue;
`;
<button css="color: @color;"/>
<button css={`color: @color;`}/>
<button css={css`color: @color;`}/>
`${props => props.main}`
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>Normal</Button>
<Button main="mediumseagreen">Themed</Button>
<Button main="mediumseagreen" size="1.5em">Themed large</Button>
This is what you'll see in your browser :tada:, play with it on codesandbox
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>
</ThemeProvider>
This is what you'll see in your browser :tada:, play with it on codesandbox
Note that with webstorm-styled-components, we get syntax highlighting, color preview and ctrl+click access to variables!
constants.less
file, see the receipe for theme.@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.${hover};
must be terminated with a semi colon. The following will not work.const Button = styled.button`
${hover}
color: red;
`;
.babelrc
to have common.less
imported automatically.[
"styless",
{
"cwd": "babelrc",
"import": "../less/common.less"
}
]
.babelrc
, add the following or see https://stackoverflow.com/a/59472390/3666615 for more detals.[
"styless",
{
"import": "~antd/lib/style/themes/default.less",
"lessOptions": {
"javascriptEnabled": true
}
}
]