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

Make CSS Fun with SASS (Dec 18)

Ee15d938bcfedc4abeb1fbe520a95ab6?s=47 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.

Ee15d938bcfedc4abeb1fbe520a95ab6?s=128

Todd Anglin

December 05, 2018
Tweet

Transcript

  1. Making CSS FUN(?!) with SASS T: @toddanglin | E: anglin@progress.com

  2. @toddanglin VP, Product @ Progress

  3. None
  4. 16:23

  5. CSS has been plagued with inconsistencies & browser bugs

  6. Why do we need CSS?

  7. [before CSS] <html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”>

    <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Lorem ipsum</p> </font> </table> </body> </html> {HTML}
  8. Separation of Concerns* <html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem

    ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body> </html> structure body { color:#FFF; } header { margin:5px; } article { margin:5px 0; padding: 10px; background: #333; } style {HTML} {CSS}
  9. CSS Zen Garden

  10. Flex Grids

  11. What is the key CSS challenge? was

  12. 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; }
  13. 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; }
  14. CSS3

  15. 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
  16. 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
  17. -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;
  18. Prefixes are gone 16:23 Browser "flags" now handle emerging features

  19. ShouldIPrefix.com

  20. 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
  21. The new CSS "1" • Flex Level 1 • Grid

    Layouts Level 1
  22. None
  23. PLAIN CSS IN ACTION DEMO

  24. Wouldn’t it be nice if CSS…

  25. • Made it easier to target different browsers • Supported

    global variables • Made it easier to do DRY CSS • Simplified complicated style hierarchies
  26. CSS Pre-Processors

  27. 1. Write Preprocess Syntax 2. Compile in to Plain Old

    CSS 3. Deploy to Browser
  28. Runtime Webpage CSS/Preprocess Syntax Preprocess Compiler CSS + Server

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

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

  31. None
  32. SASS begat LESS begat SCSS begat ZUSS

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

    is CSS
  34. 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
  35. Top 10 Reasons to CSS Pre-Process

  36. None
  37. 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; }
  38. 1. Variables

  39. 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
  40. 2. Operations

  41. 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
  42. 3. Mix-ins

  43. 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
  44. 4. Control Directives & Expressions

  45. 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
  46. 5. Extend & Inheritance

  47. 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
  48. 6. Nested Rules & Hierarchy

  49. 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
  50. 7. Comments

  51. 8. @import

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

  53. 9. CSS Frameworks

  54. framework.scss site.scss + Compiles site.css

  55. None
  56. Awesome Sass

  57. 10. Compiles

  58. Removes comments Removes whitespace Minifies CSS Combines files Runtime or

    Buildtime
  59. None
  60. 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
  61. What are the biggest reasons you're not using pre-compilers today?

  62. 1. Deployment 2. Debugging

  63. SourceMaps

  64. CSS FUTURE Eliminating the need for Pre-Processors

  65. Preprocessors shouldn't be necessary

  66. CSS Variables • Native browser CSS variables • Dynamically updating

    :root { --primaryColor: #AFCF10; } .myClass { color: var(--primaryColor); }
  67. None
  68. 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
  69. CSS Math • Native via the calc() syntax • Supports

    all common math operations .sidebar { padding: calc(100% / 2); }
  70. None
  71. 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; }
  72. Scorecard C+

  73. None
  74. Making CSS FUN(?!) with SASS

  75. Making CSS FUN(!) with SASS

  76. Todd Anglin @toddanglin anglin@progress.com Thanks!