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

Making CSS Fun with SASS

Making CSS Fun with SASS

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

March 28, 2018
Tweet

Transcript

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

  2. @toddanglin VP, Product @ Progress

  3. None
  4. 12:18

  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. IE6 is the [CSS] devil. Microsoft agreed. ie6countdown.com

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

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

  20. ShouldIPrefix.com

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

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

  25. Wouldn’t it be nice if CSS…

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

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

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

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

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

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

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

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

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

  38. None
  39. 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; }
  40. 1. Variables

  41. 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
  42. 2. Operations

  43. 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
  44. 3. Mix-ins

  45. 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
  46. 4. Control Directives & Expressions

  47. 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
  48. 5. Extend & Inheritance

  49. 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
  50. 6. Nested Rules & Hierarchy

  51. 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
  52. 7. Comments

  53. 8. @import

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

  55. 9. CSS Frameworks

  56. framework.scss site.scss + Compiles site.css

  57. None
  58. Awesome Sass

  59. 10. Compiles

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

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

  64. 1. Deployment 2. Debugging

  65. SourceMaps

  66. CSS FUTURE Eliminating the need for Pre-Processors

  67. Preprocessors shouldn't be necessary

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

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

    all common math operations .sidebar { padding: calc(100% / 2); }
  71. Nesting & Extends • Proposed in 2015 .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!