Preprocessor CSS: SASS
-
Upload
geoffroy-baylaender -
Category
Internet
-
view
137 -
download
2
description
Transcript of Preprocessor CSS: SASS
![Page 1: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/1.jpg)
@oeg87
PREPROCESSORS CSS
//How to improve your workflow@import improve-css
![Page 3: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/3.jpg)
Web designer
@oeg87
3
![Page 4: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/4.jpg)
@oeg87 4
CSS is good …
![Page 5: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/5.jpg)
@oeg87 5
Preprocessor are better
![Page 6: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/6.jpg)
@oeg87 6
Everybody use CSS
![Page 7: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/7.jpg)
@oeg87 7
Everybody use CSS is limited
But
![Page 8: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/8.jpg)
@oeg87 8
Everybody use CSS is limited
If you have used a preprocessor
But
![Page 9: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/9.jpg)
@oeg87 9
Some preprocessors
http://www.catswhocode.com/blog/8-css-preprocessors-to-speed-up-development-time
![Page 10: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/10.jpg)
@oeg87 10
What is “SASS”?Syntactically Awesome StyleSheets
![Page 11: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/11.jpg)
@oeg87 11
Few words to describe SASS
• Variables• Mixins• Selector
inheritance
• Calculations• Functions• Conditionals• Loops
![Page 12: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/12.jpg)
@oeg87 12
Install and use
gem install sass
sass --watch file.scss:file.css
![Page 13: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/13.jpg)
@oeg87 13
SASS Takes everything that’s missing from css
![Page 14: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/14.jpg)
@oeg87 14
SASS Takes everything that’s missing from css and puts it into CSS
![Page 15: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/15.jpg)
@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”
![Page 16: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/16.jpg)
@oeg87 16
Thinking that …
.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;
}
![Page 17: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/17.jpg)
@oeg87 17
How many people have used that?
![Page 18: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/18.jpg)
@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;
}
![Page 19: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/19.jpg)
@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;
}
![Page 20: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/20.jpg)
@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;
}
![Page 21: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/21.jpg)
@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;}
![Page 22: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/22.jpg)
@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;
}
![Page 23: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/23.jpg)
@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;
}
![Page 24: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/24.jpg)
@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);
}
![Page 25: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/25.jpg)
@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;
}
![Page 26: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/26.jpg)
@oeg87 26
And a lot more
![Page 27: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/27.jpg)
@oeg87 27
Preprocessor does not replace a css…
![Page 28: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/28.jpg)
@oeg87 28
Preprocessor does not replace a css…the preprocessors makes css better
![Page 29: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/29.jpg)
@oeg87 29
To knowMore things
![Page 30: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/30.jpg)
@oeg87 30
compass
SASS living without compass, but compass does not living without SASS
![Page 31: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/31.jpg)
@oeg87 31
• A framework/extensions of CSS3 that uses Sass
• Open-source project• A collection of patterns, rules, variables,
mixins, and more
![Page 32: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/32.jpg)
@oeg87 32
Two syntaxesSASS e SCSS
![Page 33: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/33.jpg)
@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
![Page 34: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/34.jpg)
@oeg87 34
The compression types
![Page 35: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/35.jpg)
@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
![Page 36: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/36.jpg)
@oeg87 36
Positive aspects//Obviously, there are
![Page 37: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/37.jpg)
@oeg87 37
+
• Save time• @import• Help to reduce HTTP request• DRY principle (Don’t Repeat Yourself)• Re-use• Easy learning curve• // comments
![Page 38: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/38.jpg)
@oeg87 38
Negative aspects//Yes, we found negative aspects here, too
![Page 39: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/39.jpg)
@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
![Page 40: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/40.jpg)
@oeg87 40
Let’s code<code> <code> <code>
http://codepen.io/Geo87/pen/EJvrb
![Page 41: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/41.jpg)
@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;
![Page 42: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/42.jpg)
@oeg87 42
@if $questions == $true {//please ask
}
![Page 43: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/43.jpg)
@oeg87 43
{ Thank you }//and …
![Page 44: Preprocessor CSS: SASS](https://reader033.fdocuments.in/reader033/viewer/2022050801/54c842ee4a795965098b457b/html5/thumbnails/44.jpg)
@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