Download - Preprocessor CSS: SASS
@oeg87
PREPROCESSORS CSS
//How to improve your workflow@import improve-css
Web designer
@oeg87
3
@oeg87 4
CSS is good …
@oeg87 5
Preprocessor are better
@oeg87 6
Everybody use CSS
@oeg87 7
Everybody use CSS is limited
But
@oeg87 8
Everybody use CSS is limited
If you have used a preprocessor
But
@oeg87 9
Some preprocessors
http://www.catswhocode.com/blog/8-css-preprocessors-to-speed-up-development-time
@oeg87 10
What is “SASS”?Syntactically Awesome StyleSheets
@oeg87 11
Few words to describe SASS
• Variables• Mixins• Selector
inheritance
• Calculations• Functions• Conditionals• Loops
@oeg87 12
Install and use
gem install sass
sass --watch file.scss:file.css
@oeg87 13
SASS Takes everything that’s missing from css
@oeg87 14
SASS Takes everything that’s missing from css and puts it into CSS
@oeg87 15
SASS Takes everything that’s missing from css and puts it into CSS“SASS is as powerful as you want it to be”
@oeg87 16
Thinking that …
.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;
}
@oeg87 17
How many people have used that?
@oeg87 18
Variables
SASS$brand-color: #ffdd00;
.class {color: $brand-color;font: 16/1.4 Arial;margin: 0;
}
CSS
.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;
}
@oeg87 19
Nesting
SASS.class {
color: #ffdd00;font: 16/1.4 Arial;margin: 0;a {
display: block;width: 100px;height: 50px;
}}
CSS.class {
color: #ffdd00;font: 16/1.4 Arial;margin: 0;
}.class a {
display: block;width: 100px;height: 50px;
}
@oeg87 20
The Ampersand
SASS.class {
color: $brand-color;font: 16/1.4 Arial;margin: 0;
&.new-class {color: $sub-color;
}}
CSS.class {
color: #ffdd00;font: 16/1.4 Arial;margin: 0;
}
.class.new-class {color: #000;
}
@oeg87 21
Selector Inheritance
SASS.class {
color: $brand-color;font: 16/1.4 Arial;margin: 0;
}
.new-class {@extend .class;padding: 10px;
}
CSS.class, .new-class {
color: $brand-color;font: 16/1.4 Arial;margin: 0;
}.new-class {
padding:10px;}
@oeg87 22
Calculations
SASS$grid-margin: 10px;
.class {color: $brand-color;font: 16/1.4 Arial;margin: $grid-margin * 2;
}
CSS
.class {color: $brand-color;font: 16/1.4 Arial;margin: 20px;
}
@oeg87 23
Color Manipulation
SASS
.class {color: darken(#fd0,30%);font: 16/1.4 Arial;margin: 0;
}
CSS
.class {color: #665800;font: 16/1.4 Arial;margin: 0;
}
@oeg87 24
Mixins
@mixin border-radius($radius) { -webkit-border-radius: $radius;
-moz-border-radius: $radius; -khtml-border-radius: $radius; border-radius: $radius;
}
.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;@include border-radius(4px);
}
@oeg87 25
Cycles
SASS$list: #000, #999, #ccc;
@for $i from 1 through length($list){.class-#{$i} {
color: nth($list, $i);}
}
CSS.class-1 {
color: #000;}
.class-2 {color: #999;
}
.class-3 {color: #ccc;
}
@oeg87 26
And a lot more
@oeg87 27
Preprocessor does not replace a css…
@oeg87 28
Preprocessor does not replace a css…the preprocessors makes css better
@oeg87 29
To knowMore things
@oeg87 30
compass
SASS living without compass, but compass does not living without SASS
@oeg87 31
• A framework/extensions of CSS3 that uses Sass
• Open-source project• A collection of patterns, rules, variables,
mixins, and more
@oeg87 32
Two syntaxesSASS e SCSS
@oeg87 33
SCSS.class {
color: $brand-color;
font: 16/1.4 Arial;margin: 0;
.new-class {@extend class;
margin: 10px;}
}
SASS.class
color: $brand-color
font: 16/1.4 Arialmargin: 0
.new-class @extend class
margin: 10px
@oeg87 34
The compression types
@oeg87 35
//Compact.wrap{ /*comment*/ margin:0 auto; }.wrap .inside {width:500px; margin:0 auto}
//Compressed.wrap{margin:0 auto}.wrap .inside{width:500px;margin:0 auto}
//Expanded.wrap {
/*comment*/margin:0 auto;
}.wrap .inside {
width:500px;margin:0 auto
}
sass --watch --style compact file.scss:file.css
@oeg87 36
Positive aspects//Obviously, there are
@oeg87 37
+
• Save time• @import• Help to reduce HTTP request• DRY principle (Don’t Repeat Yourself)• Re-use• Easy learning curve• // comments
@oeg87 38
Negative aspects//Yes, we found negative aspects here, too
@oeg87 39
–
• Losing semplicity concepts of CSS• Need to have Ruby• You want not go back to traditional CSS
• Documentation isn’t always clear (SASS), LESS is better in this way
@oeg87 40
Let’s code<code> <code> <code>
http://codepen.io/Geo87/pen/EJvrb
@oeg87 41
“They can be a great people, $Kal-El, they wish to be. They only lack the light to show the way. For this reason above all, their capacity for good, I have sent them you… my only $son”
Jor-El
$son: preprocessor;$Kal-El: SASS;
@oeg87 42
@if $questions == $true {//please ask
}
@oeg87 43
{ Thank you }//and …
@oeg87 44
Bibliography• http
://www.comicvine.com/forums/battles-7/who-can-beat-superman-744764
• http://www.imdb.com/title/tt0348150 • http://www.slideshare.net/adarowski/sassive-aggressive-using-sass
-to-make-your-life-easier-7366267