How to use the CSS to SCSS Converter
Convert CSS to SCSS in four steps:
1
Paste your CSS
Paste flat CSS rules into the input area. You can include any valid CSS including selectors, pseudo-classes, media queries, and CSS custom properties (--variable-name).
2
Configure conversion options
Toggle options to control: nesting of child selectors, CSS custom property to SCSS variable conversion, ampersand (&) prefix for modifier selectors, and media query hoisting into parent rules.
3
Review nested SCSS output
The output shows properly nested SCSS with SCSS variable declarations at the top. Child selectors appear indented inside parent blocks, and pseudo-classes use the & modifier.
4
Copy or download
Click Copy to copy the SCSS to your clipboard, or Download to save it as a .scss file ready to drop into your Sass project.
When to use this tool
Use the CSS to SCSS converter when migrating from plain CSS to a Sass workflow:
- →Migrating a legacy CSS stylesheet to a Sass-based project without rewriting every rule by hand
- →Converting exported CSS from a design tool (Figma, Adobe XD) into maintainable SCSS structure
- →Restructuring flat component CSS into nested BEM blocks for a new SCSS component library
- →Transforming CSS custom properties from a design token file into SCSS variable declarations
- →Nesting pseudo-class selectors (:hover, :focus, :active) inside parent rules using & notation
- →Preparing CSS code samples for SCSS tutorials or documentation that demonstrates nesting
- →Quickly checking how a CSS ruleset would look when refactored to SCSS nesting conventions
Frequently asked questions
Q:What nesting rules does the converter apply?
The converter nests selectors based on shared parent prefix. For example, .card and .card__title are nested so .card__title becomes a child rule inside .card. Pseudo-classes like :hover and :focus are converted to &:hover and &:focus using the SCSS & parent selector. Modifier classes like .card--active become &--active inside the parent.
Q:How does CSS custom property to SCSS variable conversion work?
When the 'Convert CSS variables' option is enabled, CSS custom properties defined with --variable-name notation are extracted and declared as SCSS variables ($variable-name) at the top of the output file. References to var(--variable-name) in property values are replaced with $variable-name. This produces cleaner, Sass-idiomatic code without the var() wrapper.
Q:What does media query hoisting do?
When hoisting is enabled, @media queries that apply to a specific selector are moved inside that selector's SCSS block, following SCSS's ability to nest media queries. For example, @media (min-width: 768px) { .card { padding: 2rem; } } becomes .card { @media (min-width: 768px) { padding: 2rem; } }. This keeps all rules for a component together in one place.
Q:Does this tool require a Sass compiler or Node.js?
No — the CSS to SCSS converter runs entirely in your browser using JavaScript. No Sass compiler, Node.js installation, or build tool is required. The conversion is structural (transforming the syntax and nesting), not compilation — it produces SCSS source code, not compiled CSS.
Q:Does the converter support BEM naming conventions?
Yes — BEM element (block__element) and modifier (block--modifier) patterns are detected automatically. Elements are nested inside their block parent, and modifiers are converted to &--modifier using the SCSS & parent selector. This produces idiomatic SCSS that preserves BEM intent while using Sass nesting for cleaner organisation.
Q:Are there limitations to what CSS can be converted?
The converter handles standard CSS selectors, pseudo-classes, pseudo-elements, and @media queries. Complex selectors with descendant combinators (ancestor descendant), sibling combinators (+, ~), or attribute selectors may produce output that requires manual review. @keyframes, @font-face, and @import rules are preserved as-is without nesting.