Meu trabalho

___ FOUNDATION

1.1 Sass, Not SASS 1.2 SCSS: Sassy CSS 1.3 Commenting 1.4 Importing 1.5 Nesting Selectors 1.6 The Parent Selector 1.7 Nesting Pitfalls

CSS is crafted to be simple, but scaling simplicity is difficult.

1.1 Sass, Not SASS

At Scale
๏

Slight variations of colors, fonts, numbers, & other properties arise Effective curbing of repetition can decline Stylesheet size may become unmanageable

๏ ๏

1.1 Sass, Not SASS

Enter Sass
๏ ๏

Syntactically Awesome Stylesheets Looks like CSS, but adds features to combat shortcomings Preprocessor, like CoffeeScript & Haml:

๏

Sass File

Sass Compiler

CSS File

1.1 Sass, Not SASS

๏ ๏

Created by Hampton Catlin Primary developers: Nathan Weizenbaum & Chris Eppstein Baked into Rails

๏

1.1 Sass, Not SASS

Assembly Tip

SASS Sass

1.1 Sass, Not SASS 1.2 SCSS: Sassy CSS 1.3 Commenting 1.4 Importing 1.5 Nesting Selectors 1.6 The Parent Selector 1.7 Nesting Pitfalls

๏ ๏ ๏

Sassy CSS (.scss) is the default file extension CSS is valid SCSS A second syntax (.sass) exists, but we'll focus on SCSS for the course

1.2 SCSS: Sassy CSS

application.scss

application.css

$main: #444; .btn { color: $main; display: block; } .btn-a { color: lighten($main, 30%); &:hover { color: lighten($main, 40%); } }

.btn { color: #444444; display: block; } .btn-a { color: #919191; } .btn-a:hover { color: #aaaaaa; }

1.2 SCSS: Sassy CSS

Assembly Tip

Since CSS doubles as valid SCSS, try writing styles normally & slowly incorporate new techniques.

๏

Sass adds // for single line comments - not output after compile

1.3 Commenting

application.scss

application.css

// These comments will // not be output to the // compiled CSS file /* This comment will */

/* This comment will */

1.3 Commenting

application.css
AS
SEMB

LY

/* * Imports styles found in 'buttons.css' * when the browser requests application.css */ @import "buttons.css";

R

EJ