Input (CSS)
.card { padding: 16px; }
.card .title { font-weight: bold; }
.card .title span { color: gray; }Inputinput.css38 lines · 514 B
Paste CSS to begin
CSS → SCSS converts flat CSS into nested SCSS by grouping rules that share a parent selector into a single nested block. Descendant selectors collapse under their ancestors, so repetitive prefixes disappear and the structure mirrors your markup. The output is valid SCSS that you can extend with variables, mixins, and further nesting as you modernize a stylesheet.
CSS (Cascading Style Sheets) styles web pages with flat, independent selector blocks. SCSS is the bracket-based syntax of Sass, a CSS preprocessor that adds nesting, variables, mixins, and functions while remaining a superset of CSS. This converter restructures plain CSS into the nested SCSS idiom, giving you a cleaner starting point for a Sass-powered workflow without rewriting selectors by hand.
The main file is the entry point for each run.
Use the Input panel to pipe standard input to your program when it needs data.
Run sends your code to a fresh hosted runtime and streams the result into the output panel.
Your draft stays in this browser, and Share creates a separate snapshot link.
.card { padding: 16px; }
.card .title { font-weight: bold; }
.card .title span { color: gray; }.card {
padding: 16px;
.title {
font-weight: bold;
span {
color: gray;
}
}
}a { color: blue; }
a:hover { color: navy; }a {
color: blue;
&:hover {
color: navy;
}
}.nav { display: flex; }
.nav .item { padding: 8px; }
.nav .item.active { color: red; }.nav {
display: flex;
.item {
padding: 8px;
&.active {
color: red;
}
}
}.btn { color: white; background: blue; }
.btn:focus { outline: 2px solid blue; }.btn {
color: white;
background: blue;
&:focus {
outline: 2px solid blue;
}
}.grid { gap: 8px; }
@media (min-width: 600px) {
.grid { gap: 16px; }
}.grid {
gap: 8px;
}
@media (min-width: 600px) {
.grid {
gap: 16px;
}
}.box { position: relative; }
.box::before { content: ""; }.box {
position: relative;
&::before {
content: "";
}
}ul { margin: 0; }
ul > li { list-style: none; }ul {
margin: 0;
> li {
list-style: none;
}
}The editor uses Monaco, the engine behind VS Code, with language-aware editing tools and familiar keyboard controls.
Paste flat CSS; consecutive rules sharing a safe parent selector are grouped without changing cascade order.
Descendant selectors collapse into nested SCSS blocks.
Repetitive selector prefixes disappear from the output.
Valid SCSS whose nesting mirrors your markup structure.
A clean base ready for variables, mixins, and further nesting.
Original declarations preserved inside their nested blocks.
Restructuring happens in-browser; your stylesheet stays local.
No upload required to modernize CSS or compile a self-contained SCSS file.
Use the output as a starting point, then extract shared values into variables.
Deeply chained selectors nest deeply, so review for over-nesting.
Your SCSS output will appear here