CSS preprocessor: why and how

1,755 views

Published on

Published in: Technology, Education

CSS preprocessor: why and how

  1. 1. CSS Preprocessor: Why and How M. Mizanur Rahman
  2. 2. A love letter from CSS
  3. 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. 4. What if CSS gets a new look • It becomes re-usable • It becomes scalable • It becomes smart • It understand a programmers mind
  5. 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. 6. Some Popular Preprocessors • SASS • LESS • Stylus
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. Converting SASS files to CSS files sass input.scss output.css
  19. 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. 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. 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. 22. About Me  M. Mizanur Rahman Development Manager, TrustPilot Bangladesh GraphicPeople Moderator PHPXperts Email: mizanur.rahman@gmail.com Blog: http://booleandreams.wordpress.com

×