CSS to Stylus Converter

Paste your CSS below and get clean, indentation-based Stylus back instantly. Braces, colons and semicolons are dropped, selectors that share a parent are nested, pseudo-classes become &:hover style rules, and colours and font stacks can be pulled out into Stylus variables. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our Stylus to CSS Compiler.

About CSS to Stylus Converter

Stylus is a CSS preprocessor with a deliberately minimal syntax: braces, colons and semicolons are all optional, and nesting is expressed through indentation. On top of that it adds variables, mixins, functions and operators. This converter turns an existing stylesheet into idiomatic Stylus, so you can start using those features without rewriting your CSS by hand.

Here's a small example of CSS and the Stylus this tool produces from it:

.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
}

.button:hover {
  background-color: #2980b9;
}

.card .title {
  color: #fff;
}

$background-color-1 = #3498db
$color-1 = #fff
$background-color-2 = #2980b9

.button
  background-color $background-color-1
  color $color-1
  padding 10px 20px
  border none

  &:hover
    background-color $background-color-2

.card
  .title
    color $color-1

What the converter does

• Uses Stylus's minimal syntax – braces and semicolons are removed and properties are written as color red. Turn on Keep colons if you prefer color: red.
• Nests selectors – rules such as .nav ul li a are indented under their parents, and rules that share a parent are grouped together.
• Uses the parent selector – :hover, :focus, ::before and other pseudo-classes and pseudo-elements become &:hover style rules inside the element they belong to.
• Extracts variables – colours (hex, rgb, hsl, named colours and colours inside shorthands like border or box-shadow) and font stacks become Stylus variables such as $color-1 = #fff. Identical values reuse the same variable. Choose Repeated values only to create variables just for values used more than once.
• Protects modern CSS functions – Stylus has its own built-in functions with names like min(), max(), clamp() and invert(), which it would try to evaluate. Values using them are wrapped in unquote() so they reach the browser unchanged.
• Keeps at-rules intact – @media, @supports and @container blocks are nested too, while @font-face, @keyframes and @import are carried over.

Nesting groups rules under their shared parent, which can change the order some rules appear in. If your stylesheet relies on a later rule overriding an earlier one with the same specificity, check the result, or turn off Nest selectors to keep the original order and only extract variables. Comments are removed from the output.