SlideShare a Scribd company logo
1 of 16
VS
CSS Preprocessors
Sass (Syntactically Awesome Stylesheets)Less (Leaner CSS)
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/
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....
Variables
@color: red;
div{
color: @color;
}
$color: red;
div{
color: $color;
}
https://gist.github.com/chriseppstein/674726
Nested Selectors
p {
a {
color: red;
&:hover {
color: blue;
}
}
}
p {
a {
color: red;
&:hover {
color: blue;
}
}
}
https://gist.github.com/chriseppstein/674726
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
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
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
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:
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
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.
Libraries & Compiling
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
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]
Which one do you like better?
Fin.

More Related Content

What's hot (20)

Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
Bootstrap.pptx
Bootstrap.pptxBootstrap.pptx
Bootstrap.pptx
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
Angular
AngularAngular
Angular
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
JavaScript Basic
JavaScript BasicJavaScript Basic
JavaScript Basic
 
AEM Sightly Template Language
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template Language
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to know
 
Sass
SassSass
Sass
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Css3
Css3Css3
Css3
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
 
CSS FLexBox
CSS FLexBoxCSS FLexBox
CSS FLexBox
 
AEM Rich Text Editor (RTE) Deep Dive
AEM Rich Text Editor (RTE) Deep DiveAEM Rich Text Editor (RTE) Deep Dive
AEM Rich Text Editor (RTE) Deep Dive
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Introduction to ASP.NET Core
Introduction to ASP.NET CoreIntroduction to ASP.NET Core
Introduction to ASP.NET Core
 
WebAssembly WASM Introduction Presentation
WebAssembly WASM Introduction PresentationWebAssembly WASM Introduction Presentation
WebAssembly WASM Introduction Presentation
 

Viewers also liked

Drupal & CSS Preprocessors
Drupal & CSS PreprocessorsDrupal & CSS Preprocessors
Drupal & CSS Preprocessorskdmarks
 
LESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownLESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownKevin Powell
 
Estonian Web CMS Market Overview 2015
Estonian Web CMS Market Overview 2015Estonian Web CMS Market Overview 2015
Estonian Web CMS Market Overview 2015Wunderkraut Estonia
 
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...Marco Barbosa
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
The business of wordpress
The business of wordpressThe business of wordpress
The business of wordpressThomas Oppong
 
Getting to able! New Technologies in Education Conference, Serbia 2017
Getting to able! New Technologies in Education Conference, Serbia 2017Getting to able! New Technologies in Education Conference, Serbia 2017
Getting to able! New Technologies in Education Conference, Serbia 2017Rachel Maxwell
 
Lecture Capture: Is the Customer Always Right? New Technologies in Education ...
Lecture Capture: Is the Customer Always Right? New Technologies in Education ...Lecture Capture: Is the Customer Always Right? New Technologies in Education ...
Lecture Capture: Is the Customer Always Right? New Technologies in Education ...Rachel Maxwell
 
Retail: interaction and integration of new technologies.
Retail: interaction and integration of new technologies.Retail: interaction and integration of new technologies.
Retail: interaction and integration of new technologies.Michael Mazzer
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQueryinfo_cimol
 
Getting Started - MongoDB
Getting Started - MongoDBGetting Started - MongoDB
Getting Started - MongoDBWildan Maulana
 
19 Mini Productivity Hacks For A Simple (But An Awesome) Day
19 Mini Productivity Hacks For A Simple (But An Awesome) Day19 Mini Productivity Hacks For A Simple (But An Awesome) Day
19 Mini Productivity Hacks For A Simple (But An Awesome) DayThomas Oppong
 
Carolina Counts: An Update on the Bain Consulting Report
Carolina Counts: An Update on the Bain Consulting ReportCarolina Counts: An Update on the Bain Consulting Report
Carolina Counts: An Update on the Bain Consulting Reportldconrad
 
Jacqueline Novogratz by Anne Decourcy Conlin
Jacqueline Novogratz by Anne Decourcy ConlinJacqueline Novogratz by Anne Decourcy Conlin
Jacqueline Novogratz by Anne Decourcy ConlinStew Friedman
 
Reverse engineering
Reverse  engineeringReverse  engineering
Reverse engineeringYuffie Valen
 
Strategic management - retail sector (tesco)
Strategic management - retail sector (tesco)Strategic management - retail sector (tesco)
Strategic management - retail sector (tesco)Mohd Farid Awang
 
