CSS to SCSS Converter

You have a 500-line flat CSS file and you’re migrating to SCSS. Manually nesting .btn, .btn:hover, .btn-primary, .btn-sm into a single nested block takes time and introduces typos. This tool does it automatically: paste CSS, get SCSS with proper nesting, & references, and $variable declarations for repeated values.

What This Converter Does

CSS and SCSS are semantically equivalent — every SCSS file compiles down to the same flat CSS. The difference is authoring ergonomics. SCSS nesting lets you write:

.btn {
  padding: 8px 16px;

  &:hover { background: darken($primary, 10%); }
  &-primary { background: $primary; }
  &-sm { padding: 4px 8px; }
}

Instead of the CSS equivalent spread across multiple unrelated blocks. This tool converts the flat CSS form into the nested SCSS form.

Selector Nesting

The converter groups rules that share a common selector prefix:

Rules are grouped greedily: the longest selector that is a prefix of another selector becomes the parent. Child selectors have their parent prefix replaced with &.

Variable Extraction

When Extract Variables is enabled, the converter scans all property values for repeated occurrences of:

• Colors: hex values like #3b82f6, #ffffff, #4b5563
• Sizes: pixel values like 16px, 8px, 24px

Values that appear in two or more declarations are promoted to $variable declarations at the top of the output. The original declarations are updated to reference the variables.

// Before (repeated #3b82f6 in 4 places)
.btn { color: #3b82f6; }
.link { color: #3b82f6; }

// After
$color-1: #3b82f6;

.btn { color: $color-1; }
.link { color: $color-1; }

The variable names use a numbered scheme ($color-1, $size-2) — rename them to semantic names like $primary and $spacing-sm in your editor after conversion.

& for Pseudo-classes and Modifiers

The & parent selector in SCSS can combine with suffixes to avoid repetition:

Disable this option to get explicit selector repetition instead, which is easier to read in some codebases.

Media Query Nesting

Modern SCSS (and native CSS nesting) supports moving @media rules inside selectors:

// Nested media query style
.card {
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

Enable Nest Media Queries to move detected @media rules inside the selector they contain. This feature works best when your media queries target single selectors.

Limitations

This converter uses a regex/parsing approach optimized for common CSS patterns. It handles standard CSS reliably, with some known edge cases:

• Complex selector relationships: .a .b and .a > .b are nested as & .b and & > .b, but deeply nested relationships may not collapse further
• Variable naming: Extracted variables get generic names — rename them to semantic names after conversion
• At-rules: @keyframes, @font-face, and similar at-rules are passed through without nesting
• Specificity changes: Nesting .btn-primary inside .btn may change specificity if the original selectors had different weights — verify the compiled output in browser DevTools

For production use, verify the compiled SCSS produces the same CSS as the original. Any SCSS compiler (dart-sass, sass) can compile and diff the output.

Privacy

All conversion runs entirely in your browser. Your CSS is never sent to any server. Paste proprietary stylesheets safely.

How to Use

1. Paste your CSS into the left panel
2. The converter runs automatically with a 300ms debounce
3. Toggle conversion options to adjust the output
4. Click Copy to copy the SCSS or Download .scss to save a file
5. Rename $color-N and $size-N variables to semantic names in your editor

CSS to SCSS vs Sass vs Less

All three are CSS preprocessors that compile to plain CSS:

This tool outputs SCSS (the .scss format), which is the most widely adopted and is the default in most frameworks (Bootstrap, Angular, and many others use SCSS).