Ruby Con Ftw

download Ruby Con Ftw

of 92

  • date post

    14-Apr-2018
  • Category

    Documents

  • view

    217
  • download

    0

Embed Size (px)

Transcript of Ruby Con Ftw

  • 7/30/2019 Ruby Con Ftw

    1/92

    Sass.The Future of Stylesheets

    Without the Wait

  • 7/30/2019 Ruby Con Ftw

    2/92

    Chris EppsteinBlog - http://chriseppstein.github.com

    Follow me - @chriseppstein, +chriseppsteinArchitect - Caring.comCreator - Compass Stylesheet FrameworkCore Contributor - Sass

    http://gplus.to/chriseppsteinhttp://gplus.to/chriseppsteinhttp://twitter.com/chriseppsteinhttp://twitter.com/chriseppsteinhttp://chriseppstein.github.com/http://chriseppstein.github.com/
  • 7/30/2019 Ruby Con Ftw

    3/92

    A website forcaregivers of the sick and elderly.

    The right information at just the right time

  • 7/30/2019 Ruby Con Ftw

    4/92

    Books:Sass & Compass In Actionhttp://www.manning.com/netherland/DISCOUNT CODE: sass40 (save 40%)

    Pragmatic Guide to Sasshttp://pragprog.com/book/pg_sass/pragmatic-guide-to-sassDISCOUNT CODE: SassCompass2011 (save 25%)

    http://pragprog.com/book/pg_sass/pragmatic-guide-to-sasshttp://pragprog.com/book/pg_sass/pragmatic-guide-to-sasshttp://www.manning.com/netherland/http://www.manning.com/netherland/
  • 7/30/2019 Ruby Con Ftw

    5/92

    Today

  • 7/30/2019 Ruby Con Ftw

    6/92

    RationaleWhy does Sass exist?

    What problems does it solve?

  • 7/30/2019 Ruby Con Ftw

    7/92

    SyntaxWhat does Sass provide?

  • 7/30/2019 Ruby Con Ftw

    8/92

    Best PracticesTips, tricks & pitfalls

  • 7/30/2019 Ruby Con Ftw

    9/92

    Questions?Please ask them.

  • 7/30/2019 Ruby Con Ftw

    10/92

    What is Sass?Syntactically Awesome StyleSheets

  • 7/30/2019 Ruby Con Ftw

    11/92

    What is CSS? Originated in Academia

    14 Years Old

    Three Primitives:

    SelectorsProperties

    Values

  • 7/30/2019 Ruby Con Ftw

    12/92

    CSS is Pretty.Pretty dumb.

  • 7/30/2019 Ruby Con Ftw

    13/92

    Neverin the history ofsoftware havedevelopers been

    asked to do so muchwith so little.

  • 7/30/2019 Ruby Con Ftw

    14/92

    Browsers & Versions

  • 7/30/2019 Ruby Con Ftw

    15/92

    Multiple Form FactorsDesktop, Mobile, Print...

  • 7/30/2019 Ruby Con Ftw

    16/92

    Dozens of Templates

  • 7/30/2019 Ruby Con Ftw

    17/92

    Experiment & Test

  • 7/30/2019 Ruby Con Ftw

    18/92

    Maintain Consistency

  • 7/30/2019 Ruby Con Ftw

    19/92

    Performant

  • 7/30/2019 Ruby Con Ftw

    20/92

    Due Yesterday

  • 7/30/2019 Ruby Con Ftw

    21/92

    New Hotness: CSS333 New Selectors120+ New Properties3 New @-rules

    Enhanced Media Queries

  • 7/30/2019 Ruby Con Ftw

    22/92

    CSS3No new syntax*

    * Yet.

  • 7/30/2019 Ruby Con Ftw

    23/92

  • 7/30/2019 Ruby Con Ftw

    24/92

    CSS was designed for theMythical Designerwho is too stupid to

    understand High School Algebra.

  • 7/30/2019 Ruby Con Ftw

    25/92

    If you want to makesomething simple for

    beginners...

  • 7/30/2019 Ruby Con Ftw

    26/92

    ...make it powerfulenough for the experts

    to create that simplicity.

  • 7/30/2019 Ruby Con Ftw

    27/92

    But...

  • 7/30/2019 Ruby Con Ftw

    28/92

    There is an alternative.

  • 7/30/2019 Ruby Con Ftw

    29/92

    What is Sass? Born from Real World Experience

    Brings Software DevelopmentMethodologies to Stylesheets:

    Reusable, distributable libraries

    DRY

    Define abstractions

    Adhere to architectural boundaries

  • 7/30/2019 Ruby Con Ftw

    30/92

    What is Sass?New Primitives: Variables

    Mixins

    SelectorInheritance

    Calculations

    Functions

    Conditionals Loops

  • 7/30/2019 Ruby Con Ftw

    31/92

    What is Sass?Its what CSS would have been if we hadknown then what we know now:

    Most stylesheets are written bydevelopers.

  • 7/30/2019 Ruby Con Ftw

    32/92

    Problem:CSS StylesheetsAre hard to maintain

  • 7/30/2019 Ruby Con Ftw

    33/92

    Dont

    RepeatYourself

    (I dont have to tell you this -- Its not like you want to)

  • 7/30/2019 Ruby Con Ftw

    34/92

    A single change.A single edit.

    A single compile.

  • 7/30/2019 Ruby Con Ftw

    35/92

    We have machines.Let them do the busy work.

  • 7/30/2019 Ruby Con Ftw

    36/92

    Problem:Same ColorMany Representations

  • 7/30/2019 Ruby Con Ftw

    37/92

    Problem:Same ColorDifferent Reasons

  • 7/30/2019 Ruby Con Ftw

    38/92

  • 7/30/2019 Ruby Con Ftw

    39/92

    redrgb(255, 0, 0)

    rgba(255, 0, 0, 1.0)

    #f00

    rgba(#f00, 1.0)

    RED

    hsl(0deg, 100%, 100%)

    hsla(0deg, 100%, 100%, 1)

  • 7/30/2019 Ruby Con Ftw

    40/92

    Solution:VariablesThe most requested CSS enhancement

  • 7/30/2019 Ruby Con Ftw

    41/92

    Use variables anywhere a value is allowed.

  • 7/30/2019 Ruby Con Ftw

    42/92

  • 7/30/2019 Ruby Con Ftw

    43/92

    Problem:Magic ValuesLost knowledge

  • 7/30/2019 Ruby Con Ftw

    44/92

    Deceptively Complex

  • 7/30/2019 Ruby Con Ftw

    45/92

    Solution:TransformationsDerive values during compilation

  • 7/30/2019 Ruby Con Ftw

    46/92

    As complex as it actually is.

  • 7/30/2019 Ruby Con Ftw

    47/92

    Sass Color Functions

    mix(red, blue, 40%) => #660099

    lighten(red, 10%) => #ff3333

    darken(red, 10%) => #cc0000

    desaturate(red, 10%) => #f20d0dsaturate(#511, 10%) => #5a0c0c

    transparentize(red, 0.25) => rgba(255, 0, 0, 0.75)

    opacify(red, 0.25) => rgba(255, 0, 0, 0.75)

    grayscale(red) => #808080

    complement(red) => #00ffff

    Theres more on the Sass website.

    http://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  • 7/30/2019 Ruby Con Ftw

    48/92

    Solution:Make Reusable CalculationsWe call these things functions

  • 7/30/2019 Ruby Con Ftw

    49/92

  • 7/30/2019 Ruby Con Ftw

    50/92

    Deceptively Complex

  • 7/30/2019 Ruby Con Ftw

    51/92

    Solution:

    Abstractions &CalculationsDerive values during compilation

  • 7/30/2019 Ruby Con Ftw

    52/92

    Create a simple abstraction

  • 7/30/2019 Ruby Con Ftw

    53/92

    As complex as it actually is.

  • 7/30/2019 Ruby Con Ftw

    54/92

    Best Practice:Minimize HTTP Round Trips

  • 7/30/2019 Ruby Con Ftw

    55/92

    Problem:Long StylesheetsHard to find your styles.

  • 7/30/2019 Ruby Con Ftw

    56/92

    And I mean long...

    Seriously, this keeps going...

  • 7/30/2019 Ruby Con Ftw

    57/92

    Solution:

    Concatenation &Partials

  • 7/30/2019 Ruby Con Ftw

    58/92

    Convention: Each folder has a file of the same name thatimports the files contained within it in the correct order.

    Partials:Just like with html templates, underscores denote a

    partial and can only be imported by other stylesheets.

    http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/
  • 7/30/2019 Ruby Con Ftw

    59/92

    Problem:Shared StylesheetsStyles leak into places you didnt intend

  • 7/30/2019 Ruby Con Ftw

    60/92

    Sitewide Styles

    Forum Blog Articles Directory

    I

    n

    d

    ex

    T

    h

    r

    ea

    d

    F

    o

    r

    m

    L

    i

    s

    t

    P

    o

    s

    t

    F

    o

    r

    m

    I

    n

    d

    ex

    A

    r

    t

    ic

    l

    e

    C

    o

    m

    me

    n

    t

    S

    e

    a

    rc

    h

    L

    i

    s

    ti

    n

    g

    R

    e

    v

    ie

    w

  • 7/30/2019 Ruby Con Ftw

    61/92

    Solution:Scoped Selectors

  • 7/30/2019 Ruby Con Ftw

    62/92

    CSS gives youcarpal tunnelfrom typingyour scopesOVER & OVERAGAIN

  • 7/30/2019 Ruby Con Ftw

    63/92

    Sass ProvidesDRY Selectorsvia nesting

  • 7/30/2019 Ruby Con Ftw

    64/92

    Nested Selectors

    Com

    pilesto

    Default: descendant

    & - context reference

    Works with combinators

  • 7/30/2019 Ruby Con Ftw

    65/92

    Problem:Dozens of ImagesSpriting is annoying

  • 7/30/2019 Ruby Con Ftw

    66/92

    Solution:Compass Sprites

  • 7/30/2019 Ruby Con Ftw

    67/92

    Simple Sprites(Compass makesclasses for you)

    Or you can define yourown selectors.

  • 7/30/2019 Ruby Con Ftw

    68/92

  • 7/30/2019 Ruby Con Ftw

    69/92

    Problem:Dozens More Images

  • 7/30/2019 Ruby Con Ftw

    70/92

    Solution:Use CSS3 InsteadAbstract vendor prefixes away

  • 7/30/2019 Ruby Con Ftw

    71/92

    http://compass-style.org/reference/compass/css3/http://compass-style.org/reference/compass/css3/http://compass-style.org/reference/compass/css3/
  • 7/30/2019 Ruby Con Ftw

    72/92

  • 7/30/2019 Ruby Con Ftw

    73/92

  • 7/30/2019 Ruby Con Ftw

    74/92

    Best Practice:Use a CDN / Asset HostsLoad assets faster

  • 7/30/2019 Ruby Con Ftw

    75/