An Introduction to CSS Preprocessors (SASS & LESS)
-
Upload
folio3-software -
Category
Technology
-
view
67 -
download
0
Transcript of An Introduction to CSS Preprocessors (SASS & LESS)
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.
US Office: (408) 365-4638
www.folio3.com