malte wessel - sass preprocessor / compass / ydn brand

39
YDN BRAND say hello.

Upload: drbreak

Post on 08-May-2015

190 views

Category:

Technology


1 download

DESCRIPTION

Syntactically Awesome Stylesheets and Compass

TRANSCRIPT

Page 1: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

YDNBRAND

say hello.

Page 2: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

SASSSyntactically Awesome Stylesheets

nah'mean?

Page 3: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

● preprocessor● metalanguage● interpreted into CSS● providing mechanisms available in traditional

programming languages● adding:

○ nested rules○ variables○ mixins○ inheritence○ directives○ ....

SASS

Page 4: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Why?

● save bytes● save time● readability● flexibility● frontend eco system

Page 5: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Syntax

● the same old song:● brackets or no brackets?

CSS styleeasily readable

*.scss

ruby styleless code

*.sass

Page 6: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Featureslean back.

Page 7: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Nested rulesnesting CSS rules within one another

Page 8: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Variablesuhhm, variables.

Page 9: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Variables data types

● numbers ○ e.g. 1.2, 13, 10px

● strings ○ e.g. "foo", 'bar', baz

● colors ○ e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)

● booleans ○ e.g. true, false nulls

● lists of values ○ e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

Page 10: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Operationsstandard arithmetic operations

Page 11: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Mixinsdefine styles that can be re-used throughout the stylesheet

Page 12: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Inheritencetell one selector to inherit all the styles of another without duplicating the CSS properties

Page 13: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Directivesbasic control directives

Page 14: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Directivesfor directives

Page 15: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

CompassSASS Framework

add some sugar.

Page 16: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

● SASS Framework● adding:

○ out of the box mixins○ helper functions○ sprite generator○ ...

Compass

Page 17: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

● cross browser mixins

Mixins

Page 18: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

● Background Clip ● Background Origin ● Background Size ● Border Radius ● Box Shadow ● Box Sizing● Font Face ● Images ● Inline Block ● Opacity● Text Shadow ● Transform● Transition● ...

Mixins

● Resets● Links● Lists● Text

Page 19: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

● color helpers

Helpers

Page 20: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Spritespain in the ass if you do it yourself

Page 21: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Spriteseasily generate sprites of a folder's image files

Page 22: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Case studythis is how we do it

Page 23: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

EPSON - Beam your X-Mas Story

Page 24: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

Page 25: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

Page 26: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

StructureSASS config file

Page 27: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

Compiler entry point(files without leading underscore)

Page 28: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

Twitter Bootstrap + project config

Page 29: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

project files twitter bootstrap files

Page 30: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

style.scss

_config.scss

Twitter Bootstrap

Project

only import required bootstrap components

Page 31: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Structure

e.g. Google Webfont imports

e.g. Button mixins

e.g. jQuery UI stylesheets

Basic elements e.g. body

Import sprites

Headlines, paragraphs

e.g. common shared gradients

Headlines, paragraphs

Modules: Buttons, Lists, Tabs, Pagination, Dialogs

Unique elements with IDs, e.g. #header, #logo

any form related elements

Page 32: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Element examples

Page 33: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

ButtonsTwitter Bootstrap(not modified)

ProjectButton styles

.btn .btn-primary .btn .btn

.btn .btn-success .btn-large

Page 34: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Lightbox

Page 35: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Lightbox

Page 36: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Lightbox

Page 37: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Lightbox

Page 38: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Lightbox

Page 39: Malte Wessel - SASS Preprocessor / Compass / YDN Brand

Questions?