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

More Related Content

Similar to Preprocessor CSS: SASS

SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajYatendra Bhardwaj
 
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]Aaron Gustafson
 
Syntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareSyntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareRitwik Das
 
Sass - basic to advance
Sass  - basic to advanceSass  - basic to advance
Sass - basic to advanceVinita Swamy
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageKatsunori Tanaka
 
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyStefan Bauer
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetNeha Sharma
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Joes sass presentation
Joes sass presentationJoes sass presentation
Joes sass presentationJoeSeckelman
 
Styling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projectsStyling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projectsAppsilon Data Science
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?sharjeet
 
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSPost css - Getting start with PostCSS
Post css - Getting start with PostCSSNeha Sharma
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
 

Similar to Preprocessor CSS: SASS (20)

Sass_Cubet seminar
Sass_Cubet seminarSass_Cubet seminar
Sass_Cubet seminar
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
 
Syntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareSyntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech Software
 
Sass - basic to advance
Sass  - basic to advanceSass  - basic to advance
Sass - basic to advance
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
 
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint Sassy
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Joes sass presentation
Joes sass presentationJoes sass presentation
Joes sass presentation
 
Styling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projectsStyling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projects
 
sass_part2
sass_part2sass_part2
sass_part2
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
 
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSPost css - Getting start with PostCSS
Post css - Getting start with PostCSS
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
 

Recently uploaded

TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 

Recently uploaded (12)

TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 

Preprocessor CSS: SASS