Embed Size (px)
DESCRIPTION
It was my first presentation for Hack Thursday (hackthursday.com).
Citation preview
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 let's drink beer!
I will talk about
○ CSS weaknesses
○ Syntax
○ Features
○ Techniques
○ ...
CSS WEAKNESSES
○ No variables
○ Prefixes
○ Lack of abstraction
○ Hard to maintain (mainly in big css files)
What's wrong with CSS?
THE SOLUTION
○ Sass
○ Less
○ Stylus
CSS Preprocessors
They are the most popular.
WHAT ARE CSS PREPROCESSORS?
"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?
STARTING WITH SASS
○ Syntactically Awesome StyleSheets
○ Sass makes CSS fun again
○ Sass get installed as Ruby gem, then you need to have
Ruby on your machine.
About
gem install sass
Installing
○ Create a .scss file
○ Watch this .scss
○ Sass will create your .css
○ Be happy!
The Process
sass --watch dev.scss:style.css
Watching a .scss file
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
VARIABLES
How can we do this today?
/* 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;}
/* dev.scss */$width: 600px;$length: 3;
.nav li { width: $width / $length}
Math operations
/* output */.nav li { width: 200px;}
/* 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;}
NESTING
/* primate.css */.nav li { list-style:none; float:left;}
.nav li a { display:block; padding:5px;}
We are accustomed to do this:
/* 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;}
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;}
MIXINS
/* primate.css */.nav li a { padding: 5px; border: 1px solid red; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
Mixins
/* 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;}
/* 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;}
INHERITANCE
/* dev.scss */.nav {
background: #CCC;border: 1px solid red;
}
.category {@extend .nav;
}
Inheritance
/* output */.nav, .category { background: #CCC; border: 1px solid red;}
INTERPOLATION
/* dev.scss */$name: box;$attr: border;p.#{$name} { #{$attr}-color: blue;}
Interpolation
/* output */p.box { border-color: blue;}
@import
@import
core.css fonts.css reset.css footer.css
/* dev.scss */@import "reset.scss";@import "fonts.scss";@import "footer.scss";
@import
/* output */
/* reset */html {}
/* fonts */@font-face {}
/* footer */footer {}
Control Directives
/* dev.scss */$type: 'games';
p { @if $type == sports { color: green; } @else if $type == games { color: blue; } @else { color: red; }}
@if
/* output */
p { color: blue;}
/* 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;}
/* 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");}
/* 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;}
