I found a web service called css2sass that converts CSS to Sass or Scss to be convenient, so I’ll introduce it.

• css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

What is css2sass?

css2sass is a web service that converts CSS to Sass or Scss format.

You can easily convert by inputting the CSS you want to convert in the left form, then clicking either SASS or SCSS from the middle arrow button to convert it to the right form.

How to Use css2sass

Input Source CSS into the Form

I tried css2sass using the following Nesting sample code from the official Sass website.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Select the Format You Want to Convert to: Sass or Scss

After inputting the source CSS code, click the SASS or SCSS button in the center.

This time I’ll click the SCSS button.

Check the Conversion Result: Sass or Scss

When you click the button, the converted Scss format code is output in the right form.

You can see that the converted scss code properly considers the nesting of the nav section.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

If you want to roughly check the CSS -> Sass (Scss) conversion results, you can use reverse conversion services like SassMeister for confirmation.

That was the explanation of how to use css2sass.

That’s all from the Gemba.