WebToolsPlanet
Converter Tools

SCSS to Stylus Converter

Paste SCSS code to get Stylus output — braces and semicolons removed, variables and mixins converted to Stylus syntax.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

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

Buy me a coffee

What is SCSS to Stylus Converter?

SCSS and Stylus are both CSS preprocessors. SCSS uses CSS-like brace syntax with `$variable` declarations and `@mixin`/`@include` keywords. Stylus uses a flexible indented syntax where braces, semicolons, and even colons are optional. Stylus variables use bare assignments (`var = value`) and mixins are defined and called as functions.

This converter handles the main syntactic differences: removing braces and semicolons, converting `$var: value` to `var = value`, converting `@mixin name` to `name()`, and converting `@include name` to a function call `name()`.

How to Use SCSS to Stylus Converter

1

Paste SCSS code into the input panel (or click Load Sample)

2

The Stylus output appears instantly in the right panel

3

Copy or download the converted .styl file

Common Use Cases

  • Developers migrating from SCSS to Stylus.
  • Teams evaluating Stylus as a replacement preprocessor for SCSS.
  • Developers learning how the same CSS pattern looks in different preprocessors.

Example Input and Output

Convert SCSS variables and mixin to Stylus.

SCSS input
$primary: #0f766e;
@mixin flex-center() {
  display: flex;
}
Stylus output
primary = #0f766e
flex-center()
  display flex

Privacy

All conversion happens in your browser. No code is sent to any server.

Frequently Asked Questions

Does Stylus support nesting like SCSS?

Yes. Stylus supports the same nesting and & parent selector that SCSS uses. The nesting structure is preserved in the conversion — only braces are removed.

Related Tools

Part of a Collection