Making CSS fun again :)
About○ Front end developer at Conrad Caine○ Analysis and development of systems at SENAC
This is my first presentation and everything can be boring...                      so lets drink beer!
I will talk about○ CSS weaknesses○ Syntax○ Features○ Techniques○ ...
CSS WEAKNESSES
Whats wrong with CSS?○ No variables○ Prefixes○ Lack of abstraction○ Hard to maintain (mainly in big css files)
THE SOLUTION
CSS Preprocessors○ Sass○ Less○ Stylus            They are the most popular.
WHAT ARE CSSPREPROCESSORS?
What are CSS Preprocessor?"CSS preprocessors take code written in the preprocessedlanguage and then convert that code into...
STARTING WITH SASS
About○ Syntactically Awesome StyleSheets○ Sass makes CSS fun again○ Sass get installed as Ruby gem, then you need to have ...
Installinggem install sass
The Process○ Create a .scss file○ Watch this .scss○ Sass will create your .css○ Be happy!
Watching a .scss filesass --watch dev.scss:style.css
Output styleSass allows you to choose between four different outputstyles using the --style command-line flag.sass --watch...
VARIABLES
How can we do this today?
Variables/* dev.scss */        /* output */$width: 100px;        .side {$color: #00214D;        width: 100px;$size: 16px; ...
Math operations/* dev.scss */              /* output */$width: 600px;              .nav li {$length: 3;                   ...
Color functions/* dev.scss */                     /* output */$color: #ce4dd6;                   .nav a {                 ...
NESTING
We are accustomed to do this:/* primate.css */.nav li {  list-style:none;  float:left;}.nav li a {  display:block;  paddin...
Now we can do this:/* dev.scss */          /* output */.nav {                  .nav li {  li {                    list-sty...
Parent Reference/* dev.scss */          /* output */.nav {                  .nav li {  li {                    list-style:...
MIXINS
Mixins/* primate.css */.nav li a {  padding: 5px;  border: 1px solid red;  -moz-border-radius: 10px;  -webkit-border-radiu...
Mixins/* dev.scss */               /* output */@mixin borderRadius {        .nav li a { -moz-border-radius: 10px;     padd...
Arguments/* dev.scss */            /* output */@mixin title($size) {     article h2 {  font: {                   font-fami...
INHERITANCE
Inheritance/* dev.scss */              /* output */.nav {                      .nav, .category {   background: #CCC;      ...
INTERPOLATION
Interpolation/* dev.scss */            /* output */$name: box;               p.box {$attr: border;              border-col...
@import
@import     core.css   fonts.css   reset.css   footer.css
@import/* dev.scss */           /* output */@import "reset.scss";@import "fonts.scss";    /* reset */@import "footer.scss"...
Control Directives
@if/* dev.scss */                /* output */$type: games;                              p {p {                            ...
@for/* dev.scss */               /* output */@for $i from 1 through 3 {   .item-1 {  .item-#{$i} {                font-siz...
@each/* dev.scss */              /* output */@each $type in a, b, c {    .a-icon {  .#{$type}-icon {            background...
@while/* dev.scss */                 /* output */$i: 6;                         .item-6 {@while $i > 0 {                  ...
Thank you!○ gabrielneutzling@gmail.com○ facebook.com/gneutzling○ @gneutzling
Upcoming SlideShare
Loading in …5
×

Sass - Making CSS fun again.

1,487 views

Published on

It was my first presentation for Hack Thursday (hackthursday.com).

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,487
On SlideShare
0
From Embeds
0
Number of Embeds
124
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Sass - Making CSS fun again.

  1. 1. Making CSS fun again :)
  2. 2. About○ Front end developer at Conrad Caine○ Analysis and development of systems at SENAC
  3. 3. This is my first presentation and everything can be boring... so lets drink beer!
  4. 4. I will talk about○ CSS weaknesses○ Syntax○ Features○ Techniques○ ...
  5. 5. CSS WEAKNESSES
  6. 6. Whats wrong with CSS?○ No variables○ Prefixes○ Lack of abstraction○ Hard to maintain (mainly in big css files)
  7. 7. THE SOLUTION
  8. 8. CSS Preprocessors○ Sass○ Less○ Stylus They are the most popular.
  9. 9. WHAT ARE CSSPREPROCESSORS?
  10. 10. What are CSS Preprocessor?"CSS preprocessors take code written in the preprocessedlanguage and then convert that code into the same old csswe’ve been writing for years."
  11. 11. STARTING WITH SASS
  12. 12. About○ Syntactically Awesome StyleSheets○ Sass makes CSS fun again○ Sass get installed as Ruby gem, then you need to have Ruby on your machine.
  13. 13. Installinggem install sass
  14. 14. The Process○ Create a .scss file○ Watch this .scss○ Sass will create your .css○ Be happy!
  15. 15. Watching a .scss filesass --watch dev.scss:style.css
  16. 16. Output styleSass allows you to choose between four different outputstyles using the --style command-line flag.sass --watch dev.scss:style.css --style nestedsass --watch dev.scss:style.css --style expandedsass --watch dev.scss:style.css --style compactsass --watch dev.scss:style.css --style compressed
  17. 17. VARIABLES
  18. 18. How can we do this today?
  19. 19. Variables/* dev.scss */ /* output */$width: 100px; .side {$color: #00214D; width: 100px;$size: 16px; }.side { .bar { width: $width; width: 100px;} font-size: 16px; color: #00214D;.bar { } width: $width; font-size: $size; color: $color;}
  20. 20. Math operations/* dev.scss */ /* output */$width: 600px; .nav li {$length: 3; width: 200px; }.nav li { width: $width / $length}
  21. 21. Color functions/* dev.scss */ /* output */$color: #ce4dd6; .nav a { color: #e5a0e9; }.nav a { .nav a:hover { color: lighten($color, 20%); color: #d976e0; &:hover { } color: lighten($color, 10%); }}
  22. 22. NESTING
  23. 23. We are accustomed to do this:/* primate.css */.nav li { list-style:none; float:left;}.nav li a { display:block; padding:5px;}
  24. 24. Now we can do this:/* dev.scss */ /* output */.nav { .nav li { li { list-style: none; float: left; list-style:none; } float:left; a { .nav li a { display:block; display: block; color:blue; color: blue; } } }}
  25. 25. Parent Reference/* dev.scss */ /* output */.nav { .nav li { li { list-style: none; float: left; list-style:none; } float:left; a { .nav li a { display:block; display: block; color:blue; color: blue; &:hover { } color:red; .nav li a:hover { } display: block; } color: red; } }}
  26. 26. MIXINS
  27. 27. Mixins/* primate.css */.nav li a { padding: 5px; border: 1px solid red; -moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px;}
  28. 28. Mixins/* dev.scss */ /* output */@mixin borderRadius { .nav li a { -moz-border-radius: 10px; padding: 5px; border: 1px solid red; -webkit-border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: border-radius: 10px; 10px;} border-radius: 10px; }.nav li a { padding: 5px; border: 1px solid red; @include borderRadius;}
  29. 29. Arguments/* dev.scss */ /* output */@mixin title($size) { article h2 { font: { font-family: arial; font-size: 40px; family: arial; font-weight: bold; size: $size; } weight: bold; }}article h2 { @include title(40px);}
  30. 30. INHERITANCE
  31. 31. Inheritance/* dev.scss */ /* output */.nav { .nav, .category { background: #CCC; background: #CCC; border: 1px solid red; border: 1px solid red; }}.category { @extend .nav;}
  32. 32. INTERPOLATION
  33. 33. Interpolation/* dev.scss */ /* output */$name: box; p.box {$attr: border; border-color: blue; }p.#{$name} { #{$attr}-color: blue;}
  34. 34. @import
  35. 35. @import core.css fonts.css reset.css footer.css
  36. 36. @import/* dev.scss */ /* output */@import "reset.scss";@import "fonts.scss"; /* reset */@import "footer.scss"; html {} /* fonts */ @font-face {} /* footer */ footer {}
  37. 37. Control Directives
  38. 38. @if/* dev.scss */ /* output */$type: games; p {p { color: blue; @if $type == sports { } color: green; } @else if $type == games { color: blue; } @else { color: red; }}
  39. 39. @for/* dev.scss */ /* output */@for $i from 1 through 3 { .item-1 { .item-#{$i} { font-size: 12px; } font-size: 12px * $i; } .item-2 {} font-size: 24px; } .item-3 { font-size: 36px; }
  40. 40. @each/* dev.scss */ /* output */@each $type in a, b, c { .a-icon { .#{$type}-icon { background-image: url ("/images/a.png"); background-image: url(/images/#{$type}.png); } } .b-icon {} background-image: url ("/images/b.png"); } .c-icon { background-image: url ("/images/c.png"); }
  41. 41. @while/* dev.scss */ /* output */$i: 6; .item-6 {@while $i > 0 { width: 12px; } .item-#{$i} { width: 2px *$i; } .item-4 { $i: $i - 2; width: 8px;} } .item-2 { width: 4px; }
  42. 42. Thank you!○ gabrielneutzling@gmail.com○ facebook.com/gneutzling○ @gneutzling

×