Introduction to Less.js, Introduction to Less.js, Sass and CompassSass and Compass

www.folio3.com@folio_3

Folio3 – OverviewFolio3 – Overview

www.folio3.com @folio_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

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)

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

Areas of Focus: Enterprise Automating workflows

Cloud based solutions

Application integration

Platform development

Healthcare

Mobile Enterprise

Digital Media

Supply Chain

Some of Our Enterprise Clients

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

Some of Our Mobile Clients

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

Some of Our Web Clients

www.folio3.com @folio_3

Introduction to Less.js, Introduction to Less.js, Sass and CompassSass and Compass

Agenda What is Less?

Usage

Compilers

Features

Variables

Mixins

Nested Rules

Operations

Extend

Agenda (Continued)

What is Sass

Different Syntex Of Sass

Installation

Differences B/W Sass and Less

What Is Compass?

Installation

Usage

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

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>

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)

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.

Features Variables:

// LESS@headingcolor: #4D926F;#header {color: @headingcolor;}h2 {color: @headingcolor;}

Features

Variables:/* Compiled CSS */#header {color: #4D926F;}h2 {color: #4D926F;}

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.

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);}

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;}

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.

Features Nested Rules:

// LESS#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}

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;}

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

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%);}

Features Operations:

/* Compiled CSS */#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}

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_).

Features Extend:

// LESS.link { color: @link-color;}a:extend(.link) { font-weight: bold;}// Can also be written asa { &:extend(.link); font-weight: bold;}

Features Extend:

/* Compiled CSS */.link, a { color: #428bca;}a { font-weight: bold;}

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.

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.

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;}

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

Conversions

Convert Sass to SCSS:

sass-convert style.sass style.scss

Convert SCSS to Sass:

sass-convert style.scss style.sass

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.

Differences B/W Sass and LessSyntex (Variables)://LESS@blue: #3bbfce;.content-navigation { border-color: @blue;}

//SCSS$blue: #3bbfce;.content-navigation { border-color: $blue;}

Differences B/W Sass and LessSyntex(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);}

Differences B/W Sass and LessNested Properties (Sass have nested properties):// SCSSli { font: { family: serif; weight: bold; size: 1.2em; }}

/* Compiled CSS */li { font-family: serif; font-weight: bold; font-size: 1.2em;}

Differences B/W Sass and Less

Media Queries:

//LESS and SCSS

.some-class {

/* Default styling */

@media (max-width: 800px) {

/* Responsive styles */

}

}

Differences B/W Sass and LessMedia 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%

Differences B/W Sass and LessMaths://LESSdiv { width: 100px + 2em; // == 102px (weird)}

//SCSdiv { width: 100px + 2em; // Error: Incompatible units: 'em' and 'px’}

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

Installation

Gem Install Compass

To create rails app compase structure

compass create <myproject>

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

UsageSprites://SCSS@import "my-buttons/*.png”;

a { @include my-buttons-sprite(glossy)}

UsageSprites:/* 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;}

Useful Links

http://lesscss.org/

https://github.com/less/less.js/

http://sass-lang.com/

http://thesassway.com/

http://compass-style.org/

Contact

For more details about our services, please get in touch

with us.

contact@folio3.com

US Office: (408) 365-4638

www.folio3.com