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.

Less vs sass

11,673 views

Published on

Less vs sass

  1. 1. VS CSS Preprocessors Sass (Syntactically Awesome Stylesheets)Less (Leaner CSS)
  2. 2. WHAT ARE THEY? designed by Hampton Catlin and developed by Natalie Weizenbaum. SassScript provides the following mechanisms: variables, nesting, mixins, selector inheritance, and more. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml. The newer syntax, "SCSS", uses block formatting like that of CSS. Also, Compass, the companion open-source CSS authoring framework, can be used. http://sass-lang.com/ http://compass-style.org/ designed by Alexis Sellier. LESS provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between LESS and other CSS precompil- ers being that LESS allows real-time compilation via LESS.js by the browser. LESS can run on the client-side and server-side, or can be compiled into plain CSS. http://lesscss.org/
  3. 3. WHAT ARE & ? Variables Color Transformation Mixins Nesting Loops & Conditionals Importing MATH Less.js and Libraries.... Variables Color Transformation Mixins Nesting Loops & Conditionals Importing MATH @extend Selector Inheritance @media Media Queries @content Passing content to mixins and Libraries....
  4. 4. Variables @color: red; div{ color: @color; } $color: red; div{ color: $color; } https://gist.github.com/chriseppstein/674726
  5. 5. Nested Selectors p { a { color: red; &:hover { color: blue; } } } p { a { color: red; &:hover { color: blue; } } } https://gist.github.com/chriseppstein/674726
  6. 6. Mixins .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { .bordered; } @mixin bordered { border-top: dotted 1px black border-bottom: solid 2px black; } #menu a { @include bordered; } https://gist.github.com/chriseppstein/674726
  7. 7. Mixins with arguments .bordered (@width: 2px) { border: @width solid black; } #menu a { .bordered (4px); } @mixin bordered ($width: 2px) { border: $width solid black; } #menu a { @include bordered (4px); } https://gist.github.com/chriseppstein/674726
  8. 8. Selector Inheritance N/A .bordered { border: 1px solid black; } #menu a { @extend .bordered; } .bordered, #menu a { border: 1px solid back; } output https://gist.github.com/chriseppstein/674726
  9. 9. Conditionals & Control Structures @if lightness($color) > 30% { background-color: black; } @else { background-color: white; } .mixin (@color) when (lightness(@color) > 30%) { background-color: black; } .mixin (@color) when (lightness(@color) =< 30%) { background-color: white; } @for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } } https://gist.github.com/chriseppstein/674726 .border-i { border: 1px solid blue;} .border-i { border: 2px solid blue;} ........ .border-i { border: 9px solid blue;} output Less does not provide any conditionals or looping structures. Instead, it provides mixin guards and pattern- matching which can be used to similar effect. Sass and Less provides provide boolean types true and false, the and, or , and not operators as well as <, >, <=, >=, == operators. There are minor syntax differences between the two (Sass syntax shown here). Some sass examples: A similar example in Less, using mixins:
  10. 10. Namespacing Mixins #my-framework { .button () { display: block; border: 1px solid @dark-blue; background-color: @blue; color: @light-blue; } } .a-button { #my-framework > .button; } N/A https://gist.github.com/chriseppstein/674726 Organize your mixins into namespace
  11. 11. https://gist.github.com/chriseppstein/674726 Numbers 1cm * 1em => Error 2in * 3in => 6in (1cm / 1em) * 4em => Error 2in + 3cm + 2pc => Error 3in / 2in => 1.5in 1cm * 1em => 1 cm * em 2in * 3in => 6 in * in (1cm / 1em) * 4em => 4cm 2in + 3cm + 2pc => 3.514in 3in / 2in => 1.5 Both Sass and Less support numbers and basic arithmetic.
  12. 12. Libraries & Compiling
  13. 13. What is ? Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. http://compass-style.org/index/mixins/ gem install compass How to install on windows Also you can do more with compass : sudo gem install compass Linux / OS X: Columns Transition Tables Sprites Helpers
  14. 14. http://thesassway.com/beginner/getting-started-with-sass-and-compass http://lesscss.org/usage/ Compile to Sass to CSS compass watch This is the easiest part. Sass and Compass does all the hard work, so run this command and let Compass do its thing. Compile to Less to CSS LESS can run on the client-side and server-side, or can be compiled into plain CSS by less.js. However, not for production. To compile run this command using Less.js everytime. lessc input.less [output.css]
  15. 15. Which one do you like better? Fin.

×