Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Introduction to CSS Preprocessors (SASS & LESS)

732 views

Published on

Agenda
- What is Less?
- Usage
- Compilers
- Features
- Variables
- Mixins
- Nested Rules
- Operations
- Extend

Published in: Technology
  • Be the first to comment

  • Be the first to like this

An Introduction to CSS Preprocessors (SASS & LESS)

  1. 1. Introduction to Less.js, Sass andIntroduction to Less.js, Sass and CompassCompass www.folio3.com@folio_3
  2. 2. Folio3 – OverviewFolio3 – Overview www.folio3.com @folio_3
  3. 3. Who We Are  We are a Development Partner for our customers  Design software solutions, not just implement them  Focus on the solution – Platform and technology agnostic  Expertise in building applications that are: Mobile Social Cloud-based Gamified
  4. 4. What We Do  Areas of Focus  Enterprise  Custom enterprise applications  Product development targeting the enterprise  Mobile  Custom mobile apps for iOS, Android, Windows Phone, BB OS  Mobile platform (server-to-server) development  Social Media  CMS based websites for consumers and enterprise (corporate, consumer, community & social networking)  Social media platform development (enterprise & consumer)
  5. 5. Folio3 At a Glance  Founded in 2005  Over 200 full time employees  Offices in the US, Canada, Bulgaria & Pakistan  Palo Alto, CA.  Sofia, Bulgaria  Karachi, Pakistan Toronto, Canada
  6. 6. Areas of Focus: Enterprise  Automating workflows  Cloud based solutions  Application integration  Platform development  Healthcare  Mobile Enterprise  Digital Media  Supply Chain
  7. 7. Some of Our Enterprise Clients
  8. 8. Areas of Focus: Mobile  Serious enterprise applications for Banks, Businesses  Fun consumer apps for app discovery, interaction, exercise gamification and play  Educational apps  Augmented Reality apps  Mobile Platforms
  9. 9. Some of Our Mobile Clients
  10. 10. Areas of Focus: Web & Social Media  Community Sites based on Content Management Systems  Enterprise Social Networking  Social Games for Facebook & Mobile  Companion Apps for games
  11. 11. Some of Our Web Clients
  12. 12. www.folio3.com @folio_3 Introduction to Less.js, Sass andIntroduction to Less.js, Sass and CompassCompass
  13. 13. Agenda  What is Less?  Usage  Compilers  Features  Variables  Mixins  Nested Rules  Operations  Extend
  14. 14. Agenda (Continued)  What is Sass  Different Syntex Of Sass  Installation  Differences B/W Sass and Less  What Is Compass?  Installation  Usage
  15. 15. What Is Less?  LESS is a tool that extends CSS with the addition of variables, mixins, operations and nested rules  Originally built with Ruby, now LESS is rewritten in JavaScript  There is now LESS implementations in other languages, i.e PHP, .NET
  16. 16. Usage  Link your less file in header: <link rel="stylesheet/less" href="style.less" type="text/css”>  Link Less pre-procesor: <script src="http://lesscss.googlecode.com/files/less- 1.0.21.min.js"></script>
  17. 17. Compilers  Less.app (Mac OS X only)  CodeKit (Mac OS X only, PAID, Free trial)  SimpLESS (Windows, Lunix, Mac OS X)  LiveReload (Mac OS X, Windows)
  18. 18. Features  Variables:  Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
  19. 19. Features  Variables: // LESS @headingcolor: #4D926F; #header { color: @headingcolor; } h2 { color: @headingcolor; }
  20. 20. Features  Variables: /* Compiled CSS */ #header { color: #4D926F; } h2 { color: #4D926F; }
  21. 21. Features  Mixins:  Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments.
  22. 22. Features  Mixins: // LESS .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
  23. 23. Features  Mixins: /* Compiled CSS */ #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
  24. 24. Features  Nested Rules:  Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
  25. 25. Features  Nested Rules: // LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
  26. 26. Features  Nested Rules: /* Compiled CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
  27. 27. Features  Operations:  Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.  List of Operations:http://lesscss.org/#reference
  28. 28. Features  Operations: // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }
  29. 29. Features  Operations: /* Compiled CSS */ #header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }
  30. 30. Features  Extend:  It accomplishes the goal of "borrowing styles", but rather than copying all the rules of Selector A over to Selector B, extend copies the name of the inheriting selector (_Selector B_) over to the extending selector (_Selector A_).
  31. 31. Features  Extend: // LESS .link { color: @link-color; } a:extend(.link) { font-weight: bold; } // Can also be written as a { &:extend(.link); font-weight: bold; }
  32. 32. Features  Extend: /* Compiled CSS */ .link, a { color: #428bca; } a { font-weight: bold; }
  33. 33. What Is Sass?  Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.  It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
  34. 34. What Is Sass?  Sass has two syntaxes. SCSS, SASS  SCSS : It is a superset of CSS3’s syntax. Every valid CSS3 stylesheet is valid SCSS as well. Extension is .scss  SASS: it uses the indentation of lines to specify blocks. Extension of this sytex is .sass.
  35. 35. Syntex Of Sass // SCSS #header { h1 { font-size: 26px; font-weight: bold; } } //SASS #header h1 font-size: 26px font-weight: bold /* Compiled CSS */ #header h1 { font-size: 26px; font-weight: bold; }
  36. 36. Installation  Gem install sass  For converting sass to css:  sass input.scss output.css  For auto update the CSS every time the Sass file changes  sass --watch input.scss:output.css
  37. 37. Conversions  Convert Sass to SCSS:  sass-convert style.sass style.scss  Convert SCSS to Sass:  sass-convert style.scss style.sass
  38. 38. Differences B/W Sass and Less  Sass has much robust mixin libraries available compared to less.  Sass has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops.  Less is following sass advances e.g. Extend was not supported in less untill 1.4  LESS is built upon JavaScript, so installing LESS is as easy as linking JavaScript library to your HTML document.
  39. 39. Differences B/W Sass and Less Syntex (Variables): //LESS @blue: #3bbfce; .content-navigation { border-color: @blue; } //SCSS $blue: #3bbfce; .content-navigation { border-color: $blue; }
  40. 40. Differences B/W Sass and Less Syntex(Mixins): //LESS .left($dist) { float: left; margin-left: $dist; } #data { .l eft(10px); } //SCSS @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); }
  41. 41. Differences B/W Sass and Less Nested Properties (Sass have nested properties): // SCSS li { font: { family: serif; weight: bold; size: 1.2em; } } /* Compiled CSS */ li { font-family: serif; font-weight: bold; font-size: 1.2em; }
  42. 42. Differences B/W Sass and Less Media Queries: //LESS and SCSS .some-class { /* Default styling */ @media (max-width: 800px) { /* Responsive styles */ } }
  43. 43. Differences B/W Sass and Less Media Queries: In Sass you can use respond_to //Sass =respond-to($name) @if $name == small-screen @media only screen and (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content .column width: 25% +respond-to(small-screen) width: 100%
  44. 44. Differences B/W Sass and Less Maths: //LESS div { width: 100px + 2em; // == 102px (weird) } //SCS div { width: 100px + 2em; // Error: Incompatible units: 'em' and 'px’ }
  45. 45. What Is Compass?  It’s full of the web’s best reusable patterns.  Compass will run in the background and watch your project directory and compile your Sass files whenever you save some changes.  Compass also sets up a project structure where you can incorporate various frameworks.  Contain CSS3, Layouts, image sprites and many utility mixins
  46. 46. Installation  Gem Install Compass  To create rails app compase structure  compass create <myproject>
  47. 47. Usage  Sprites:  If you want to add selectors for your sprites, it's easy todo by adding _active _target or _hover to the file name, In the example below we have a sprite directory that looks like:  my-buttons/glossy.png  my-buttons/glossy_hover.png  my-buttons/glossy_active.png  my-buttons/glossy_target.png
  48. 48. Usage Sprites: //SCSS @import "my-buttons/*.png”; a { @include my-buttons-sprite(glossy) }
  49. 49. Usage Sprites: /* Compiled CSS */ .my-buttons-sprite, a { background: url('/my-buttons-sedfef809e2.png') no-repeat; } a { background-position: 0 0; } a:hover, a.glossy_hover, a.glossy-hover { background-position: 0 -40px; } a:target, a.glossy_target, a.glossy-target { background-position: 0 -60px; } a:active, a.glossy_active, a.glossy-active { background-position: 0 -20; }
  50. 50. Useful Links  http://lesscss.org/  https://github.com/less/less.js/  http://sass-lang.com/  http://thesassway.com/  http://compass-style.org/
  51. 51. Contact  For more details about our services, please get in touch with us. contact@folio3.com US Office: (408) 365-4638 www.folio3.com

×