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

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

LESS to Stylus Converter
Convert LESS code to Stylus indented syntax. Removes braces and semicolons, converts @variable to bare variable assignments.
SCSS to LESS Converter
Convert SCSS code to LESS syntax. Maps $variables to @variables, @mixin/@include to .mixin() syntax, and @extend to &:extend().
SCSS to SASS Converter
Convert SCSS brace syntax to SASS indented syntax. Removes braces and semicolons, converts @mixin/@include to = and + shorthand.
SASS to SCSS Converter
Convert SASS indented syntax to SCSS brace syntax. Adds curly braces and semicolons, converts = and + shorthand to @mixin and @include.
SCSS Beautifier
Format and beautify SCSS stylesheets online. Fixes indentation, normalizes spacing, and handles nested rules, $variables, @mixins, and @include directives.
Base64 Encoder/Decoder
Encode text to Base64 or decode Base64 to plain text — with URL-safe mode, auto-detect, and size stats.