Do more with {less}
-
Upload
jesper-woldiche -
Category
Technology
-
view
3.910 -
download
4
description
Transcript of Do more with {less}
![Page 1: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/1.jpg)
Do more with {less}
![Page 2: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/2.jpg)
This session
![Page 3: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/3.jpg)
Goal #1:
Show you why you should use {less}
![Page 4: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/4.jpg)
Goal #2:
Teach you {less} in 30 minutes
![Page 5: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/5.jpg)
There will be code
![Page 6: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/6.jpg)
{less} to keep us sane
![Page 7: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/7.jpg)
You don’t need notes
![Page 8: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/8.jpg)
Jesper Wøldiche Rahkonen
Designer / themer / markup marine
*really* likes grids
twitter: woeldiche
About me
![Page 9: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/9.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
What is {less}
Overview
![Page 10: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/10.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
What is {less}
Overview
![Page 11: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/11.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
Why you should be using {less}
Overview
![Page 12: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/12.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
An overview of the features in {less}
Overview
![Page 13: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/13.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
I’ll teach you {less}, hopefully
Overview
![Page 14: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/14.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
Using {less} in drupal
Overview
![Page 15: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/15.jpg)
What
Why
Features
Learn {less}
Drupal
Extras
Yummy extras, if time
Overview
![Page 16: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/16.jpg)
What is {less}?
![Page 17: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/17.jpg)
{less} extends css with new features
![Page 18: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/18.jpg)
Compiles into ordinary (but yummy, yummy) CSS
![Page 19: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/19.jpg)
A strict superset of CSS
![Page 20: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/20.jpg)
Why use {less}?
![Page 21: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/21.jpg)
Write less code
Why?
![Page 22: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/22.jpg)
Write less code,
that’s faster to code up
Why?
![Page 23: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/23.jpg)
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
Why?
![Page 24: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/24.jpg)
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
and re-use in a project
Why?
![Page 25: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/25.jpg)
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
and re-use in a project
or among several projects
Why?
![Page 26: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/26.jpg)
And it’s dead-easy to learn, if you already know CSS
- honestly!
![Page 27: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/27.jpg)
Feature overview
![Page 28: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/28.jpg)
Variables (yay!)
Feature overview
![Page 29: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/29.jpg)
Variables
Mixins (it’ll make sense, promise)
Feature overview
![Page 30: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/30.jpg)
Variables
Mixins
Nested rules (for prettier code)
Feature overview
![Page 31: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/31.jpg)
Variables
Mixins
Nested rules
Operations (it’s almost like programming)
Feature overview
![Page 32: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/32.jpg)
Variables
Mixins
Nested rules
Operations
Color functions (Want channels with your HSL?)
Feature overview
![Page 33: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/33.jpg)
Variables
Mixins
Nested rules
Operations
Color functions
+ more
Feature overview
![Page 34: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/34.jpg)
Variables
![Page 35: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/35.jpg)
1 // LESS2 @color: #4D926F;3 4 #header { 5 color: @color; 6 }7 8 h2 { 9 color: @color; 10 }11
12 /* Compiled CSS */13 #header { 14 color: #4D926F; 15 }16 17 h2 { 18 color: #4D926F;19 }
Variables
![Page 36: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/36.jpg)
Mixins
![Page 37: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/37.jpg)
// LESS1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }5 6 #menu a {7 color: #111;8 .bordered;9 }10 .post a {11 color: red;12 .bordered;13 }
Mixins
![Page 38: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/38.jpg)
Mixins/* Compiled CSS */1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }5 6 #menu a {7 color: #111;8 border-top: dotted 1px black;9 border-bottom: solid 2px black;10 }11 .post a {12 color: red;13 border-top: dotted 1px black;14 border-bottom: solid 2px black;15 }
![Page 39: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/39.jpg)
Any css class, id og element definition can be mixed in
Mixins
![Page 40: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/40.jpg)
Define once. Use multiple time1 .awesome-styling { <awesome css go here> }2 3 .funky-box {4 .awesome-styling5 }6 7 .even funkier box {8 .awesome-styling9 <additional superfunky styling>10 }
Case: reusable styles
![Page 41: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/41.jpg)
Case: hard to remember hacks workarounds1 .obscure-msie-hack { 2 <illogical, esoteric code> 3 }4 5 .content-that-works-in-any-other-browser {6 <styling>7 .obscure-msie-hack8 }
![Page 42: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/42.jpg)
meh...
![Page 43: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/43.jpg)
meh...
![Page 44: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/44.jpg)
Now we’re talking.
They should be spelled paramëtric mixins and have a theme song.
Parametric mixins
![Page 45: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/45.jpg)
Paramëtric mixins// LESS1 .rounded-corners (@radius: 5px) {2 -webkit-border-radius: @radius;3 -moz-border-radius: @radius;4 border-radius: @radius;5 }6 7 #header {8 .rounded-corners;9 }10 #footer {11 .rounded-corners(10px);12 }
![Page 46: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/46.jpg)
Paramëtric mixins/* Compiled CSS */1 #header {2 border-radius: 5px;3 -webkit-border-radius: 5px;4 -moz-border-radius: 5px;5 }6 7 #footer {8 border-radius: 10px;9 -webkit-border-radius: 10px;10 -moz-border-radius: 10px;11 }
![Page 47: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/47.jpg)
Case: Vendor prefixesDefine once1 .opacity(@opacity: 0.5) {2 -moz-opacity: @opacity;3 -khtml-opacity: @opacity;4 -webkit-opacity: @opacity;5 opacity: @opacity;6 -ms-filter: e(“progid:DXImageTransform.Microsoft.Alpha(Opacity=”)@opacity*100e(“)”);7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”);8 }
Use thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
![Page 48: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/48.jpg)
Case: Vendor prefixesDefine once1 .opacity(@opacity: 0.5) {2 -moz-opacity: @opacity;3 -khtml-opacity: @opacity;4 -webkit-opacity: @opacity;5 opacity: @opacity;6 -ms-filter: e(“progid:DXImageTransform.Microsoft.Alpha(Opacity=”)@opacity*100e(“)”);7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”);8 }
Use thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
![Page 49: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/49.jpg)
designshack.co.uk/articles/css/introducing-the-less-css-grid
Case: Variable grid
![Page 50: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/50.jpg)
Case: Style library
![Page 51: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/51.jpg)
// Import .less1 @import “lib.less”;2 @import “lib2”;
// Import without processing3 @import “lib.css”;
@import
![Page 52: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/52.jpg)
// LESS1 // Import libraries2 @import “lib-typography”;3 @import “lib-branding.less”;4 @import “lib-form_ui.less”;5 @import “lib-buttons.less”;6 7 /* Import base styling */8 @import “reset.css”;9 @import “typography.css”;10 11 /* Apply library styles */12 body { 13 .lib_ty-base14 .lib_brand-base15 }
16 form {17 .lib_form-base 18 .lib_form-modern19 ... your custom styles20 }21 22 input[type=text], 23 textarea {24 .lib_form-input-modern25 ... more custom styles 26 }
A style library
![Page 53: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/53.jpg)
/* Compiled CSS */1 <content of reset.css>2 <content of typography.css>3 4 /* Apply library styles */5 body { 6 <styles of lib_ty-base>7 <styles of lib_brand-base>8 }9 form {10 <styles of lib_form-base> 11 <styles of lib_form-modrn>12 ... your custom styles13 }
14 input[type=text], 15 textarea {16 <styles of lib_form-input-modern>17 ... more custom styling 18 }
A style library
![Page 54: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/54.jpg)
Operations
![Page 55: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/55.jpg)
Any number, colour or value can be operated on
![Page 56: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/56.jpg)
Operations
// LESS1 @base: 5%;2 @filler: @base * 2;3 @other: @base + @filler;4 5 color: #888 / 4;6 background-color: @base-color + #111;7 height: 100% / 2 + @filler;
![Page 57: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/57.jpg)
// LESS1 @var: 1px + 5;2 3 // You can use brackets4 width: (@var + 5) * 2; 5 6 // Required for compound values 7 border: (@width / 11) solid black;
/* Compiled CSS */8 width: 22px;9 border: 2px solid black;
{less} tells colours from units
![Page 58: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/58.jpg)
Case: Derived styling
// LESS1 @fontsize-default: 14px;2 @fontsize-sec: @fontsize-default * 0.8;3 @lineheight: 1.3;4 5 p {6 font-size: @fontsize-default;7 line-height: @lineheight * @fontsize-default;8 }9 10 .block p {11 font-size: @fontsize-sec;12 line-height: @lineheight * @fontsize-sec;13 }
![Page 59: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/59.jpg)
Colour operations
![Page 60: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/60.jpg)
Colour operations1 lighten(@color, 10%); // a color 10% *lighter*2 darken(@color, 10%); // a color 10% *darker*3 4 saturate(@color, 10%); // a color 10% *more* saturated5 desaturate(@color, 10%); // a color 10% *less* saturated6 7 fadein(@color, 10%); // a color 10% *less* transparent8 fadeout(@color, 10%); // a color 10% *more* transparent9 10 spin(@color, -10%); // return a color with a 10 degree larger in hue than @color11 spin(@color, 10%); // return a color with a 10 degree smaller hue than @color
![Page 61: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/61.jpg)
Huh?
Colors are first converted to the HSL color-space
And then manipulated at the channel level
![Page 62: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/62.jpg)
Nested rules
![Page 63: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/63.jpg)
/* Old skool CSS */1 #header { color: black; }2 #header .navigation {3 font-size: 12px;4 }5 #header .logo { 6 width: 300px; 7 }8 #header .logo:hover {9 text-decoration: none;10 }
Nesting
![Page 64: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/64.jpg)
// LESS1 #header {2 color: black;3 4 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
Nesting
![Page 65: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/65.jpg)
// LESS1 #header {2 color: black;3 4 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
&-operator
![Page 66: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/66.jpg)
{less} and Drupal™
![Page 67: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/67.jpg)
The easy way in
The performance concious solution
The advanced version
Three ways to play it
![Page 68: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/68.jpg)
The easy way in
![Page 69: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/69.jpg)
Automatically compiles .less files in the theme to plain css
LESS module
![Page 70: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/70.jpg)
Automatically compiles .less files in the theme to plain css
Development mode
LESS module
![Page 71: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/71.jpg)
Automatically compiles .less files in the theme to plain css
Development mode
mylesstheme.info:1 ;----- Stylesheets ----------------------------2 stylesheets[screen][] = styles/mylesstheme.styles.less3 stylesheets[screen][] = styles/mylesstheme.typography.less4 5 ;----- IE specific stylesheets ---------------6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less
LESS module
![Page 72: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/72.jpg)
Performance concious?
![Page 73: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/73.jpg)
From the command line$ lessc styles.less > styles.css
Compiles to stdout
Compile locally
![Page 74: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/74.jpg)
‘The only thing easier is making fun of Internet Explorer’
less.app
![Page 75: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/75.jpg)
I’m {more} advanced
![Page 76: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/76.jpg)
Compile clientside with less.js
![Page 77: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/77.jpg)
1 @height: `document.body.clientHeight`;
Access JS enviroment
![Page 78: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/78.jpg)
Build on top of css/less compiled serverside, right?
Progressive enhancement
![Page 79: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/79.jpg)
Yummy extras
![Page 80: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/80.jpg)
// LESS1 .class {2 filter: ~”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”;3 }
/* Compiled CSS */4 .class {5 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’);6 }
Escaping strings
![Page 81: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/81.jpg)
1 #bundle {2 .button () {3 display: block;4 border: 1px solid black;5 background-color: grey;6 &:hover { background-color: white }7 }8 .tab { ... }9 .citation { ... }10 }11 12 #header a {13 color: orange;14 #bundle > .button;15 }
Namespaces
![Page 82: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/82.jpg)
1 #bundle {2 .button () {3 display: block;4 border: 1px solid black;5 background-color: grey;6 &:hover { background-color: white }7 }8 .tab { ... }9 .citation { ... }10 }11 12 #header a {13 color: orange;14 #bundle > .button;15 }
Namespaces
![Page 83: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/83.jpg)
Embed variables in strings with the @{param} construct
1 @base-url: “http://assets.fnord.com”;2 background-image: url(“@{base-url}/images/bg.png”);
String interpolation
![Page 84: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/84.jpg)
1 @var: `”hello”.toUpperCase() + ‘!’`;
Becomes
2 @var: “HELLO!”;
JS Evaluation
![Page 85: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/85.jpg)
Questions?
![Page 86: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/86.jpg)
Thank you!
![Page 87: Do more with {less}](https://reader031.fdocuments.us/reader031/viewer/2022020115/5480727eb479593c578b46b0/html5/thumbnails/87.jpg)
{less} documentation: lesscss.org
Slides: slideshare.net/woeldiche
Less module: drupal.org/project/less
less.app: incident57.com/less/
Slides & docs