Making CSS Fun with SASS

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

@toddanglin VP, Product @ Progress

CSS has been plagued with inconsistencies & browser bugs

Why do we need CSS?

[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}

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}

CSS Zen Garden

Flex Grids

What is the key CSS challenge? was

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; }

IE6 is the [CSS] devil. Microsoft agreed. ie6countdown.com

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; }

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

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

-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;

Prefixes are gone 12:18 Browser "flags" now handle emerging features

ShouldIPrefix.com

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

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

PLAIN CSS IN ACTION DEMO

Wouldn’t it be nice if CSS…

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

CSS Pre-Processors

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

Runtime Webpage CSS/Preprocess Syntax Preprocess Compiler CSS + Server

Runtime Webpage CSS CSS Server Preprocess Compiler CSS/Preprocess Syntax

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

SASS begat LESS begat SCSS begat ZUSS

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

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

Top 10 Reasons to CSS Pre-Process

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; }

1. Variables

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

2. Operations

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

3. Mix-ins

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

4. Control Directives & Expressions

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

5. Extend & Inheritance

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

6. Nested Rules & Hierarchy

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

7. Comments

8. @import

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

9. CSS Frameworks

framework.scss site.scss + Compiles site.css

Awesome Sass

10. Compiles

Removes comments Removes whitespace Minifies CSS Combines files Runtime or
Buildtime

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

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

1. Deployment 2. Debugging

SourceMaps

CSS FUTURE Eliminating the need for Pre-Processors

Preprocessors shouldn't be necessary

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

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; }

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

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; }

Scorecard C

Making CSS FUN(?!) with SASS

Making CSS FUN(!) with SASS

Todd Anglin @toddanglin [email protected] Thanks!

Making CSS Fun with SASS

Making CSS Fun with SASS

More Decks by Todd Anglin

Other Decks in Programming

Featured

Transcript