Sass is a preprocessor scripting language that is interpreted or compiled

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. 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 is a pre-processing language which provides indented syntax (its own syntax) for CSS.

It provides some features, which are used for creating stylesheets that allows writing code more efficiently and is easy to maintain.

It is a super set of CSS, which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.

It provides the document style in a good, structured format than flat CSS. It uses re-usable methods, logic tree view using php mysql statements and some of the built-in functions such as color manipulation, mathematics and parameter lists.

Variables Feature

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body { font: 100% $font-stack; color: $primary-color; }

Nesting Feature

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

Partials Feature

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Import Feature

// _reset.scss
html, body, ul, ol { margin: 0; padding: 0; }

// base.scss
@import ‘reset’;

body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Mixins Feature

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }

.box { @include border-radius(10px); }

Extend/Inheritance Feature

// This CSS won’t print because %equal-heights is never extended.
%equal-heights { display: flex; flex-wrap: wrap; }

// This CSS will print because %message-shared is extended.
%message-shared { border: 1px solid #ccc; padding: 10px; color: #333; }

.message { @extend %message-shared; }
.success { @extend %message-shared; border-color: green; }
.error { @extend %message-shared; border-color: red; }
.warning { @extend %message-shared; border-color: yellow; }

Operators Feature

.container { width: 100%; }

article[role=”main”] { float: left; width: 600px / 960px * 100%; }
aside[role=”complementary”] { float: right; width: 300px / 960px * 100%; }

How to Compile a SASS File?

sass — watch input.scss output.css