Crazy ways to use Sass (or not).

1. crazy
sassy

2. THE BASICS
Heh.

3. box model
positioning
pseudo elements
vendor prefixes
avoid !important
.classes
responsive design
specificity
CSS
compiling
nesting
variables
&
mixins
extends
functions
DRY
SASS
lists
sass maps
recursion
@while
@if
@for
@at-root
!global

4. CSS SASS
box 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

6. BUS FACTOR
Total number of devs who would need
to be incapacitated to **** a project.

8. NORMALLY, BUS
FACTOR ONE IS BAD.

9. EXCEPT FOR TODAY.

10. MICHAEL ARESTAD
@michaelarestad

15. DRY
Do not Repeat Yourself

16. OOCSS
Object Oriented CSS

17. .base__element—modifier
!
.header__nav--primary

18. CRAZY COOL
Sane useful code.

19. CRAZY CRAZY
Will crash your phone.

20. FUNCTIONS
Only do math(s) once.

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

22. padding: em(24);
padding: (24 / 16px);
COOL

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

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

25. SASS MAPS
Scary-looking, but useful.

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

27. map-get(map-get($buttons, primary), color)
#fff
COOL

28. m5l.co/buttons
COOL

29. LOOPS!
Spit out some code!

30. @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

31. m5l.co/buttons
COOL

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

33. m5l.co/griddy
COOL

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

35. m5l.co/howbig
WTF?!

36. EPIC MIXIN TIME
We mixin because we can.

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

38. Autoprefixer
m5l.co/ap
MEH

39. $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

40. m5l.co/break
COOL

41. m5l.co/arrow
COOL

42. @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 {
CRAZY

43. m5l.co/pie
CRAZY

44. 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

45. THANK YOU!
@michaelarestad

46. QUESTIONS?
@michaelarestad