Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make CSS Fun with SASS (Dec 18)

Todd Anglin
December 05, 2018

Make CSS Fun with SASS (Dec 18)

After years of back-and-forth debate, one CSS pre-processor has emerged as the clear winner: SASS (or Syntactically Awesome Style Sheets). With SASS, writing and maintaining CSS can actually be FUN, not tedious and error-prone. In this session, you’ll learn the basics of SASS and how it can be immediately applied to your projects for instant productivity and happiness gains. We’ll also take a look at the current state of modern CSS standards aiming to bring the power of SASS and other CSS preprocessors natively to browsers, examining what can and what can’t be used safely today.

Todd Anglin

December 05, 2018
Tweet

More Decks by Todd Anglin

Other Decks in Technology

Transcript

  1. Making CSS
    FUN(?!)
    with SASS
    T: @toddanglin | E: [email protected]

    View full-size slide

  2. @toddanglin
    VP, Product @ Progress

    View full-size slide

  3. CSS has been plagued
    with inconsistencies &
    browser bugs

    View full-size slide

  4. Why do we need
    CSS?

    View full-size slide

  5. [before CSS]






    Hello World!




    I’m green! I think.

    Lorem ipsum




    {HTML}

    View full-size slide

  6. Separation of Concerns*





    Hello!
    Lorem ipsum





    structure
    body { color:#FFF; }
    header { margin:5px; }
    article {
    margin:5px 0;
    padding: 10px;
    background: #333;
    }
    style
    {HTML} {CSS}

    View full-size slide

  7. CSS
    Zen
    Garden

    View full-size slide

  8. What is the key CSS
    challenge?
    was

    View full-size slide

  9. Browser Interoperability
    • Browsers implement CSS differently
    .t-button { padding: 2px 8px; }
    *+html .t-button { padding: 1px 8px; }
    .t-icon, .t-sprite, .t-editor-button .t-tool-icon
    {
    display: inline-block;
    *display: inline;
    text-indent: -9999px;
    }
    * html .t-icon, .t-sprite { text-indent: 0; }
    *+html .t-icon, .t-sprite { text-indent: 0; }

    View full-size slide

  10. It's not DRY
    • Lots of repetitive code
    .site {
    background-color: #ACACAC;
    }
    .thing {
    background-color: #ACACAC;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    }
    .site .thing2 {
    background-color: #ACACAC;
    }

    View full-size slide

  11. What’s CSS3?
    • Extensions for CSS2.1
    ● Add functionality, refine definitions
    Module Status
    Animations WD
    2D/3D Transformations WD
    Selectors (Level 3) REC
    Media Queries (Level 3) REC
    Backgrounds & Borders (rounded corners) CR
    Text (text shadows, outline) CR
    CSS 2.1 REC
    WD LC CR PR REC

    View full-size slide

  12. Browser Prefixes
    prefix organization
    -ms-, mso- Microsoft
    -moz- Mozilla
    -o-, -xv- Opera Software
    -atsc-
    Advanced Television Standards
    Committee
    -wap- The WAP Forum
    -khtml- KDE
    -webkit- Apple
    prince- YesLogic
    -ah- Antenna House
    -hp- Hewlett Packard
    -ro- Real Objects
    -rim- Research In Motion
    -tc- Tall Components
    15

    View full-size slide

  13. -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 2px 2px 2px #333;
    -webkit-box-shadow: 2px 2px 2px #333;
    box-shadow: 2px 2px 2px #333;
    -webkit-background-size: 137px 50px;
    -o-background-size: 137px 50px;
    background-size: 137px 50px;

    View full-size slide

  14. Prefixes are gone
    16:23
    Browser "flags" now handle emerging features

    View full-size slide

  15. ShouldIPrefix.com

    View full-size slide

  16. CSS"4"
    • Selectors
    ● 21 new selector options
    ● :has, :not, :matches, :dir, :lang, :scope, :any-
    link, :valid/:invalid, :in-range/:out-of-range,
    :required/:optional, etc
    ● css4.rocks
    • Borders & Backgrounds

    View full-size slide

  17. The new CSS "1"
    • Flex Level 1
    • Grid Layouts Level 1

    View full-size slide

  18. PLAIN CSS IN
    ACTION
    DEMO

    View full-size slide

  19. Wouldn’t it be nice if
    CSS…

    View full-size slide

  20. • Made it easier to target different
    browsers
    • Supported global variables
    • Made it easier to do DRY CSS
    • Simplified complicated style
    hierarchies

    View full-size slide

  21. CSS Pre-Processors

    View full-size slide

  22. 1.
    Write
    Preprocess
    Syntax
    2.
    Compile
    in to
    Plain Old CSS
    3.
    Deploy
    to
    Browser

    View full-size slide

  23. Runtime
    Webpage
    CSS/Preprocess
    Syntax
    Preprocess
    Compiler
    CSS
    +
    Server

    View full-size slide

  24. Runtime
    Webpage
    CSS
    CSS
    Server
    Preprocess
    Compiler
    CSS/Preprocess
    Syntax

    View full-size slide

  25. Build Time
    Webpage
    CSS
    Server
    Preprocess
    Compiler
    CSS/Preprocess
    Syntax
    CSS

    View full-size slide

  26. SASS
    begat
    LESS
    begat
    SCSS
    begat
    ZUSS

    View full-size slide

  27. Nested Metalanguages
    All CSS is LESS/SASS,
    But Not All LESS/SASS is CSS

    View full-size slide

  28. What Pre-Processors do NOT do
    Does not…
    1. Add runtime overhead
    2. Add CSS support to browsers
    3. Detect CSS support in browsers
    4. Save you from writing bad CSS

    View full-size slide

  29. Top 10 Reasons to
    CSS Pre-Process

    View full-size slide

  30. SASS vs SCSS
    $font-stack: Helvetica
    $primary-color: #333
    body
    font: 100% $font-stack
    color: $primary-color
    $font-stack: Helvetica;
    $primary-color: #333;
    body {
    font: 100% $font-stack;
    color: $primary-color;
    }

    View full-size slide

  31. 1. Variables

    View full-size slide

  32. Variables
    Reusable values
    ● Can be re-defined in different scopes
    $nice-blue: #5B83AD;
    $light-blue: $nice-blue;
    #header { color: $light-blue; }
    #header { color: #5B83AD; }
    SCSS Output CSS

    View full-size slide

  33. 2. Operations

    View full-size slide

  34. Operations
    In-line CSS operations
    ● Any number, color, or variable
    ● +, -, *, /, %
    $base: 5%;
    $filler: $base * 2;
    $other: $base + $filler;
    $base-color: #C9C9C9;
    .rule{
    color: (#888 / 4);
    background-color: $base-color + #111;
    height: 100% / 2 + $filler;
    }
    .rule {
    color: #222222;
    background-color: #dadada;
    height: 60%;
    }
    SCSS Output CSS

    View full-size slide

  35. Mix-ins
    Encapsulated CSS rule sets
    ● Reusable
    ● Can accept parameters
    /*SCSS Mix-in*/
    @mixin border-radius ($radius) {
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
    }
    #header {
    @include border-radius(4px);
    }
    #header {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }
    SCSS Output CSS

    View full-size slide

  36. 4. Control Directives &
    Expressions

    View full-size slide

  37. Control Directives & Expressions
    Conditional CSS rules
    ● if(), @if, @else, @for, @each, @while
    @mixin dropshadow($x, $y) {
    box-shadow: $x $y if($x < 5, 2px,
    10px);
    }
    h1 {
    @include dropshadow(3px, 1px);
    }
    h1 { box-shadow: 3px 1px 2px; }
    SCSS Output CSS

    View full-size slide

  38. 5. Extend &
    Inheritance

    View full-size slide

  39. Extend & Inheritance
    Share CSS between selectors
    ● Easier to maintain, read
    %message {
    width: 100%;
    color: $primary;
    }
    .success {
    @extend %message;
    background-color: green;
    }
    .fail {
    @extend %message;
    background-color: red;
    }
    .success, .fail {
    width: 100%;
    color: black;
    }
    .success {
    background-color: green;
    }
    .fail {
    background-color: red;
    }
    SCSS Output CSS

    View full-size slide

  40. 6. Nested Rules &
    Hierarchy

    View full-size slide

  41. Nested Rules
    Simplifies complicated CSS rule naming
    ● Useable for CSS namespaces, too
    #header {
    color: black;
    .navigation {
    font-size: 12px;
    }
    .logo {
    width: 300px;
    &:hover { text-decoration: none }
    }
    }
    #header { color: black; }
    #header .navigation {
    font-size: 12px;
    }
    #header .logo {
    width: 300px;
    }
    #header .logo:hover {
    text-decoration: none;
    }
    SCSS Output CSS

    View full-size slide

  42. Multiple files
    _base.scss ios.scss
    +
    Compiles
    site.css

    View full-size slide

  43. 9. CSS Frameworks

    View full-size slide

  44. framework.scss site.scss
    +
    Compiles
    site.css

    View full-size slide

  45. Awesome Sass

    View full-size slide

  46. 10. Compiles

    View full-size slide

  47. Removes comments
    Removes whitespace
    Minifies CSS
    Combines files
    Runtime or Buildtime

    View full-size slide

  48. Setup VS Code Builds
    • Install node compilers for SASS
    • Install Gulp task runner
    • Install SASS Gulp tasks
    • Configure VS Code tasks.json
    $ npm install -g node-sass
    $ npm install gulp gulp-sass

    View full-size slide

  49. What are the biggest
    reasons you're not
    using pre-compilers
    today?

    View full-size slide

  50. 1. Deployment
    2. Debugging

    View full-size slide

  51. CSS FUTURE
    Eliminating the need for Pre-Processors

    View full-size slide

  52. Preprocessors
    shouldn't be necessary

    View full-size slide

  53. CSS Variables
    • Native browser CSS variables
    • Dynamically updating
    :root {
    --primaryColor: #AFCF10;
    }
    .myClass {
    color: var(--primaryColor);
    }

    View full-size slide

  54. CSS Mixins
    • Native via the @apply keyword
    • No support for parameters
    • Only experimental support in Chrome
    :root {
    --my-mixin: {
    color: --primaryColor;
    }
    }
    h1 {
    @apply --my-mixin;
    }
    DEAD

    View full-size slide

  55. CSS Math
    • Native via the calc() syntax
    • Supports all common math operations
    .sidebar {
    padding: calc(100% / 2);
    }

    View full-size slide

  56. Nesting & Extends
    • Proposed in 2015
    • Active implementation discussions in 2018
    .foo {
    color: blue;
    & .bar { color: red; }
    }
    .error { color: red; }
    .serious-error {
    @extend .error;
    font-weight: bold;
    }
    /* equivalent to */
    .foo { color: blue; }
    .foo .bar { color: red; }

    View full-size slide

  57. Making CSS
    FUN(?!)
    with SASS

    View full-size slide

  58. Making CSS
    FUN(!)
    with SASS

    View full-size slide

  59. Todd Anglin
    @toddanglin
    [email protected]
    Thanks!

    View full-size slide