Convert CSS to SCSS

Form for CSS converting to SCSS

This form allows you convert CSS styles to SCSS, paste or upload your CSS file below:



Your result can be seen below.

Result of CSS conversion to SCSS


Move to "Paste Code" for Save it

About CSS conversion to SCSS

About CSS styles conversion to SCSS

The CSS to SCSS Converter was created for online transform CSS(Cascading Style Sheets) styles into SCSS(Sassy Cascading Style Sheets). No need to download or install any software.

How it Works?

Just select the options you need and paste your CSS styles to the textarea above and click to the button "Convert" and you will instantly get SCSS.

Example of CSS conversion to SCSS

Before:
.menu_wtools {
width: 100%;background-color: #005555;}
.menu_wtools ul {margin: 0;padding: 0;float: left;}
.menu_wtools ul li {
display: inline;
}
/* some comments */
.menu_wtools ul li a {float: left;text-decoration: none;color: white;padding: 10.5px 11px;background-color: #005555;}
.menu_wtools ul li a:visited {color: white;}
.menu_wtools ul li a:hover, .menu_wtools ul li .current {color: white;background-color: #5FD367;}
After:
.menu_wtools {
	width: 100%;
	background-color: #005555;
	ul {
		margin: 0;
		padding: 0;
		float: left;
		li {
			display: inline;
			a {
				float: left;
				text-decoration: none;
				color: white;
				padding: 10.5px 11px;
				background-color: #005555;
				&:visited {
					color: white;
				}
			}
			a:hover, .current {
				color: white;
				background-color: #5FD367;
			}
		}
	}
}
After the conversion, you can apply the SCSS styles to your project or use it for some other purpose.
Donate

Did you like this tool? You can donate to us. This will help us improve our free web tools.

Paypal