CSS to SCSS Converter

Convert flat CSS to nested SCSS instantly. Automatic selector nesting, &:hover pseudo-class syntax, and color variable extraction.

Extract color variables

CSS Input

SCSS Output

// Color variables
$color-1: #e3eb01;

.nav {
  background: #1a1a1a;
  padding: 16px;

  ul {
    list-style: none;
    margin: 0;

    li {
      display: inline-block;

      a {
        color: #ffffff;
        text-decoration: none;
        padding: 8px 16px;

        &:hover {
          color: $color-1;
        }

        &.active {
          color: $color-1;
          font-weight: bold;
        }
      }
    }
  }
}

6 rules converted

17 nested selectors1 variable extracted

What is SCSS?

SCSS (Sassy CSS) is a CSS preprocessor — a superset of CSS that compiles to regular CSS. It adds powerful features that plain CSS lacks: variables, nesting, mixins, functions, and inheritance.

Every valid CSS file is also valid SCSS. This makes migration easy — you can rename a .css file to .scss and start using SCSS features gradually.

Feature

CSS

SCSS

Variables

❌ (only --custom-props)

✅ ($var: value)

Nesting

❌

✅

Mixins

❌

✅

Functions

Limited

✅ Full

Inheritance

❌

✅ (@extend)

Math

calc() only

✅ Native

Conditionals

❌

✅ (@if/@else)

Loops

❌

✅ (@each/@for)

How CSS to SCSS Nesting Works

The converter groups child selectors inside their parent. The & symbol refers to the parent selector and is used for pseudo-classes, pseudo-elements, and modifier classes.

CSS (before)

.nav { background: #000; }
.nav ul { margin: 0; }
.nav ul li { display: flex; }
.nav a { color: white; }
.nav a:hover { color: yellow; }
.nav a.active { font-weight: bold; }

SCSS (after)

.nav {
  background: #000;

  ul {
    margin: 0;

    li {
      display: flex;
    }
  }

  a {
    color: white;

    &:hover {
      color: yellow;
    }

    &.active {
      font-weight: bold;
    }
  }
}

Essential SCSS Features

SCSS Variables

// Define variables at the top
$primary-color: #0070f3;
$secondary-color: #ff4757;
$font-stack: 'Inter', sans-serif;
$border-radius: 8px;
$spacing-unit: 16px;

// Use throughout your stylesheet
.button {
  background: $primary-color;
  border-radius: $border-radius;
  padding: $spacing-unit ($spacing-unit * 1.5);
  font-family: $font-stack;
}

.alert {
  color: $secondary-color;
  border: 1px solid $secondary-color;
}

SCSS Mixins

// Reusable blocks with optional parameters
@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == 'mobile' {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == 'tablet' {
    @media (max-width: 1024px) { @content; }
  }
}

.hero {
  @include flex-center(column);
  
  @include responsive('mobile') {
    padding: 24px 16px;
  }
}

SCSS @extend (Inheritance)

// Base styles that can be extended
%button-base {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  @extend %button-base;
  background: #0070f3;
  color: white;
}

.btn-secondary {
  @extend %button-base;
  background: transparent;
  border: 2px solid #0070f3;
  color: #0070f3;
}

How to Compile SCSS to CSS

Node.js (sass package)

npm install -g sass
sass input.scss output.css
sass --watch input.scss output.css

Vite (built-in)

npm install -D sass
// Vite automatically compiles .scss files
import './styles.scss'

Webpack

npm install --save-dev sass sass-loader
// webpack.config.js
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

Frequently Asked Questions

What is SCSS and how is it different from CSS?

SCSS (Sassy CSS) is a superset of CSS that adds features like variables ($var: value), nesting, mixins, functions, and inheritance. Every valid CSS file is also valid SCSS. SCSS compiles down to regular CSS for browsers.

What does a CSS to SCSS converter do?

A CSS to SCSS converter takes flat CSS selectors and converts them to nested SCSS structure. For example, .parent .child { } becomes .parent { .child { } }. It also uses &:hover and &:focus syntax for pseudo-classes.

What is the & (ampersand) in SCSS?

The & in SCSS refers to the parent selector. &:hover means the hover state of the parent. &.active means the parent with an .active class. &::before means the ::before pseudo-element of the parent.

How do SCSS variables work?

SCSS variables start with $: $primary-color: #0070f3. You then use them like: color: $primary-color. This makes it easy to maintain consistent values across a stylesheet and update all instances by changing one variable.

What is the difference between SCSS and Sass?

SCSS uses CSS-like syntax with curly braces {} and semicolons ;. Sass (indented syntax) uses indentation instead of braces. SCSS is more popular because it's easier to learn (valid CSS is valid SCSS). Both compile to CSS.

How do I compile SCSS to CSS?

Compile SCSS using: (1) node-sass or sass npm package (sass input.scss output.css), (2) Vite, Webpack, or Parcel (built-in SCSS support), (3) VS Code Live Sass Compiler extension, (4) CodePen/StackBlitz (built-in SCSS support).

Why use SCSS nesting?

Nesting reduces repetition, makes the structure mirror your HTML hierarchy, and improves readability. Instead of writing .nav {}, .nav ul {}, .nav ul li {} separately, you write them nested inside each other — much cleaner for large stylesheets.

Can I nest @media queries in SCSS?

Yes! SCSS allows nesting @media queries inside selectors: .nav { color: red; @media (max-width: 768px) { color: blue; } }. This compiles to .nav { color: red; } @media (max-width: 768px) { .nav { color: blue; } }.

What are SCSS mixins?

Mixins are reusable blocks of CSS: @mixin flex-center { display: flex; align-items: center; justify-content: center; }. Use with @include flex-center. They can accept parameters like functions.

Does SCSS work with Tailwind CSS?

Yes, SCSS and Tailwind can coexist. Tailwind works at the utility class level while SCSS handles component-level styles. Configure your build tool to process SCSS before Tailwind's PostCSS plugins.

CSS to Tailwind Converter HEX to RGB Converter PX to REM Converter Celsius to Fahrenheit All Tools

Disclaimer: This tool provides automated CSS to SCSS conversion for common patterns. Complex CSS with nested at-rules or non-standard syntax may require manual adjustments. Always verify output in your project.