Crazy sassy

Download Crazy sassy

Post on 27-Jan-2015

103 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Crazy ways to use Sass (or not).

TRANSCRIPT

<ul><li> 1. crazy sassy </li></ul> <p> 2. THE BASICS Heh. 3. box model positioning pseudo elements vendor prexes avoid !important .classes responsive design specicity CSS compiling nesting variables &amp; mixins extends functions DRY SASS lists sass maps recursion @while @if @for @at-root !global 4. CSS SASS box model positioning pseudo elements vendor prexes avoid !important .classes responsive design OOCSS compiling nesting variables &amp; 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 5. BUS FACTOR Total number of devs who would need to be incapacitated to **** a project. 6. NORMALLY, BUS FACTOR ONE IS BAD. 7. EXCEPT FOR TODAY. 8. MICHAEL ARESTAD @michaelarestad 9. DRY Do not Repeat Yourself 10. OOCSS Object Oriented CSS 11. .base__elementmodifier ! .header__nav--primary 12. CRAZY COOL Sane useful code. 13. CRAZY CRAZY Will crash your phone. 14. FUNCTIONS Only do math(s) once. 15. @function em($value, $context: $root-font-size) { @return ($value / $context * 1em); } COOL 16. padding: em(24); padding: (24 / 16px); COOL 17. @function p($number){ @return ($number * 2.5%); } CRAZY 18. m5l.co/wc-1 m5l.co/wc-2 CRAZY 19. SASS MAPS Scary-looking, but useful. 20. $buttons:( primary:( background: #2ba1cb, color: #fff, ), secondary:( background: #f7f7f7, color: #555, ) ); COOL 21. map-get(map-get($buttons, primary), color) #fff COOL 22. m5l.co/buttons COOL 23. LOOPS! Spit out some code! 24. @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 25. m5l.co/buttons COOL 26. @for $i from 1 through $columns { .span#{$i} { width: ($spacing * $i * 1px) + ($gutter * $i) - $gutter; } } COOL 27. m5l.co/griddy COOL 28. @for $i from $start through $end { @media all and (min-width: $i * 1px) { .wide { &amp;:after { content: " #{$i} pixels wide!"; } } } } WTF?! 29. m5l.co/howbig WTF?! 30. EPIC MIXIN TIME We mixin because we can. 31. @mixin border-radius($radius: 3px){ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } MEH 32. Autoprexer m5l.co/ap MEH 33. $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 34. m5l.co/break COOL 35. m5l.co/arrow COOL 36. @mixin pie($a: 33) { // $a should be from 1 to 100 $p: 360 * $a / 100; // converts to percentage @if $p</p>