Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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.

Todd Anglin

March 28, 2018
Tweet

More Decks by Todd Anglin

Other Decks in Programming

Transcript

  1. [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}
  2. 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}
  3. 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; }
  4. 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; }
  5. 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
  6. 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
  7. -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;
  8. 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
  9. • Made it easier to target different browsers • Supported

    global variables • Made it easier to do DRY CSS • Simplified complicated style hierarchies
  10. 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
  11. 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; }
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. CSS Variables • Native browser CSS variables • Dynamically updating

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

    all common math operations .sidebar { padding: calc(100% / 2); }
  22. 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; }