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