@anthonyalbertyn

Agenda
Use case for etending CSS with dynamic
behaviour!
"hat is #Less$%
&ptions for using Less CSS in websites!
&verview of the synta with eamples!
The inspiration to etend CSS with
dynamic behaviour
To use the power of variables and 'functions(!
To end up with less CSS code!
To be able to make changes )uickly and easily!
To have fun doing geeky stuff*
+isadvantages of #Less$ CSS and
similar technologies
,ot controlled by "-C standards!
Limited best practice available!
.f not used carefully/ you could end up with less
CSS and more compleity*
"hat is #Less$ CSS%
+ynamic stylesheet language designed by
Aleis Sellier from 0erlin 1 @cloudhead!
&pen source 1 Apache 2 License!
Less was designed as a ,ested metalanguage
1 valid CSS is valid Less code with the same
semantics!
"hat is #Less$ CSS%
Less can run client1side 3.456/ "eb7it/
8irefo9!
Less can run server1side 3,ode!:s or ;hino9!
Less can be pre1compiled into CSS!
8irst version of was written in ;uby but this
was replaced by a <avaScript version!
Less provides the following mechanisms
=ariables
,esting
>iins 1 classes that provides functionality to
be inherited or re1used by a sub1class!
&perators
8unctions
Comparison between Less and Saas
0oth are CSS pre1processors!
Less was influenced by SASS!
Less synta was closer to CSS than Sass/ but
with the release of Sassy CSS 3SCSS9 this is
no longer the case!
Comparison between Less and Saas
Saas is more mature and has slightly more
features!
They are pre1processed differently:
Less uses <avaScript and can run
client1side!
Sass uses ;uby so runs server1side!
Comparison between Less and Saas
Less can be slower to compile on the fly when
running client1side!
0oth can be pre1compiled into pure CSS before
uploading style sheets to sites ? meaning no
difference in performance!
Synta 1 https:@@gist!github!com@5ABA25
.mplementation of Less in websites
Let the website convert the Less code to CSS
on the fly by including the less!:s file ? available
from http:@@www!lesscss!org
Alternatively convert on the fly using the CDC
implementation 1 http:@@leafo!net@lessphp
.mplementation of Less in websites
Cre1compile the Less code into CSS and then
add the CSS to the website 1 site does not
need the less!:s file!
+rupal has a module that implements the CDC
version of Less 1 www!drupal!org!pro:ect@less
Less CSS compilers
8ree compiler for mac 1
http:@@incidentEA!com@less
8ree compiler for mac/ pc/ linu 1
http:@@wearekiss!com@simpless
<avaScript .mplementation
+ownload less!:s from www!lesscss!org
Add your Less CSS code to a tet file with a
!less etension eg! styles!less
.nclude less!:s with your styles:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
=ariables
Less synta CSS output
// Declare a numeric variable
@red: ff!!!!"
// Declare a strin# variable
@path: "/sites/default/files/ima#es""
// $pply these variables
.bl%ck &
c%l%r: @red"
back#r%und:url'(@&path)/mypic.jp#(*"
)
.bl%ck &
c%l%r: ff!!!!"
back#r%und: url'(/sites/default/
files/ima#es/mypic.jp#(*"
)
>iins
Less synta CSS output
.myb%rders &
b%rder+t%p: ,px s%lid !!!"
b%rder+b%tt%m: -px s%lid ff!"
)
.bl%ck, &
back#r%und+c%l%r: f.f.f."
.myb%rders"
)
.bl%ck- &
.myb%rders"
)
.bl%ck, &
back#r%und+c%l%r: f.f.f."
b%rder+t%p: ,px s%lid !!!"
b%rder+b%tt%m: -px s%lid ff!"
)
.bl%ck- &
b%rder+t%p: ,px s%lid !!!"
b%rder+b%tt%m: -px s%lid ff!"
)
,ested ;ules
Less synta CSS output
header &
.l%#% &
mar#in: ,!px .!px"
)
.missi%n &
c%l%r: ff!"
)
.menu &
c%l%r: !!!"
/:h%ver &
text+dec%rati%n: underline"
)
)
)
header .l%#% &
mar#in: ,!px .!px"
)
header .missi%n &
c%l%r: ff!"
)
header .menu &
c%l%r: !!!"
)
header .menu:h%ver &
text+dec%rati%n: underline"
)
Carametric >iins 3functions9
Less synta CSS output
.myb%rder'@radius* &
b%rder+radius: @radius"
+m%0+b%rder+radius: @radius"
+1ebkit+b%rder+radius: @radius"
)
.bl%ck, &
.myb%rder'-px*"
)
.butt%n &
.myb%rder'2px*"
)
.bl%ck, &
b%rder+radius: -px"
+m%0+b%rder+radius: -px"
+1ebkit+b%rder+radius: -px"
)
.butt%n &
b%rder+radius: 2px"
+m%0+b%rder+radius: 2px"
+1ebkit+b%rder+radius: 2px"
)
Cattern matching
Less synta CSS output
.myb%rder'@c%l%r3 @si0e*&
b%rder: @si0e s%lid @c%l%r"
)
.myb%rder'@c%l%r*&
b%rder: ,px s%lid @c%l%r"
paddin#: .!px"
)
.bl%ck, &
.myb%rder'!!!3 -px*"
)
.bl%ck. &
.myb%rder'!!!*"
)
.bl%ck, &
b%rder: -px s%lid !!!!!!"
)
.bl%ck. &
b%rder: ,px s%lid !!!!!!"
paddin#: .!px"
)
"hen there are two miins with same name and different parameter sets/ Less will match the
parameter pattern and apply the miin that matches!
Fuard epressions 3if statements9
Less synta CSS output
.mybl%ck '@si0e* 1hen '@si0e < ,!*&
f%nt+si0e: @si0e"
c%l%r: red"
)
.mybl%ck '@si0e* 1hen '@si0e > .!* and '@si0e < 2!*&
f%nt+si0e: @si0e"
c%l%r: #reen"
)
.mybl%ck '@si0e* 1hen '@si0e = -!*3'@si0e=4!*&
f%nt+si0e: @si0e"
c%l%r: blue"
)
G continued net page
.bl%ck, &
f%nt+si0e: -"
c%l%r: red"
)
.bl%ck. &
f%nt+si0e: .-"
c%l%r: #reen"
)
.bl%ck2 &
f%nt+si0e: -!"
c%l%r: blue"
)
.bl%ck5 &
f%nt+si0e: 4!"
c%l%r: blue"
)
.bl%ck,&
.mybl%ck'-*"
)
.bl%ck. &
.mybl%ck',-*"
)
.bl%ck2 &
.mybl%ck'-!*"
)
.bl%ck5 &
.mybl%ck'4!*"
)
&perations 36 1 H @9
Less synta CSS output
@1idth: -px"
.b%x, &
b%rder: '@1idth6.*s%lid !!!"
)
.b%x. &
b%rder: '@1idth62* s%lid !!!"
)
.b%x 2 &
paddin#: '@1idth7-*6."
)
.b%x, &
b%rder: ,!px s%lid !!!!!!"
)
.b%x. &
b%rder: ,-px s%lid !!!!!!"
)
.b%x 2 &
paddin#: .!px"
)
Colour functions
// return a c%l%r 1hich is ,!8 6li#hter6 than @c%l%r
li#hten'@c%l%r3 ,!8*"
// return a c%l%r 1hich is ,!8 6darker6 than @c%l%r
darken'@c%l%r3 ,!8*"
// return a c%l%r ,!8 6m%re6 saturated than @c%l%r
saturate'@c%l%r3 ,!8*"
// return a c%l%r ,!8 6less6 saturated than @c%l%r
desaturate'@c%l%r3 ,!8*"
// return a c%l%r ,!8 6less6 transparent than @c%l%r
fadein'@c%l%r3 ,!8*"
// return a c%l%r ,!8 6m%re6 transparent than @c%l%r
fade%ut'@c%l%r3 ,!8*"
// return @c%l%r 1ith -!8 transparency
fade'@c%l%r3 -!8*"

