SlideShare a Scribd company logo
CSS Preprocessor:
Why and How
M. Mizanur Rahman
A love letter from CSS
Frustrations with CSS
• It looks messy
• Repetitive
• Tendency of copy pasting over and over
• Big chunk of codes
• Vendor specific prefixes
• Not DRY Enough
What if CSS gets a new look
• It becomes re-usable
• It becomes scalable
• It becomes smart
• It understand a programmers mind
What is a Preprocessor?
• Have you heard the word “Preprocessor” for first time?
• 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
• Preprocessors are not CSS, so CSS weaknesses do not belong
to them
• At the end, the output will be pure CSS files. So it does not
matter what Preprocessor you use in your project
Some Popular Preprocessors
• SASS
• LESS
• Stylus
Which one to Choose
• 80% of the SASS, LESS and Stylus are same
• 20% are different based on their advanced features and usage
• The similar features are
• Variables
• Color Transformation
• Mixings
• Nesting
• Loops and conditions
• Import
Let’s Focus on SASS
• SASS - Syntactically Awesome StyleSheets
• Sass is an extension of CSS that adds power and elegance to the basic
language. It allows you to use variables, nested rules, mixins, inline
imports, and more, all with a fully CSS-compatible syntax.
• Features
• Fully CSS3-compatible
• Language extensions such as variables, nesting, and mixins
• Many useful functions for manipulating colors and other values
• Advanced features like control directives for libraries
• Well-formatted, customizable output
• Firebug integration
SASS or SCSS??
• There are two syntaxes available for Sass.
• First and latest one known as SCSS (Sassy CSS) and is an extension of
the syntax of CSS3. This means that every valid CSS3 stylesheet is a
valid SCSS file with the same meaning.
• Files have .scss extension
• It uses brackets and semi-colons just like CSS
• Easy to pickup by the developers
• SASS is the old style syntax.
• Focus on indented syntax
• Have .sass file extension
• Not so well picked by developers for different syntax from CSS
SASS & SCSS samples
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
H1
color: $primary-color
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
H1 {
color: $primary-color;
}
How to Install SASS
• Requires Ruby to be installed on developer machine (Not
server)
gem install sass
sass -v
You can also use the following applications
• Compass
• Koala
• Scout
SASS Features: Variables
• Starts with $ sign
• allows you to assign a value to an easy-to-
remember placeholder name
• Allows:
• numbers (e.g. 1.2, 13, 10px)
• strings of text, with and without quotes
(e.g. "foo", 'bar', baz)
• colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
• booleans (e.g. true, false)
• nulls (e.g. null)
• lists of values, separated by spaces or commas
(e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps from one value to another (e.g. (key1: value1,
key2: value2))
$width: 5em;
#main { width: $width; }
.label {font-size: $width;}
Converts to
#main {width: 5em; }
.label {font-size: 5em; }
Nesting
/* -- scss -- */
$background: #f0f0f0;
#navbar {
width: 100%;
height: 30px;
padding: 10px;
background: $background;
ul {
list-style: none;
}
li {
float: left;
a { text-decoration: none; }
&:hover { text-decoration: underline; } }
}
/* -- resulting css -- */
#navbar {width: 100%; height:
30px;padding:10px; background:
#f0f0f0}
#navbar ul {list-style: none;}
#navbar li {float: left;}
#navbar li a {text-decoration: none;}
#navbar li a:hover {text-decoration:
underline;}
Interpolation
• You can also use SASS variables in
selectors and property names using
#{} interpolation syntax
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
Outputs
p.foo { border-color: blue; }
Operations
• Number Operations
• Color Operations
• String Operations
• Boolean Operations
• List Operations
• Parentheses
$navbar-width: 950px;
$items: 5;
#navbar li {
width: $navbar-width/$items - 10px;}
p { color: #010203 + #040506; }
p { cursor: e + -resize; }
p { width: 1em + (2em * 3); }
--------------------- Output ------
-----------------
#navbar li {width: 180px}
p { color: #050709; }
p { cursor: e-resize; }
p { width: 7em; }
Mixins
• Mixins allow you to chunk up CSS
declarations (block of rules) to be reusable
with one reference
• Mixins are included in the document with
the @include directive. It also takes optional
arguments.
@mixin rounded-corners {
$radius: 5px;
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius; }
#header { @include rounded-corners; }
#footer { @include rounded-corners; }
---------------- Output ------------------------
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
Mixins (With Argument)
@mixin my-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed; }
}
p { @include my-border(red, 1px); }
p {
border-color: red;
border-width: 1px;
border-style: dashed;
}
Converting SASS files to CSS files
sass input.scss output.css
Partials & Imports
• Divide a big SASS file to
smaller SASS files
• Start with a underscore
_example.scss
• Can be reused in different
projects (eg: _table.scss,
_form.scss etc)
• When converted to CSS,
partials files are not
generated to any css files.
• @import “form"; will
import _form.scss
Extend/Inheritance
• One of the most important feature of SASS
• @extend lets you share a set of CSS properties from one
selector to another
• It helps to prevent repetition in our SASS files.
.message {
border: 1px solid #ccc;
padding: 10px;
color: #444; }
.success {
@extend .message;
border-color: green;}
.error {
@extend .message;
border-color: red; }
.warning {
@extend .message;
border-color: orange; }
-------------- Output -------------------------
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #444; }
.success { border-color: green; }
.error { border-color: red; }
.warning { border-color: orange; }
Looking for More?
• Go through SASS based frameworks
• Compass
• Bourbon
• Susy
• OOCSS (Object Oriented CSS)
• There are some great paid apps for SASS
• CodeKit
• Hammer
• Mixture
• LiveReload
• Prepros
About Me 
M. Mizanur Rahman
Development Manager, TrustPilot Bangladesh
GraphicPeople
Moderator PHPXperts
Email: mizanur.rahman@gmail.com
Blog: http://booleandreams.wordpress.com

More Related Content

KEY
Intro to SASS CSS
PDF
DrupalCamp Chattanooga - September 2014 - Sass 101
KEY
Wrangling the CSS Beast with Sass
PPTX
Introduction to sass
PDF
PDF
Intro to css & sass
PPTX
Css frameworks
PPTX
SASS - Syntactically Awesome Stylesheet
Intro to SASS CSS
DrupalCamp Chattanooga - September 2014 - Sass 101
Wrangling the CSS Beast with Sass
Introduction to sass
Intro to css & sass
Css frameworks
SASS - Syntactically Awesome Stylesheet

What's hot (20)

PPTX
Introduction to SASS
KEY
Advanced sass/compass
PPTX
PDF
Preprocessor presentation
KEY
Compass/Sass
KEY
Authoring Stylesheets with Compass & Sass
PDF
[Worskhop Summits] CSS3 Workshop
PDF
CSS3: Ripe and Ready to Respond
PDF
CSS Extenders
PPTX
SASS Lecture
PPTX
SASS is more than LESS
PDF
Sass and Compass - Getting Started
PPTX
Css 3
PPTX
Css 3
PDF
October 2014 - USG Rock Eagle - Sass 101
PDF
CSS 開發加速指南-Sass & Compass
PDF
CSS3: Simply Responsive
PPTX
CSS Walktrough Internship Course
Introduction to SASS
Advanced sass/compass
Preprocessor presentation
Compass/Sass
Authoring Stylesheets with Compass & Sass
[Worskhop Summits] CSS3 Workshop
CSS3: Ripe and Ready to Respond
CSS Extenders
SASS Lecture
SASS is more than LESS
Sass and Compass - Getting Started
Css 3
Css 3
October 2014 - USG Rock Eagle - Sass 101
CSS 開發加速指南-Sass & Compass
CSS3: Simply Responsive
CSS Walktrough Internship Course
Ad

Similar to Css preprocessor-140606115334-phpapp01 (20)

PPTX
Sass_Cubet seminar
PPTX
Doing More With Less
PPT
CSS Preprocessors: LESS is more or look SASS-y trying
KEY
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
PDF
SASS, Compass, Gulp, Greensock
PPTX
Simple introduction Sass
PPTX
Syntactically awesome stylesheets (Sass)
PPT
Why less?
ODP
Deep dive into sass
PPTX
PostCss
KEY
Advanced sass
KEY
Sass compass
PPTX
Less css
PPT
UNIT 3.ppt
PDF
LESS : The dynamic stylesheet language
PDF
Sass & Compass (Barcamp Stuttgart 2012)
PDF
Understanding sass
PDF
Big Design Conference: CSS3
PPTX
Raleigh Web Design Meetup Group - Sass Presentation
PDF
2 introduction css
Sass_Cubet seminar
Doing More With Less
CSS Preprocessors: LESS is more or look SASS-y trying
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
SASS, Compass, Gulp, Greensock
Simple introduction Sass
Syntactically awesome stylesheets (Sass)
Why less?
Deep dive into sass
PostCss
Advanced sass
Sass compass
Less css
UNIT 3.ppt
LESS : The dynamic stylesheet language
Sass & Compass (Barcamp Stuttgart 2012)
Understanding sass
Big Design Conference: CSS3
Raleigh Web Design Meetup Group - Sass Presentation
2 introduction css
Ad

Recently uploaded (20)

PDF
Interior Structure and Construction A1 NGYANQI
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PPTX
rapid fire quiz in your house is your india.pptx
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
Entrepreneur intro, origin, process, method
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PPTX
building Planning Overview for step wise design.pptx
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PPTX
Media And Information Literacy for Grade 12
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PDF
Phone away, tabs closed: No multitasking
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
Interior Structure and Construction A1 NGYANQI
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
Tenders & Contracts Works _ Services Afzal.pptx
rapid fire quiz in your house is your india.pptx
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
Entrepreneur intro, origin, process, method
pump pump is a mechanism that is used to transfer a liquid from one place to ...
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
BRANDBOOK-Presidential Award Scheme-Kenya-2023
mahatma gandhi bus terminal in india Case Study.pptx
building Planning Overview for step wise design.pptx
YOW2022-BNE-MinimalViableArchitecture.pdf
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Media And Information Literacy for Grade 12
Fundamental Principles of Visual Graphic Design.pptx
Phone away, tabs closed: No multitasking
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL

Css preprocessor-140606115334-phpapp01

  • 1. CSS Preprocessor: Why and How M. Mizanur Rahman
  • 2. A love letter from CSS
  • 3. Frustrations with CSS • It looks messy • Repetitive • Tendency of copy pasting over and over • Big chunk of codes • Vendor specific prefixes • Not DRY Enough
  • 4. What if CSS gets a new look • It becomes re-usable • It becomes scalable • It becomes smart • It understand a programmers mind
  • 5. What is a Preprocessor? • Have you heard the word “Preprocessor” for first time? • 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 • Preprocessors are not CSS, so CSS weaknesses do not belong to them • At the end, the output will be pure CSS files. So it does not matter what Preprocessor you use in your project
  • 6. Some Popular Preprocessors • SASS • LESS • Stylus
  • 7. Which one to Choose • 80% of the SASS, LESS and Stylus are same • 20% are different based on their advanced features and usage • The similar features are • Variables • Color Transformation • Mixings • Nesting • Loops and conditions • Import
  • 8. Let’s Focus on SASS • SASS - Syntactically Awesome StyleSheets • Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. • Features • Fully CSS3-compatible • Language extensions such as variables, nesting, and mixins • Many useful functions for manipulating colors and other values • Advanced features like control directives for libraries • Well-formatted, customizable output • Firebug integration
  • 9. SASS or SCSS?? • There are two syntaxes available for Sass. • First and latest one known as SCSS (Sassy CSS) and is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. • Files have .scss extension • It uses brackets and semi-colons just like CSS • Easy to pickup by the developers • SASS is the old style syntax. • Focus on indented syntax • Have .sass file extension • Not so well picked by developers for different syntax from CSS
  • 10. SASS & SCSS samples $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color H1 color: $primary-color $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } H1 { color: $primary-color; }
  • 11. How to Install SASS • Requires Ruby to be installed on developer machine (Not server) gem install sass sass -v You can also use the following applications • Compass • Koala • Scout
  • 12. SASS Features: Variables • Starts with $ sign • allows you to assign a value to an easy-to- remember placeholder name • Allows: • numbers (e.g. 1.2, 13, 10px) • strings of text, with and without quotes (e.g. "foo", 'bar', baz) • colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)) • booleans (e.g. true, false) • nulls (e.g. null) • lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif) • maps from one value to another (e.g. (key1: value1, key2: value2)) $width: 5em; #main { width: $width; } .label {font-size: $width;} Converts to #main {width: 5em; } .label {font-size: 5em; }
  • 13. Nesting /* -- scss -- */ $background: #f0f0f0; #navbar { width: 100%; height: 30px; padding: 10px; background: $background; ul { list-style: none; } li { float: left; a { text-decoration: none; } &:hover { text-decoration: underline; } } } /* -- resulting css -- */ #navbar {width: 100%; height: 30px;padding:10px; background: #f0f0f0} #navbar ul {list-style: none;} #navbar li {float: left;} #navbar li a {text-decoration: none;} #navbar li a:hover {text-decoration: underline;}
  • 14. Interpolation • You can also use SASS variables in selectors and property names using #{} interpolation syntax $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } Outputs p.foo { border-color: blue; }
  • 15. Operations • Number Operations • Color Operations • String Operations • Boolean Operations • List Operations • Parentheses $navbar-width: 950px; $items: 5; #navbar li { width: $navbar-width/$items - 10px;} p { color: #010203 + #040506; } p { cursor: e + -resize; } p { width: 1em + (2em * 3); } --------------------- Output ------ ----------------- #navbar li {width: 180px} p { color: #050709; } p { cursor: e-resize; } p { width: 7em; }
  • 16. Mixins • Mixins allow you to chunk up CSS declarations (block of rules) to be reusable with one reference • Mixins are included in the document with the @include directive. It also takes optional arguments. @mixin rounded-corners { $radius: 5px; border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-corners; } ---------------- Output ------------------------ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
  • 17. Mixins (With Argument) @mixin my-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { @include my-border(red, 1px); } p { border-color: red; border-width: 1px; border-style: dashed; }
  • 18. Converting SASS files to CSS files sass input.scss output.css
  • 19. Partials & Imports • Divide a big SASS file to smaller SASS files • Start with a underscore _example.scss • Can be reused in different projects (eg: _table.scss, _form.scss etc) • When converted to CSS, partials files are not generated to any css files. • @import “form"; will import _form.scss
  • 20. Extend/Inheritance • One of the most important feature of SASS • @extend lets you share a set of CSS properties from one selector to another • It helps to prevent repetition in our SASS files. .message { border: 1px solid #ccc; padding: 10px; color: #444; } .success { @extend .message; border-color: green;} .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: orange; } -------------- Output ------------------------- .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #444; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: orange; }
  • 21. Looking for More? • Go through SASS based frameworks • Compass • Bourbon • Susy • OOCSS (Object Oriented CSS) • There are some great paid apps for SASS • CodeKit • Hammer • Mixture • LiveReload • Prepros
  • 22. About Me  M. Mizanur Rahman Development Manager, TrustPilot Bangladesh GraphicPeople Moderator PHPXperts Email: [email protected] Blog: http://booleandreams.wordpress.com