Compile SCSS


Convert your CSS into SCSS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. SCSS is a CSS extension, everything that works in CSS works in SCSS. This means that for a Sass user to understand it, they need only understand how the Sass extensions work. Most of these, such as variables, parent references, and directives work the same; the only difference is that SCSS requires semicolons and brackets instead of newlines and indentation.

What is SASS?

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.


Compile SCSS Tool

This is a free tool that will take your CSS and quickly and easily convert it into SCSS which is compatible with SASS so you don't have to do it manually. Feel free to use this tool to extend your CSS with all the great features of SASS.

Comparison with LESS

Both Sass and Less are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules. Less is inspired by Sass.Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. Less was designed to be as close to CSS as possible, and as a result existing CSS can be used as valid Less code. The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).

A SASS to SCSS example:

A simple rule in Sass:

#sidebar
  width: 30%
  background-color: #faa
could be converted to SCSS just by adding brackets and semicolons:
#sidebar {
  width: 30%;
  background-color: #faa;
}
In addition, SCSS is completely whitespace-insensitive. That means the above could also be written as:
#sidebar {width: 30%; background-color: #faa}

External Links


© 2018 CSS Minifier | Privacy Policy | 3 Reasons to Minimize your CSS | Sitemap