malte wessel - sass preprocessor / compass / ydn brand
DESCRIPTION
Syntactically Awesome Stylesheets and CompassTRANSCRIPT
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?