an introduction to css preprocessors (sass & less)
TRANSCRIPT
![Page 1: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/1.jpg)
Introduction to Less.js, Introduction to Less.js, Sass and CompassSass and Compass
www.folio3.com@folio_3
![Page 2: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/2.jpg)
Folio3 – OverviewFolio3 – Overview
www.folio3.com @folio_3
![Page 3: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/3.jpg)
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
![Page 4: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/4.jpg)
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)
![Page 5: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/5.jpg)
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
![Page 6: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/6.jpg)
Areas of Focus: Enterprise Automating workflows
Cloud based solutions
Application integration
Platform development
Healthcare
Mobile Enterprise
Digital Media
Supply Chain
![Page 7: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/7.jpg)
Some of Our Enterprise Clients
![Page 8: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/8.jpg)
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
![Page 9: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/9.jpg)
Some of Our Mobile Clients
![Page 10: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/10.jpg)
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
![Page 11: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/11.jpg)
Some of Our Web Clients
![Page 12: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/12.jpg)
www.folio3.com @folio_3
Introduction to Less.js, Introduction to Less.js, Sass and CompassSass and Compass
![Page 13: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/13.jpg)
Agenda What is Less?
Usage
Compilers
Features
Variables
Mixins
Nested Rules
Operations
Extend
![Page 14: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/14.jpg)
Agenda (Continued)
What is Sass
Different Syntex Of Sass
Installation
Differences B/W Sass and Less
What Is Compass?
Installation
Usage
![Page 15: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/15.jpg)
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
![Page 16: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/16.jpg)
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>
![Page 17: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/17.jpg)
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)
![Page 18: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/18.jpg)
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.
![Page 19: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/19.jpg)
Features Variables:
// LESS@headingcolor: #4D926F;#header {color: @headingcolor;}h2 {color: @headingcolor;}
![Page 20: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/20.jpg)
Features
Variables:/* Compiled CSS */#header {color: #4D926F;}h2 {color: #4D926F;}
![Page 21: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/21.jpg)
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.
![Page 22: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/22.jpg)
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);}
![Page 23: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/23.jpg)
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;}
![Page 24: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/24.jpg)
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.
![Page 25: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/25.jpg)
Features Nested Rules:
// LESS#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
![Page 26: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/26.jpg)
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;}
![Page 27: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/27.jpg)
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
![Page 28: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/28.jpg)
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%);}
![Page 29: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/29.jpg)
Features Operations:
/* Compiled CSS */#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}
![Page 30: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/30.jpg)
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_).
![Page 31: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/31.jpg)
Features Extend:
// LESS.link { color: @link-color;}a:extend(.link) { font-weight: bold;}// Can also be written asa { &:extend(.link); font-weight: bold;}
![Page 32: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/32.jpg)
Features Extend:
/* Compiled CSS */.link, a { color: #428bca;}a { font-weight: bold;}
![Page 33: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/33.jpg)
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.
![Page 34: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/34.jpg)
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.
![Page 35: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/35.jpg)
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;}
![Page 36: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/36.jpg)
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
![Page 37: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/37.jpg)
Conversions
Convert Sass to SCSS:
sass-convert style.sass style.scss
Convert SCSS to Sass:
sass-convert style.scss style.sass
![Page 38: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/38.jpg)
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.
![Page 39: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/39.jpg)
Differences B/W Sass and LessSyntex (Variables)://LESS@blue: #3bbfce;.content-navigation { border-color: @blue;}
//SCSS$blue: #3bbfce;.content-navigation { border-color: $blue;}
![Page 40: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/40.jpg)
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);}
![Page 41: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/41.jpg)
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;}
![Page 42: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/42.jpg)
Differences B/W Sass and Less
Media Queries:
//LESS and SCSS
.some-class {
/* Default styling */
@media (max-width: 800px) {
/* Responsive styles */
}
}
![Page 43: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/43.jpg)
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%
![Page 44: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/44.jpg)
Differences B/W Sass and LessMaths://LESSdiv { width: 100px + 2em; // == 102px (weird)}
//SCSdiv { width: 100px + 2em; // Error: Incompatible units: 'em' and 'px’}
![Page 45: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/45.jpg)
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
![Page 46: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/46.jpg)
Installation
Gem Install Compass
To create rails app compase structure
compass create <myproject>
![Page 47: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/47.jpg)
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
![Page 48: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/48.jpg)
UsageSprites://SCSS@import "my-buttons/*.png”;
a { @include my-buttons-sprite(glossy)}
![Page 49: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/49.jpg)
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;}
![Page 50: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/50.jpg)
Useful Links
http://lesscss.org/
https://github.com/less/less.js/
http://sass-lang.com/
http://thesassway.com/
http://compass-style.org/
![Page 51: An Introduction to CSS Preprocessors (SASS & LESS)](https://reader035.vdocuments.net/reader035/viewer/2022081512/55c2a0f4bb61eb7d358b46db/html5/thumbnails/51.jpg)
Contact
For more details about our services, please get in touch
with us.
US Office: (408) 365-4638
www.folio3.com