1.
Introduction to Less.js, Sass andIntroduction to Less.js, Sass and
CompassCompass
www.folio3.com@folio_3

2.
Folio3 – OverviewFolio3 – Overview
www.folio3.com @folio_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.
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.
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.
Areas of Focus: Enterprise
 Automating workflows
 Cloud based solutions
 Application integration
 Platform development
 Healthcare
 Mobile Enterprise
 Digital Media
 Supply Chain

7.
Some of Our Enterprise Clients

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.
Some of Our Mobile Clients

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.
Some of Our Web Clients

12.
www.folio3.com @folio_3
Introduction to Less.js, Sass andIntroduction to Less.js, Sass and
CompassCompass

13.
Agenda
 What is Less?
 Usage
 Compilers
 Features
 Variables
 Mixins
 Nested Rules
 Operations
 Extend

14.
Agenda (Continued)
 What is Sass
 Different Syntex Of Sass
 Installation
 Differences B/W Sass and Less
 What Is Compass?
 Installation
 Usage

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.
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.
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.
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.
Features
 Variables:
// LESS
@headingcolor: #4D926F;
#header {
color: @headingcolor;
}
h2 {
color: @headingcolor;
}

20.
Features
 Variables:
/* Compiled CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

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.
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.
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.
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.
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.
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.
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.
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.
Features
 Operations:
/* Compiled CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

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.
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.
Features
 Extend:
/* Compiled CSS */
.link, a {
color: #428bca;
}
a {
font-weight: bold;
}

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.
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.
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.
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.
Conversions
 Convert Sass to SCSS:
 sass-convert style.sass style.scss
 Convert SCSS to Sass:
 sass-convert style.scss style.sass

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.
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.
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.
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.
Differences B/W Sass and Less
Media Queries:
//LESS and SCSS
.some-class {
/* Default styling */
@media (max-width: 800px) {
/* Responsive styles */
}
}

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.
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.
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.
Installation
 Gem Install Compass
 To create rails app compase structure
 compass create <myproject>

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.
Usage
Sprites:
//SCSS
@import "my-buttons/*.png”;
a {
@include my-buttons-sprite(glossy)
}

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.
Useful Links
 http://lesscss.org/
 https://github.com/less/less.js/
 http://sass-lang.com/
 http://thesassway.com/
 http://compass-style.org/

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