Web Pre-Processors - Centare

spongereasonInternet and Web Development

Nov 12, 2013 (3 years and 9 months ago)

97 views

Web Pre
-
Processors

The Future of CSS and JavaScript Today


Daniel Laughland

Forward Thinking

fast. forward. thinking.

.
scss

.sass

.less

.
ts

.coffee

.min.css

.min.js

Why Use Pre
-
Processors?

Repetition

Utility Classes

Browser Prefixes

Monolithic Files

f
unction
s as Classes

var

self = this;

"0" == true

Awkward
Namespacing

fast.
forward. thinking.

CSS Pre
-
Processors

Concise, Consistent, and Reusable

fast. forward. thinking.

Nested Rules

#header

h1
{

font
-
size
:

200
%
;

}

#header

a
{

text
-
decoration
:

none
;

}

#header

nav

{

float
:

right
;

}

@media screen and (max
-
width:480px)
{



#header

nav

{

float
:

none
;

}

}

fast. forward. thinking.

Nested Rules

#header

{


h1
{

font
-
size
:

200
%
;

}


a
{

text
-
decoration
:

none
;

}


nav

{

float
:

right
;

}


@media screen and (max
-
width:480px)
{



nav

{

float
:

none
;

}


}

}

fast. forward. thinking.

Variables

fast. forward. thinking.


h1
,

h2
{

color
:

#D9A164
;

}

.callout

{


background
-
color
:

#D9A164
;

}

li
:before

{


content
:

"• "
;


color
:

#D9A164
;

}

Variables

$orange
-
peanut
:

#D9A164
;

h1
,

h2
{

color
:

$orange
-
peanut
;
}

.callout

{


background
-
color
:

$orange
-
peanut
;

}

li
:before

{


content
:

"• "
;


color
:

$orange
-
peanut
;

}

fast. forward. thinking.

SASS:

$variable

LESS:

@variable

Mixins

<
div

id
="related
-
links"
class
="box right">…</
div
>


.
right

{


float
:

right
;


margin
:

1em
;

}

.box

{


border
:

1px

solid

black
;


padding
:

1em
;

}

fast. forward. thinking.

Mixins

fast. forward. thinking.

<
div

id
="related
-
links">…</
div
>


.right

{


float
:

right
;


margin
:

1em
;

}

.box

{


border
:

1px

solid

black
;


padding
:

1em
;

}

#related
-
links
{


.right
;


.box
;

}

[LESS]

Mixins

fast. forward. thinking.

<
div

id
="related
-
links">…</
div
>


@
mixin

right

{


float
:

right
;


margin
:

1em
;

}

@
mixin

box

{


border
:

1px

solid

black
;


padding
:

1em
;

}

#related
-
links
{


@include
right
;


@include
box
;

}

[SASS]

Functions

@
mixin

boxify
(
$box
-
color
,

$width
) {


width
:

$width



2px
;


border
:

2px solid
$box
-
color
;


background
-
color
:

lighten
(
$box
-
color
,

50%
);


margin
:

$width
/
15
;

}


#callout
{

@include

boxify
(
#B1946C
,

150px
); }



fast. forward. thinking.

Functions

Color Manipulation

saturate() green() fade
-
out()
hsl
() complement()


Math and Units

round() max() (1in + 12px)


fast. forward. thinking.



Ported to many platforms

Simple setup & integration

Limited capability


Bootstrap

Kendo UI

Built on Ruby

Many scripting options

Powerful add
-
on libraries


ZURB Foundation

Sencha

fast. forward. thinking.



Unified Syntax for Prefixed Features





@include
background
(
linear
-
gradient
(
top left
,

#333
,
#030
));

Automatic Image Sprites





@
import
"my
-
icons/*.
png
"
;

@include
all
-
my
-
icons
-
sprites
;

Detect Image Height and Width
width
:

image
-
width
(
'banner.jpg'
);

In
-
Line Base64
Encoding

background
:

inline
-
image
(
'pattern.png
'
);

Built
-
In CSS Reset








@include
"compass/reset"
;

fast. forward. thinking.



SASS+Compass

Demo

fast. forward. thinking.

Tools for LESS/SASS

Visual Studio 2012 Web Tools Update 2

Web Essentials 2012

Mindscape Web Workbench

fast. forward. thinking.

JavaScript Pre
-
Processors

Easier Structure and Code Safety

fast. forward. thinking.

window.
myApp
.
OrangePeanut

=

(
function
(
ko
){


function

OrangePeanut
()

{


this
.
forMe

=

ko.
observable
(
true
)
;


}


OrangePeanut.
prototype
.
givePeanut

=

function
()

{


if

(
this
.
forMe
() ===
true
)

{


console.
log
(
"I accept you!"
)
;


}


}


return

OrangePeanut
;

})(
ko
)
;


ko.
applyBindings
(
window.
myApp
.
OrangePeanut
)
;

window.
myApp
.
OrangePeanut

=

function
(){


var

thisPeanut

=

this
;


this
.
forMe

=

ko.
observable
(
true
)
;


this
.
givePeanut

=

function
()

{


if

(
thisPeanut.
forMe
() ===
true
)

{


console.
log
(
"I accept you!"
)
;


}


};

}
;



ko.
applyBindings
(
new

OrangePeanut
())
;

fast. forward. thinking.

class

OrangePeanut

{


public

O
bservable
<
bool
>

forMe
;


public

void

givePeanut
() {


if

(
forMe
) console.
log

(
"I accept you!"
)
;


}

}



ko.
applyBindings
(
new

OrangePeanut
())
;

fast. forward. thinking.

fast. forward. thinking.

TypeScript

Microsoft Open
-
Source

Superset of
ECMAScript

5

Well
-
Integrated with VS

“It’s just JavaScript”

Inspired by Ruby syntax

Best with Node.JS

fast. forward. thinking.



class

OrangePeanut


constructor:
(
@
forMe
)

-
>


givePeanut
:
-
>


console.
log

"I accept you!"

if

@
forMe


myPeanut

= new
OrangePeanut

true

fast. forward. thinking.

class

OrangePeanut


constructor:
(
data
)

-
>



@
forMe

=
ko.observable

data.
forMe


givePeanut
:
-
>


console.
log

"I accept you!"

if

@
forMe
()


myPeanut

= new
OrangePeanut

true

fast. forward. thinking.

class

OrangePeanut

{


forMe
:

KnockoutObservableBool
;


constructor
(
mine
:

boolean
)

{


this
.
forMe

=

ko.observable
(mine)
;


}


givePeanut
()

{


if

(
this
.
forMe
()
)

console.
log
(
"I accept you!"
)
;



}

}


var

myPeanut

=

new

MyApp.
OrangePeanut
(
true
)
;

fast. forward. thinking.

TypeScript

Demo

fast. forward. thinking.

Thinking Forward

Integration with Bundler/
WebGrease

Real Source Map Support in SASS

New Language Features (like Generics)

fast. forward. thinking.

Thanks!

Daniel Laughland

daniel.laughland@centare.com

Twitter @
jabberwik


fast. forward. thinking.