About the CSS to Stylus Converter
Stylus is the most permissive of the three big preprocessors. Braces, semicolons and even the colon between a property and its value are optional, and a file that uses none of them reads more like a configuration format than a stylesheet. This converter parses your CSS into a rule tree and prints it in that stripped down layout, with the indent width of your choosing applied consistently from top to bottom.
Nesting is where the line count really drops. A rule for .card .title that follows a rule for .card is moved inside it and shortened to .title, and a rule such as .card:hover becomes &:hover using the parent reference. Selector lists are handled together, so .card h3, .card h4 collapses into a single nested line. Turn nesting off if you would rather commit a flat translation first and reorganise by hand afterwards.
Two smaller choices are worth knowing about. Leaving colons on produces output that most syntax highlighters recognise immediately, while turning them off gives the terse margin 0 auto form that Stylus is known for; both compile to the same thing. Comments are carried across as // lines, which Stylus strips at compile time rather than emitting into the CSS. At-rules such as @media keep their prelude and gain an indented body. Send the result back through the Stylus to CSS Converter to confirm it round trips.
How to use
- Paste your stylesheet into the left pane, or drop a .css file onto it.
- Leave nesting ticked to fold descendant and state rules into their parents.
- Untick Keep colons if you want the terser Stylus style without them.
- Copy the result or download it as a .styl file.
Common questions
- Is Stylus still maintained?
- It receives occasional releases but development is far slower than Sass or LESS. New projects usually pick Sass, while Stylus lives on in older Node build chains.
- Will the converter create variables for me?
- No. It reproduces the structure of your stylesheet faithfully and leaves values alone, so nothing changes meaning behind your back. Pull out variables once the file is in place.
- What happens to vendor prefixed properties?
- They are copied through unchanged. Stylus can add prefixes with a plugin at build time, but this tool never removes or invents declarations.
- Which file extension should I use?
- Use .styl. That is what the Stylus CLI and every build plugin look for by default.