Crazy sassy

crazy

sassy

THE BASICSHeh.

box model positioning pseudo elements vendor prefixes avoid !important .classes responsive design specificity

CSScompiling nesting variables & mixins extends functions DRY

SASSlists sass maps recursion @while @if @for @at-root !global

CSS SASSbox model positioning pseudo elements vendor prefixes avoid !important .classes responsive design OOCSS

compiling nesting variables & mixins extends functions DRY

lists sass maps recursion @while @if @for @at-root !global

GRUNT CODEKIT

TERMINAL GIT/SVN

AUTOPREFIXER

FILE STRUCTURE

ICON FONTS

SVG

BROWSER TESTING

COMPASS

WEB FONTS

VAGRANT MAMP

CSS ANIMATIONS

INTURNAT EXLPUOR

BOURBON

BUS FACTORTotal number of devs who would need to be incapacitated to **** a project.

NORMALLY, BUS FACTOR ONE IS BAD.

EXCEPT FOR TODAY.

MICHAEL ARESTAD@michaelarestad

DRYDo not Repeat Yourself

OOCSSObject Oriented CSS

.base__element—modifier !

.header__nav--primary

CRAZY COOLSane useful code.

CRAZY CRAZYWill crash your phone.

FUNCTIONSOnly do math(s) once.

@function em($value, $context: $root-font-size) { @return ($value / $context * 1em); }

COOL

padding: em(24);

padding: (24 / 16px);

COOL

@function p($number){ @return ($number * 2.5%); }

CRAZY

m5l.co/wc-1 m5l.co/wc-2

CRAZY

SASS MAPSScary-looking, but useful.

$buttons:( primary:( background: #2ba1cb, color: #fff, ), secondary:( background: #f7f7f7, color: #555, ) );

COOL

map-get(map-get($buttons, primary), color)

#fff

COOL

m5l.co/buttons

COOL

LOOPS!Spit out some code!

@each $item in $button-types { .button--#{$item} { $button-color: map-get(map-get($buttons, $item), background); $button-text: map-get(map-get($buttons, $item), color); !

@include button($button-color, $button-text); } }

COOL

m5l.co/buttons

COOL

@for $i from 1 through $columns { .span#{$i} { width: ($spacing * $i * 1px) + ($gutter * $i) - $gutter; } }

COOL

m5l.co/griddy

COOL

@for $i from $start through $end { @media all and (min-width: $i * 1px) { .wide { &:after { content: " #{$i} pixels wide!"; } } } }

WTF?!

m5l.co/howbig

WTF?!

EPIC MIXIN TIMEWe mixin because we can.

@mixin border-radius($radius: 3px){ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

MEH

Autoprefixer m5l.co/ap

MEH

$breakpoints:( phone: 320px, phablet: 500px, tablet: 768px, desktop: 960px, ); @mixin breakpoint($size){ @each $breakpoint, $value in $breakpoints { @if $size == $breakpoint { @media (max-width: map-get($breakpoints, $breakpoint)){ @content; } } } }

COOL

m5l.co/break

COOL

m5l.co/arrow

COOL

@mixin pie($a: 33) { // $a should be from 1 to 100 $p: 360 * $a / 100; // converts to percentage @if $p <= 90 { .slice { transform: rotate(-90deg + $p); ! &:after { transform: rotate(90deg - $p); } } } @elseif $p <= 180 { .slice, .slice:after { // Resets slices. Delete if pie doesn't change.(hover, etc.) transform: rotate(0); } .slice:nth-child(2) { transform: rotate(-90deg + $p); } } @elseif $p <= 270 { .slice,

CRAZY

m5l.co/pie

CRAZY

RECAP

Use functions for math(s) Use Sass maps where they make sense Use loops carefully Use mixins for epic hunks of code, not prefixes

THANK YOU!@michaelarestad

QUESTIONS?@michaelarestad