CSS Preprocessor
Converter for SCSS, Less and Stylus
This CSS preprocessor converter reads nested rules, variables and mixins, then writes the flat CSS a browser understands. So you compile SCSS to CSS, or Less to CSS, or take plain CSS back the other way. The work runs in your browser, and we upload nothing.
- FreePrice
- Both waysDirections
- NoneSign-up
- NoneUploads
CSS Preprocessor Converter
Turn SCSS, Less or Stylus into plain CSS, or take a flat stylesheet back to nesting
Ready. Paste a stylesheet, or press one of the sample buttons.
What A CSS Preprocessor Converter Does
A stylesheet with nesting is not valid CSS. The browser drops the whole rule and says nothing. Therefore this CSS preprocessor converter flattens the nesting, swaps the variables for their values, and writes the plain CSS a browser can read.
Three things come back from one paste. First, the compiled CSS itself, ready to paste into a file. Then a list of the variables and mixins it found, with the value each one holds. Finally, a notes panel that names anything the compiler had to decide on its own.
That last panel matters more than it looks. A silent guess inside compiled CSS becomes a broken layout two screens later. So the converter prints every assumption next to the output rather than burying it.
The converter also works backwards. Because a flat file is hard to keep tidy, it can group plain CSS back into nested SCSS or Less with the shared values pulled out as variables. You install nothing and you send nothing.
How A Preprocessor Compiles To CSS
The work runs in three passes. First, the reader turns the source into a list of rules, each with a selector, a block and a depth. Then a second pass joins the nested selectors to their parents. Finally a writer prints the flat rules in order.
Joining selectors follows the selector rules the browser itself uses. A rule nested once becomes a descendant selector. A rule written with an ampersand keeps its parent attached, which is how you build a hover state and a modifier class.
Variables are the second job. Because SCSS and Less both let a name stand for a value, the compiler looks up every name it meets and writes the value in its place. Sass variables start with a dollar sign, and Less variables start with an at sign, so the reader tells them apart by the first character.
The writer never touches a browser API and never touches the network. So the page works offline. It also works on a file you would rather not paste into a hosted compiler, such as a stylesheet that names an unreleased product.
SCSS, Less and Stylus Side By Side
The three languages agree on the idea and differ on the punctuation. So the compiler reads all three and writes one output.
SCSS keeps the braces and the semicolons of CSS, which is why it feels like CSS with extra features. Less does the same, and it also allows a partial mixin call without parentheses. Stylus drops the braces, the semicolons and often the colons, and it leans on indentation instead.
Because the differences are small, one page can read all three. The reader decides which language it has by looking at the file: a dollar sign points at SCSS, an at sign in front of a name points at Less, and a missing brace points at Stylus. When the source is ambiguous, the page says so in the notes panel rather than guessing.
The output is the same in every case. So the browser sees one flat stylesheet, and you keep the source in the language your team already uses.
Why The Selector Join Is The Hard Part
A compiler that pastes the two selectors together with a space gets most nesting wrong. Because a rule nested under a parent becomes a descendant only when no ampersand is present, the reader tracks the parent for every level as it walks down.
So each block keeps the full selector it will print. A rule at the top starts with its own selector. Then a rule inside it inherits that one and adds its own, separated by a space. An ampersand replaces the space entirely, which is how the hover state of a parent attaches without a gap.
The order of the printed rules is the third case. Because a later rule of equal weight wins, the writer keeps the source order at every level. That way the cascade survives the compile, and a rule you meant to win still wins.
What Compiles Cleanly And What Gets A Note
A compiler earns trust by naming its own limits. Therefore the notes panel lists every construct the reader handled in a way you should check.
Mixin definitions and includes compile, because both languages define them in the source you pasted. Less guard expressions compile when the condition is a plain comparison. So a guarded mixin inlines the branch that matches.
Interpolation gets a note more often. Because a value built from a variable inside a string needs the value at compile time, the reader can resolve it only when the variable is in the same file. A value that comes from an import the page does not have stays as written, and the note says which name was missing.
Imports themselves get a note too. The page cannot fetch another file, since it never touches the network. So an at-import stays in the output as a plain CSS import, and the panel says the file was not read. That keeps the output honest rather than silently wrong.
The count beside the output is part of the same idea. Because a compile can change the size of a file in either direction, the panel reports the rules written, the declarations inside them, and the size of the input and the output. So a stylesheet that grew after compiling is visible at a glance rather than after a deploy.
How To Use The CSS Preprocessor Converter
Four steps, and none of them need an account.
- 1
Paste your stylesheet
So copy the whole file and paste it into the left box. A partial file works too, so a single component with its nesting is enough to try it.
- 2
Pick the direction
Then choose the source language. For SCSS to CSS, pick SCSS as the input and CSS as the output. Because the page reads all three, a mixed file still compiles.
- 3
Read the notes panel
Next, check the notes before you paste the output anywhere. A name the compiler could not resolve is easier to fix here than in a browser that shows a blank box.
- 4
Copy the CSS out
Finally, take the output. The copy button puts the whole stylesheet on your clipboard. After that, save it next to the source file and link it the way you link any other stylesheet.
Why Compile In The Browser
Five reasons this beats the usual ways of getting to plain CSS.
No build chain
So you skip the install. A compiler in a project means a package manager, a script and a config file. For one stylesheet, that is a lot of moving parts.
Your source never leaves
The compile runs in the tab you already have open. Therefore a stylesheet under a contract stays on your machine. The converter uploads nothing and logs nothing.
Both directions
Most compilers only go one way. Because this page also groups flat CSS back into nesting, it helps when you inherit a stylesheet with no source file and want to tidy it.
You see the assumptions
Then there is the notes panel. A build tool fails with a line number and nothing else. Here, the converter names every guess in plain words next to the output.
Nothing to keep running
Finally, there is no watch process. Nothing rebuilds when you save, and nothing breaks when you come back in a month. So the CSS preprocessor sits here until you need it.
Getting A Clean Compile From Any CSS Preprocessor
Six habits that keep the output close to what you expect.
- Keep the source whole So paste the file, not a fragment, when a variable is set at the top. Because the reader looks for a name at its definition, a fragment that misses that line gets a note.
- Match the language to the file Then check the direction against the file you copied. A Less file read as SCSS still compiles, but the ampersand rules behave differently and the output can surprise you.
- Avoid mixing the two A file that holds both a dollar sign and an at-sign variable is legal in neither language. So split it before you paste, and the notes panel stays quiet.
- Watch the ampersand The ampersand means the parent selector. Therefore a rule with one inside a media query attaches to the parent outside the query, which is rarely what you want. Still, every CSS preprocessor treats it the same way, so the rule travels between files.
- Name your mixins A mixin called by a name the reader can find inlines cleanly. So keep mixin names distinct from variable names, and the lookup never has two candidates.
- Minify last Compile first and minify after, in that order. Because a minifier strips the comments, running it first throws away the notes that explain the output.
Seven Slippery Preprocessor Mistakes
Each of these looks harmless in the source and hurts in the browser.
Deep nesting
Five levels of nesting reads well and compiles to a selector nobody can override. Because each level adds weight to the selector, a later rule with one class loses. So keep nesting to three levels.
A duplicate variable
A name set twice in the same scope wins with the last value. Then the first half of the file looks like it ignores the change. The notes panel names the winner so you can see it.
Units on a zero value
Zero pixels and zero are the same number in CSS. Because a variable holding a bare zero is easier to reuse, prefer the plain zero and drop the unit.
Mixin output nobody checked
A mixin that adds a vendor prefix writes every line into every rule that calls it. So a call inside a loop multiplies the output fast. Check the compiled size, not the source size.
Interpolation in a selector
Building a class name from a variable works at compile time. Therefore the name bakes into the CSS and cannot change at run time. A theme that needs both states needs two real classes. So a CSS preprocessor is the wrong place for that job.
Importing a partial twice
Two imports of the same partial write its rules twice. Then the second copy overrides the first, and a fix in one place appears to do nothing.
Forgetting the source
The compiled file is what ships, and it is not what you edit. So keep the source in the repository next to it, or the next change starts from a flat file with no nesting left.
CSS Preprocessor Questions
Is this CSS preprocessor converter free?
Yes. There is no account, no limit and no paid tier. So you compile as many stylesheets as you like.
Does it send my stylesheet anywhere?
No. Because the reader and the writer both run in your browser, the source never leaves your machine. Therefore a stylesheet under a contract stays private.
Can it compile SCSS to CSS?
Yes. Paste the SCSS, pick SCSS as the input and CSS as the output. Then the nesting flattens, the variables resolve and the mixins inline.
Can it compile Less to CSS?
Yes. That is the same page with Less chosen as the input. Because the two languages share the nesting idea, only the variable punctuation differs.
Does it read Stylus?
Yes. Stylus drops the braces and the semicolons and leans on indentation. So the reader follows the indentation when it cannot find a brace.
Can it turn CSS back into SCSS?
Yes. Because the same page works both ways, it can group flat rules by their shared selectors into nesting and pull repeated values out as variables.
Does it run my mixins?
It inlines a mixin that you defined in the file you pasted. A mixin that lives in an import the page cannot read stays as a call and gets a note. So the reader never guesses.
What happens to an import?
It stays in the output as a plain CSS import, and the notes panel says the file was not read. Because the page never touches the network, it cannot fetch the other file.
Does it understand variables?
Yes. A Sass variable starts with a dollar sign, and a Less variable starts with an at sign. So the reader tells them apart by that first character and writes the value in place.
Does it minify the output?
It can. Choosing minify drops the comments and the spare whitespace. Still, compile first and minify after, so the notes survive long enough to read.
Will the output match my build tool exactly?
It matches on the common features: nesting, variables, mixins, extends and simple guards. A construct your build tool handles with a plugin may get a note here instead.
Does it handle media queries inside a rule?
Yes. Because the compiler lifts nested media queries to the top level the way any preprocessor does, the output keeps the same cascade.
Does it support the ampersand?
Yes. A rule written with one keeps its parent attached, which is how you build a hover state or a modifier class. So the compiled selector reads the same way it reads in the source.
Can I paste only part of a file?
Yes, as long as the variables it uses are inside the part you pasted. The reader cannot resolve a name defined above the fragment you copied, and the note says so.
Does it write source maps?
No. A source map points at the original file through a path only your build has. Since this page has no file to point at, a map from here would mislead.
Does it work offline?
Yes. Once the page loads, the tool never reaches the network again. So the converter keeps working on a laptop in a room with no signal.
Does it keep my comments?
It keeps a block comment by default and can drop it when you choose minify. So a header note survives, and a note that only mattered while editing does not.
How many levels of nesting can it read?
No fixed ceiling exists. Your own file is the practical limit. Deep nesting compiles fine and reads badly. So three levels is a good habit.
Can it handle a large file?
Yes. Because the work is plain text handling, a stylesheet of a few thousand lines compiles in well under a second on a normal laptop.
Does it write CSS custom properties?
It reads and writes them as ordinary declarations. So a custom property in the source survives the compile untouched, and a preprocessor variable can hold one.
What about a vendor prefix mixin?
It inlines like any other mixin, which writes every prefixed line into every rule that calls it. Therefore check the compiled size rather than the source size.
Does it check for errors?
It reports what it could not resolve rather than refusing the whole file. So you get usable output plus a list, instead of one error and nothing else.
Can it compare the two directions?
Yes. Compile a file to CSS and then group that CSS back, and a lossy construct shows itself. Anything that does not survive the round trip was doing nothing.
Does it touch my clipboard on its own?
No. The page reads the clipboard only when you paste, and it writes only when you press copy. So the tool takes and replaces nothing without a click.
Is there a size limit?
No hard limit. Because the work happens in your own tab, the ceiling is your machine, and a normal stylesheet is far below it.
Does it work on a phone?
Yes. The boxes stack, and the copy button sits under the output. So a quick compile works from a phone when you are away from your machine.
Tools That Go With This One
Four pages the same job usually leads to.
CSS minifier
Then shrink the compiled file before it ships. Because minifying last keeps the notes readable, you compile here first and minify there after.
Open tool →CSS color converter
Also check a colour you typed as a variable. Then you see the same shade as hex, RGB and HSL before it goes into the stylesheet.
Open tool →HTML minifier
For the markup that pairs with the stylesheet, this drops the comments and the spare whitespace. So both files come out tidier.
Open tool →PX to REM converter
Because a preprocessor variable often holds a font size, this turns the pixels into rem. So the scale stays consistent after the compile.
Open tool →
Compile A Stylesheet Now
Paste the SCSS or the Less, read the notes, and take the flat CSS away. Nothing leaves your browser, so a stylesheet under a contract stays yours. The whole job takes one paste.