WebToolsPlanet
Converter Tools

SASS to Stylus Converter

Paste indented SASS and get Stylus output — variables, mixins, and includes are converted into Stylus conventions.

Last updated: May 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SASS to Stylus Converter?

Stylus is a CSS preprocessor that, like SASS, prefers an indentation-based syntax with no curly braces or semicolons. Variables in Stylus are plain identifiers assigned with `=` (e.g. `primary = #0f766e`), and mixins are simple functions defined by their name and called the same way.

This converter takes indented SASS and produces Stylus by first normalising the SASS syntax (turning `=name` into `@mixin name` and `+name` into `@include name` via the SASS-to-SCSS pass) and then converting that SCSS to Stylus. The result drops the `$` sigil from variable references, replaces SCSS variable declarations with Stylus assignments, and removes braces and trailing semicolons.

It is useful when migrating a SASS project to Stylus, integrating an existing SASS snippet into a Stylus codebase, or comparing the syntax differences. Sass-only features (control flow, modules, `@function`) do not have direct Stylus equivalents and may need manual rework.

How to Use SASS to Stylus Converter

1

Paste indented SASS into the input panel.

2

The Stylus output appears instantly on the right.

3

Inspect the converted variables, mixins, and nested rules.

4

Copy the Stylus or download it as a .styl file.

5

Manually rework any Sass control-flow or module-loading features.

Common Use Cases

  • Migrate a SASS partial to Stylus when adopting a new build pipeline.
  • Integrate a SASS component into a Stylus-based design system.
  • Compare how the same stylesheet looks in SASS vs. Stylus syntax.
  • Convert a documentation snippet from SASS to Stylus for an article.
  • Generate a Stylus baseline you can extend with Stylus-specific helpers.

Example Input and Output

Convert SASS variables and a mixin into Stylus syntax.

SASS input
$primary: #0f766e
=flex-center
  display: flex

.hero
  +flex-center
  color: $primary
Stylus output
primary = #0f766e
flex-center()
  display: flex
.hero
  flex-center()
  color: primary

Privacy

All conversion happens locally in your browser. No SASS or Stylus is transmitted to any server.

Stylus syntax flexibility

Stylus accepts optional braces, colons, and semicolons. The converter outputs the canonical indented form. Reformat with a Stylus formatter if your project prefers another style.

Frequently Asked Questions

Does Stylus support nested selectors?
Yes. Stylus supports nested selectors and & parent references with the same semantics as SASS and SCSS.
What happens to Sass colour helpers?
Stylus has its own colour functions (lighten, darken, mix). Most simple calls remain valid because the names overlap, but check the documentation for argument differences.
Are control-flow features converted?
No. Sass-only features like @if, @for, @each, and @function are not translated. Convert these manually using Stylus equivalents.
Does my SASS get uploaded?
No. Conversion runs entirely in your browser — nothing is sent to a server.

Related Tools

SASS to SCSS Converter
Convert SASS indented syntax to SCSS brace syntax. Adds curly braces and semicolons, converts = and + shorthand to @mixin and @include.
SASS to CSS Converter
Convert indented SASS syntax to plain CSS. Adds braces and semicolons, resolves $variables, and flattens nested selectors directly in your browser.
SASS to LESS Converter
Convert indented SASS syntax to LESS. Adds braces, maps $variables to @variables, and rewrites =mixin/+include shorthand to LESS .mixin() syntax.
SCSS to Stylus Converter
Convert SCSS code to Stylus indented syntax. Removes braces and semicolons, converts $variables to bare assignments, @mixin/@include to function syntax.
LESS to Stylus Converter
Convert LESS code to Stylus indented syntax. Removes braces and semicolons, converts @variable to bare variable assignments.
SCSS Beautifier
Format and beautify SCSS stylesheets online. Fixes indentation, normalizes spacing, and handles nested rules, $variables, @mixins, and @include directives.