css2sass Service That Converts CSS to Sass/Scss is Super Convenient
I found a web service called css2sass that converts CSS to Sass or Scss to be convenient, so I’ll introduce it.
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.
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;
}
After inputting the source CSS code, click the SASS or SCSS button in the center.
This time I’ll click the SCSS button.
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.