SASS - Syntactically Awesome Stylesheets

SASS - SYNTACTICALLY AWESOME STYLESHEETS

Blake Baker and Briana Fulfer

Sass is an extension of CSS3 It adds

Nested Rules Variables Mixins Selector Inheritance And more…

Has 2 Syntaxes

The first is the main syntax – SCSS “SassyCSS” Superset of CSS3’s syntax Extension is .scss

Has 2 Syntaxes

The second is the Indented Syntax Just “SASS” An older version More concise. Not as similar to CSS. Uses indentation of lines to specify

blocks instead of brackets/ semicolons.

Variables - SCSS Syntax

Image from http://sass-lang.com/

Variables - Indented Syntax

Image from http://sass-lang.com/

Nesting - SCSS Syntax

Image from http://sass-lang.com/

Nesting - Indented Syntax

Image from http://sass-lang.com/

Mixins - SCSS Syntax

Image from http://sass-lang.com/

Mixins - Indented Syntax

Image from http://sass-lang.com/

Selector Inheritance - SCSS Syntax

Image from http://sass-lang.com/

Selector Inheritance - Indented Syntax

Image from http://sass-lang.com/

@import

Image from http://sass-lang.com/

Sites Used

http://sass-lang.com/