Meu trabalho

Disponível somente no TrabalhosFeitos
  • Páginas : 13 (3123 palavras )
  • Download(s) : 0
  • Publicado : 21 de abril de 2013
Ler documento completo
Amostra do texto
___ 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 maybecome 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, NotSASS

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 singleline 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

EJECTED

1.4 Importing



The CSS @import rule has been avoided: prevents parallel downloading @import with .scss or .sass happens during compile rather than client-side File extension is optional





1.4 Importing

application.scss

// Imports styles found in 'buttons.scss' // when the compiler processes application.scss @import "buttons";

application.scssapplication.css

?
buttons.scss buttons.css

1.4 Importing

Partials
Adding an underscore creates a partial. Partials can be imported, but will not compile to .css

application.scss

application.css

_buttons.scss

1.4 Importing

application.scss

// Will import _buttons.sass, buttons.sass, // _buttons.scss, or buttons.scss @import "buttons";

application.scss

application.css_buttons.scss

1.4 Importing

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

application.css
AS
SEMB

LY

.content { border: 1px solid #ccc; padding: 20px; } .content h2 { font-size: 3em; margin: 20px 0; } .content p { font-size: 1.5em; margin: 15px 0; }
R

EJ ECTED

1.5 Nesting Selectors application.scss

application.css

.content { border: 1px solid #ccc; padding: 20px; } .content h2 { font-size: 3em; margin: 20px 0; } .content p { font-size: 1.5em; margin: 15px 0; }

.content { border: 1px solid #ccc; padding: 20px; } .content h2 { font-size: 3em; margin: 20px 0; } .content p { font-size: 1.5em; margin: 15px 0; }

1.5 Nesting Selectors

application.scssapplication.css

.content { border: 1px solid #ccc; padding: 20px; h2 { font-size: 3em; margin: 20px 0; } p { font-size: 1.5em; margin: 15px 0; } }

.content { border: 1px solid #ccc; padding: 20px; } .content h2 { font-size: 3em; margin: 20px 0; } .content p { font-size: 1.5em; margin: 15px 0; }

A

SS

E M B LY

AP V PRO

1.5 Nesting Selectors

D
E

Nesting Properties
Certain properties...
tracking img