Sass: Maybe you should learn this

Presentation for the Osaka Web Developers and Web Designers Meetup on why a developer should learn Sass and some of the differences between Sass & Css

Transcript

1. Something you should probably know!
2. James McGrath Frontend Developer Mail: james@jamesmcgrath.net Web: jamesmcgrath.net codepen.io/ameone Twitter: @ameone
3. Why Learn Sass??? You may end up working on a project with Sass It’s becoming a skill requirement Knowledge is power! DRY out your CSS + efficient + faster & easier to maintain
4. What problem is Sass trying to solve?
5. What problem is Sass trying to solve? Make CSS more DRY by removing repetitiveness Make CSS more object oriented and less linear (vars, functions, conditionals, etc.)
6. What problem is Sass trying to solve? “... CSS stops short of even more powerful features that programmers use in their programming languages: macros, variables, symbolic constants, conditionals, expressions over variables, etc. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won't even touch CSS. It's a balance. And for CSS the balance is different than for some other things.“ CSS Co-inventor Burt Bos (http://bkaprt.com/sass/3/)
7. What is
8. What is Sass Syntactically Awesome StyleSheets CSS Processor Designed by Hampton Caitlin and developed by Natalie Weizenbaum Currently Maintained by Natalie Weizenbaum and Chris Eppstein
9. What is Sass Sass is just Syntactic Sugar for CSS! syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer. (wikipedia)
10. What’s different between Sass & CSS??? CSS file type is: CSS Sass file type is .sass .scss
11. #main color: blue font-size: 0.3em a font: weight: bold family: serif &:hover background-color: #eee .sass #main { color: blue; font-size: 0.3em; a { font: { weight: bold; family: serif; } &:hover { background-color: #eee; } } } .scss (aka Sassy CSS)
12. Nested Rules nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
13. Variables $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; }
14. Operators .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; } .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }
15. Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
16. Nested Properties .funky { font: { family: fantasy; size: 30em; weight: bold; } } .funky { font-family: fantasy; font-size: 30em; font-weight: bold; }
17. @media (nested) sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; 　} }
18. Functions $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter- width; } #sidebar { width: grid-width(5); } #sidebar { width: 240px; }
19. How Can I
20. Ruby, Gulp, Grunt, Node LibSass Gulp-Sass Node-Sass CLI CodeKit Compass.app Ghostlab Hammer LiveReload Prepros Scout Standalone compilers
21. Sass Alternatives: Less Stylus PreCss plugin for PostCSS