Mckinsey and Company Presentation
Mckinsey and Company PresentationMckinsey and Company Presentation
Mckinsey and Company Presentationjacobmilan
 

Viewers also liked (20)

Drupal & CSS Preprocessors
Drupal & CSS PreprocessorsDrupal & CSS Preprocessors
Drupal & CSS Preprocessors
 
LESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownLESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler Showdown
 
Estonian Web CMS Market Overview 2015
Estonian Web CMS Market Overview 2015Estonian Web CMS Market Overview 2015
Estonian Web CMS Market Overview 2015
 
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
WordPress vs Joomla vs Drupal
WordPress vs Joomla vs DrupalWordPress vs Joomla vs Drupal
WordPress vs Joomla vs Drupal
 
The business of wordpress
The business of wordpressThe business of wordpress
The business of wordpress
 
Getting to able! New Technologies in Education Conference, Serbia 2017
Getting to able! New Technologies in Education Conference, Serbia 2017Getting to able! New Technologies in Education Conference, Serbia 2017
Getting to able! New Technologies in Education Conference, Serbia 2017
 
Lecture Capture: Is the Customer Always Right? New Technologies in Education ...
Lecture Capture: Is the Customer Always Right? New Technologies in Education ...Lecture Capture: Is the Customer Always Right? New Technologies in Education ...
Lecture Capture: Is the Customer Always Right? New Technologies in Education ...
 
Retail: interaction and integration of new technologies.
Retail: interaction and integration of new technologies.Retail: interaction and integration of new technologies.
Retail: interaction and integration of new technologies.
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 
Getting Started - MongoDB
Getting Started - MongoDBGetting Started - MongoDB
Getting Started - MongoDB
 
Node JS
Node JSNode JS
Node JS
 
19 Mini Productivity Hacks For A Simple (But An Awesome) Day
19 Mini Productivity Hacks For A Simple (But An Awesome) Day19 Mini Productivity Hacks For A Simple (But An Awesome) Day
19 Mini Productivity Hacks For A Simple (But An Awesome) Day
 
Carolina Counts: An Update on the Bain Consulting Report
Carolina Counts: An Update on the Bain Consulting ReportCarolina Counts: An Update on the Bain Consulting Report
Carolina Counts: An Update on the Bain Consulting Report
 
Jacqueline Novogratz by Anne Decourcy Conlin
Jacqueline Novogratz by Anne Decourcy ConlinJacqueline Novogratz by Anne Decourcy Conlin
Jacqueline Novogratz by Anne Decourcy Conlin
 
Reverse engineering
Reverse  engineeringReverse  engineering
Reverse engineering
 
Strategic management - retail sector (tesco)
Strategic management - retail sector (tesco)Strategic management - retail sector (tesco)
Strategic management - retail sector (tesco)
 
JQUERY
JQUERY JQUERY
JQUERY
 
Mckinsey and Company Presentation
Mckinsey and Company PresentationMckinsey and Company Presentation
Mckinsey and Company Presentation
 

Similar to Less vs sass

SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS ImplementationAmey Parab
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajYatendra Bhardwaj
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Syntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareSyntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareRitwik Das
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
Getting SASSy with front end development
Getting SASSy with front end developmentGetting SASSy with front end development
Getting SASSy with front end developmentMatthew Carleton
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSSJulie Cameron
 
Modularization css with sass
Modularization css with sassModularization css with sass
Modularization css with sassHuiyi Yan
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
Scss talk CSS Meetup
Scss talk CSS Meetup Scss talk CSS Meetup
Scss talk CSS Meetup Caleb Yang
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your StylesheetGary Homidas
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionrushi7567
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introductionrushi7567
 

Similar to Less vs sass (20)

SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Syntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareSyntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech Software
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
Getting SASSy with front end development
Getting SASSy with front end developmentGetting SASSy with front end development
Getting SASSy with front end development
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
SASS Preprocessor
SASS PreprocessorSASS Preprocessor
SASS Preprocessor
 
Modularization css with sass
Modularization css with sassModularization css with sass
Modularization css with sass
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
Scss talk CSS Meetup
Scss talk CSS Meetup Scss talk CSS Meetup
Scss talk CSS Meetup
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your Stylesheet
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introduction
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introduction
 
Make your CSS beautiful again
Make your CSS beautiful againMake your CSS beautiful again
Make your CSS beautiful again
 

Less vs sass

  • 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.
  • 13.
  • 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.