<===> input.scss @fudge hux bloo; div { color: red; @fudge { span { width: 10px; a { font: whatever; } } } height: 20px; @-webkit-keyframes SOMETHING { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @-webkit-keyframes BOUNCE { from { left: 0px; } to { left: 200px; } } } div { span { font: whatever; } border: { upper: { left: 10px; right: 9px; } lower: { left: 8px; right: 7px; } } background: gray; } @fudge HEY, HOO, HA:first-child { color: blue; } @mudge div span, a:visited; @fu#{dge} foo { color: red; } <===> output.css @fudge hux bloo; div { color: red; height: 20px; } @fudge { div span { width: 10px; } div span a { font: whatever; } } @-webkit-keyframes SOMETHING { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @-webkit-keyframes BOUNCE { from { left: 0px; } to { left: 200px; } } div { border-upper-left: 10px; border-upper-right: 9px; border-lower-left: 8px; border-lower-right: 7px; background: gray; } div span { font: whatever; } @fudge HEY, HOO, HA:first-child { color: blue; } @mudge div span, a:visited; @fu dge foo { color: red; } <===> output-dart-sass.css @fudge hux bloo; div { color: red; height: 20px; } @fudge { div span { width: 10px; } div span a { font: whatever; } } @-webkit-keyframes SOMETHING { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-webkit-keyframes BOUNCE { from { left: 0px; } to { left: 200px; } } div { border-upper-left: 10px; border-upper-right: 9px; border-lower-left: 8px; border-lower-right: 7px; background: gray; } div span { font: whatever; } @fudge HEY, HOO, HA:first-child { color: blue; } @mudge div span, a:visited; @fudge foo { color: red; }