Convert SCSS to CSS

How does the Conversion of the SCSS free tool work?

Paste or upload your SCSS style file into the textarea above, then click the “Convert” button. Now, wait for the tool to process your SCSS code and transfer it to CSS. Once the conversion is complete, you will be able to view and download the converted CSS file.

Here you can see more Online CSS Converter Tools.

Example of SCSS to CSS

Before:

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

  li { 
    display: inline-block;
  }

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

After:

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

Example includes Variables, @mixin & @include, and @function

Before:

//for variables
$color: #fff000;
$border: rgba($color, 0.88);

#alert {
  border: 1px solid $border;
}

// for @mixin and @include
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal {
  @include reset;

  li {
    display: inline-block;
    margin-left: -2px;
    margin-right: 2em;
  }
}

nav ul {
  @include horizontal;
}

//for @function
@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$color: #000;
.header {
  background-color: invert($color, 90%);
}

After:

//for variables
#alert {
  border: 1px solid rgba(255, 240, 0, 0.88);
}

// for @mixin and @include
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

//for @function
.header {
  background-color: black;
}

Once you have converted your SCSS code to CSS using the online converter tool, you can utilize the CSS styles in your project or any other purpose of your choice.