SASS (Syntactically Awesome Style

Sheets)Anoop P R

Senior Software EngineerExperion Technologies

CSS Problems

• Repetitive • Not expressive• No variables• No functions• No calculation• No inheritance etc.

What is Sass?

• SASS is a system that extends CSS and can make you more efficient and make your CSS more organized.• Serves as

Scripting language Preprocessor for CSS

SASS has two main parts

• SassScript (.sass & .scss) SassScript is a scripting language that extends the CSS

syntax, adding nested rules, variables, mixins.• SASS CSS pre-processor

The pre-processor interprets your SassScript and produces well formatted standard CSS.

SASS Syntax

body font: 100% $font-stack color: $primary-color

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

.sass

.scss

The process

• Write your SassScript• Use CSS pre-processor to interpret your SassScript• CSS files are produced by the pre‐processor (use

these in your website)

What sass offers

• Variables• Nesting• Mixins• Partials• Selector inheritance• Calculations• Conditions

Variables

• Variables allow you to assign a value to an easy-to-remember placeholder name Works with hex values, strings of text, colors, numbers,

boolean values etc. No more memorizing hex values!

Variables

h1#master { color: #f00;}

.post-hd { color: #ff0000;}

a.outline { color: red;}

.sidebar p { color: rgba(255, 0, 0, 1);}

css scss

$base-color : red;

h1#master { color: $base-color;}

.post-hd { color: $base-color;}

a.outline { color: $base-color;}

.sidebar p { color: $base-color;}

Nesting

• Nested rules allow you to break up endlessly long selectors of CSS

Nesting

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

css scss.nav { ul { margin: 0; padding: 0; list-style: none; li {

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

color: #fff; } }}

Nesting (properties)

.selected-text { font-family: "Georgia", Times, serif; font-style: oblique; font-size: 12px;}

.selcted-text { font { family: "Georgia", Times, serif; style: oblique; size: 12px; }}

css

sass

Mixins

• Mixins allow you to chunk up CSS declarations to be reusable with one reference.• Reusable code

Mixins

.box-1 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

.box-2 { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px;}

css

Mixins

.box-1 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

.box-2 { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px;}

css scss

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

.box-0 {@include border-radius;}

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

Tip: Mixins can reference mixins as well

Selector inheritance

• Inheritance imports syntax and styles from another selection.

Selector inheritance

.message { border: 1px solid #ccc; padding: 10px; color: #333;}.success { @extend .message; border-color: green;}.error { @extend .message; border-color: red;}.warning { @extend .message; border-color: yellow;}

scss css

.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333;}.success { border-color: green;}.error { border-color: red;}.warning { border-color: yellow;}

Partials

• You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files.• A partial is simply a Sass file named with a leading

underscore.• Sass partials are used with the @import directive.

_buttons.scss _navigation.scss

genaral.sass

@import "buttons", "navigation";

Arithmetic operations

• Sass has a handful of standard math operators like +, -, *, /, and %

.main-article { float: left; width: 600px / 960px * 100%;}

Conditions

$type: monster;

p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}

SASS Compilation

• Install Sass•

• SASS to CSS

• Watch sass file

gem install sass

sass input.scss output.css

sass --watch input.scss:output.css

Thank You!