crazy sassy

46
crazy sassy

Upload: michael-arestad

Post on 27-Jan-2015

123 views

Category:

Technology


1 download

DESCRIPTION

Crazy ways to use Sass (or not).

TRANSCRIPT

Page 1: Crazy sassy

crazy

sassy

Page 2: Crazy sassy

THE BASICSHeh.

Page 3: Crazy sassy

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

Page 4: Crazy sassy

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

Page 5: Crazy sassy
Page 6: Crazy sassy

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

Page 7: Crazy sassy
Page 8: Crazy sassy

NORMALLY, BUS FACTOR ONE IS BAD.

Page 9: Crazy sassy

EXCEPT FOR TODAY.

Page 10: Crazy sassy

MICHAEL ARESTAD@michaelarestad

Page 11: Crazy sassy
Page 12: Crazy sassy
Page 13: Crazy sassy
Page 14: Crazy sassy
Page 15: Crazy sassy

DRYDo not Repeat Yourself

Page 16: Crazy sassy

OOCSSObject Oriented CSS

Page 17: Crazy sassy

.base__element—modifier !

.header__nav--primary

Page 18: Crazy sassy

CRAZY COOLSane useful code.

Page 19: Crazy sassy

CRAZY CRAZYWill crash your phone.

Page 20: Crazy sassy

FUNCTIONSOnly do math(s) once.

Page 21: Crazy sassy

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

COOL

Page 22: Crazy sassy

padding: em(24);

padding: (24 / 16px);

COOL

Page 23: Crazy sassy

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

CRAZY

Page 24: Crazy sassy

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

CRAZY

Page 25: Crazy sassy

SASS MAPSScary-looking, but useful.

Page 26: Crazy sassy

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

COOL

Page 27: Crazy sassy

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

#fff

COOL

Page 28: Crazy sassy

m5l.co/buttons

COOL

Page 29: Crazy sassy

LOOPS!Spit out some code!

Page 30: Crazy sassy

@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

Page 31: Crazy sassy

m5l.co/buttons

COOL

Page 32: Crazy sassy

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

COOL

Page 33: Crazy sassy

m5l.co/griddy

COOL

Page 34: Crazy sassy

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

WTF?!

Page 35: Crazy sassy

m5l.co/howbig

WTF?!

Page 36: Crazy sassy

EPIC MIXIN TIMEWe mixin because we can.

Page 37: Crazy sassy

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

MEH

Page 38: Crazy sassy

Autoprefixer m5l.co/ap

MEH

Page 39: Crazy sassy

$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

Page 40: Crazy sassy

m5l.co/break

COOL

Page 41: Crazy sassy

m5l.co/arrow

COOL

Page 42: Crazy sassy

@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

Page 43: Crazy sassy

m5l.co/pie

CRAZY

Page 44: Crazy sassy

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

Page 45: Crazy sassy

THANK YOU!@michaelarestad

Page 46: Crazy sassy

QUESTIONS?@michaelarestad