malte wessel - sass preprocessor / compass / ydn brand

YDNBRAND

say hello.

SASSSyntactically Awesome Stylesheets

nah'mean?

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

programming languages● adding:

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

SASS

Why?

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

Syntax

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

CSS styleeasily readable

*.scss

ruby styleless code

*.sass

Featureslean back.

Nested rulesnesting CSS rules within one another

Variablesuhhm, variables.

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)

Operationsstandard arithmetic operations

Mixinsdefine styles that can be re-used throughout the stylesheet

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

Directivesbasic control directives

Directivesfor directives

CompassSASS Framework

add some sugar.

● SASS Framework● adding:

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

Compass

● cross browser mixins

Mixins

● 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

● color helpers

Helpers

Spritespain in the ass if you do it yourself

Spriteseasily generate sprites of a folder's image files

Case studythis is how we do it

EPSON - Beam your X-Mas Story

Structure

Structure

StructureSASS config file

Structure

Compiler entry point(files without leading underscore)

Structure

Twitter Bootstrap + project config

Structure

project files twitter bootstrap files

Structure

style.scss

_config.scss

Twitter Bootstrap

Project

only import required bootstrap components

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

Element examples

ButtonsTwitter Bootstrap(not modified)

ProjectButton styles

.btn .btn-primary .btn .btn

.btn .btn-success .btn-large

Lightbox

Lightbox

Lightbox

Lightbox

Lightbox

Questions?