CSS to SCSS Converter

Paste your CSS below and get clean, nested SCSS back instantly. Selectors that share a parent are nested, pseudo-classes become &:hover style rules, and colours and font stacks can be pulled out into SCSS variables. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our SCSS to CSS Compiler.

About CSS to SCSS Converter

SCSS (Sassy CSS) is the most popular syntax of Sass, a CSS preprocessor. It's a superset of CSS, so every valid CSS file is already valid SCSS, but it adds features that make large stylesheets easier to write and maintain. This converter gives you a head start when moving an existing stylesheet to Sass: instead of rewriting it by hand, paste it in and get a nested, variable-driven version back.

Here's a small example of CSS and the SCSS this tool produces from it:

.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
}

.button:hover {
  background-color: #217dbb;
}

.card .title {
  color: #fff;
}

$background-color-1: #3498db;
$color-1: #fff;
$background-color-2: #217dbb;

.button {
  background-color: $background-color-1;
  color: $color-1;
  padding: 10px 20px;

  &:hover {
    background-color: $background-color-2;
  }
}

.card {
  .title {
    color: $color-1;
  }
}

What the converter does

• Nests selectors – rules such as .nav ul li a are placed inside their parents, and rules that share a parent are grouped together.
• Uses the parent selector – :hover, :focus, ::before and other pseudo-classes and pseudo-elements become &:hover style rules inside the element they belong to.
• Extracts variables – colours (hex, rgb, hsl, named colours and colours inside shorthands like border or box-shadow) and font stacks become SCSS variables such as $color-1. Identical values reuse the same variable, so you can change a colour in one place. Choose Repeated values only to create variables just for values used more than once.
• Keeps at-rules intact – @media, @supports and @container blocks are nested too, while @font-face, @keyframes and @import are carried over as they are.
• Understands modern CSS – native CSS nesting, custom properties and !important are handled correctly.

Where to go next with SCSS

Once your styles are in SCSS you can take them further: group related variables into a _variables.scss partial and load it with @use, turn repeated groups of declarations into @mixins, and use built-in modules such as sass:color to derive hover and border shades from a single base colour.

Nesting groups rules under their shared parent, which can change the order some rules appear in. If your stylesheet relies on a later rule overriding an earlier one with the same specificity, check the result, or turn off Nest selectors to keep the original order and only extract variables. Comments are removed from the output.