CSS to SCSS/Sass

Introduction

This is an online converter tool which helps to convert CSS to SCSS/Sass and vice versa.

How to use this tool?

You can input/paste your code directly into the editor, then click the Convert button. After converting, you can download or save/share the result. It will create a link for you to share with others. You can also sign-in using Google/GitHub to save results into your account.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

Learn more

CSS Syntax

      
p {
  color: red;
  text-align: center;
}
      
    

What is SCSS?

SCSS is a preprocessor language that is interrupted or compiled into CSS. It is a special type of SASS(Syntactically Awesome Style Sheets). Scripting of SCSS is done in Saasscript. SCSS contains all the features of CSS with a few extra added on speciality features as well.

Using SCSS, we can add many additional functionalities to CSS such as variables, nesting and more. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS.

Learn more

SCSS Syntax

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

  li { display: inline-block; }

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

What is Sass

Sass is a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS. The aim is to make the coding process simpler and more efficient.

Learn more

Sass Syntax

      
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

      
    

      
.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}
      
    

      
.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}
    
    

      
.alert
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover
    font-weight: bold


  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] &
    margin-left: 0
    margin-right: 10px


  // You can even use it as an argument to pseudo-class selectors.
  :not(&)
    opacity: 0.8