Sass and Less are CSS preprocessors that add features like variables, nesting, mixins, and inheritance to regular CSS. Sass was designed by Hampton Catlin and developed using SassScript, while Less was designed by Alexis Sellier and allows real-time compilation via Less.js. Both preprocessors provide mechanisms for variables, nesting, mixins, and more to make writing CSS more efficient.

1. VS
CSS Preprocessors
Sass (Syntactically Awesome Stylesheets)Less (Leaner CSS)

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. 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. Variables
@color: red;
div{
color: @color;
}
$color: red;
div{
color: $color;
}
https://gist.github.com/chriseppstein/674726

5. Nested Selectors
p {
a {
color: red;
&:hover {
color: blue;
}
}
}
p {
a {
color: red;
&:hover {
color: blue;
}
}
}
https://gist.github.com/chriseppstein/674726

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. 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. 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. 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. 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. 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. Libraries & Compiling

14. 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

15. 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]

16. Which one do you like better?
Fin.