Your SlideShare is downloading. ×
CSS preprocessor: why and how
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS preprocessor: why and how

1,157
views

Published on

Published in: Technology, Education

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,157
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
85
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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: mizanur.rahman@gmail.com Blog: http://booleandreams.wordpress.com