// return a c%l%r 1ith a ,! de#ree lar#er in hue than @c%l%r
spin'@c%l%r3 ,!*"
// return a c%l%r 1ith a ,! de#ree smaller hue than @c%l%r
spin'@c%l%r3 +,!*"

// return a mix %f @c%l%r, and @c%l%r.
mix'@c%l%r,3 @c%l%r.*"
9xample :mplementati%n fr%m lesscss.%r#:
@base: #f04615;
.class {
color: saturate(@base, 5%);
backgroundcolor: l!g"ten(s#!n(@base, $), %5%);
&
>ath functions
9xamples fr%m lesscss.%r#:
;9<< pr%vides a c%uple %f math functi%ns y%u can use %n number values:
r%und',.4=*" // returns (.(
ceil'..5*" // returns (2(
fl%%r'..4*" // returns (.(
:f y%u need t% turn a value int% a percenta#e3 y%u can d% s% 1ith the
percenta#e functi%n:
percenta#e'!.-*" // returns (-!8(
,amespaces
Less synta CSS output
mynamespace &
.link &
c%l%r: ff!"
)
.myb%x &
paddin#: .!px"
)
.myb%rder &
b%rder: .px s%lid ff!"
)
)
.b%x, &
mynamespace > .myb%x"
)
.b%x, &
paddin#: .!px"
)
=ery useful if you want to create your own CSS libraries or distribute CSS!
Scope
9xample fr%m lesscss.%r#:
@'ar: red;
##age {
@'ar: ("!te;
#"eader {
color: @'ar; )) ("!te
&
&
#footer {
color: @'ar; )) red
&
Scope is similar to other programming languages! =ariables and miins first looked up locally and
then if not found it looks for them in the parent!
About Anthony Albertyn
&wns a small digital marketing agency ? www!binarybrand!com
+rupal Themer and Chartered >arketer!
Co1organiser of +rupalCambs ? www!meetup!com@drupalcambs
"as the marketing team lead for +rupalCon London 2IJJ 1
http:@@london2IJJ!drupal!org@community@drupalcon1london1team
;eferences
http:@@www!lesscss!org
http:@@leafo!net@lessphp
http:@@sass1lang!com
https:@@github!com@cloudhead
;eferences
http:@@en!wikipedia!org@wiki@L4SSK3stylesheetKlanguage 9
http:@@coding!smashingmagaLine!com@2IJJ@IM@IM@an1
introduction1to1less1and1comparison1to1sass