SCSS to Stylus
Convert SCSS variables, mixins, and loops to Stylus.
SCSS to Stylus Converter
Stylus supports almost every Sass feature with its own lighter syntax, so SCSS code converts nearly one-to-one – including loops, conditions, functions, and content blocks.
Feature mapping
| SCSS | Stylus |
|---|---|
$c: red !default; | $c ?= red |
@mixin m($a: 1px) {} | m($a = 1px) |
@include m(2px); | m(2px) |
@include m { … } + @content | +m() block + {block} |
@function double($x) { @return $x * 2; } | double($x) with return $x * 2 |
@for $i from 1 through 3 | for $i in 1..3 |
@for $i from 1 to 3 | for $i in 1...3 |
@each $x in a, b | for $x in a b |
@if / @else if / @else | if / else if / else |
%placeholder | $placeholder |
(a: 1px, b: 2px) / map-get($m, a) | {a: 1px, b: 2px} / $m.a |
math.div($a, 2) | ($a / 2) |
Stylus-specific adjustments
- Strings with interpolation (
"a#{$x}b") are rewritten as concatenation ("a" + $x + "b"). - Interpolated selectors use
{'' + $x}so units are kept in class names. - Unquoted data URIs get quotes, and values containing brackets keep a colon.
@useand@forwardhave no Stylus equivalent and are commented out;@whileloops are commented out as well.
Verified conversion
After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact. Color functions such as darken() use different formulas in Stylus and Sass, so a stylesheet that relies on them may compile to slightly different colors – the report will tell you.
Try the Stylus Compiler to experiment with the output.
Frequently Asked Questions
Does Stylus support Sass @content?
Yes, with block mixins. The converter turns @content into {block} and calls with a content block into +mixin() with an indented block.
Why are my converted colors slightly different?
Stylus and Dart Sass implement darken(), lighten(), and similar functions with different color math. The structure is converted exactly; only these calculated values may differ.
What happens to @use "sass:math"?
Module imports have no Stylus equivalent, so the line is commented out. math.div() calls are converted to plain division in parentheses.