Do more with {less}

This session

Goal #1:Show you why you shoulduse {less}

Goal #2:Teach you {less} in30 minutes

There will be code

{less} to keep us sane

You don’t need notes

About meJesper Wøldiche RahkonenDesigner / themer / markup marine*really* likes gridstwitter: woeldiche

OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras

OverviewWhatWhy Why you should be using {less}FeaturesLearn {less}DrupalExtras

OverviewWhatWhyFeatures An overview of the features in {less}Learn {less}DrupalExtras

OverviewWhatWhyFeaturesLearn {less} I’ll teach you {less}, hopefullyDrupalExtras

OverviewWhatWhyFeaturesLearn {less}Drupal Using {less} in drupalExtras

OverviewWhatWhyFeaturesLearn {less}DrupalExtras Yummy extras, if time

What is {less}?

{less} extends css with newfeatures

Compiles into ordinary(but yummy, yummy) CSS

A strict superset of CSS

Why use {less}?

Why?Write less code

Why?Write less code,that’s faster to code up

Why?Write less code,that’s faster to code up,easier (cheaper) to maintain

Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a project

Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a projector among several projects

And it’s dead-easyto learn, if you alreadyknow CSS- honestly!

Feature overview

Feature overviewVariables (yay!)

Feature overviewVariablesMixins (it’ll make sense, promise)

Feature overviewVariablesMixinsNested rules (for prettier code)

Feature overviewVariablesMixinsNested rulesOperations (it’s almost like programming)

Feature overviewVariablesMixinsNested rulesOperationsColor functions (Want channels with your HSL?)

Feature overviewVariablesMixinsNested rulesOperationsColor functions+ more

Variables

Variables1 // LESS 12 /* Compiled CSS */2 @color: #4D926F; 13 #header {3 14 color: #4D926F;4 #header { 15 }5 color: @color; 166 } 17 h2 {7 18 color: #4D926F;8 h2 { 19 }9 color: @color;10 }11

Mixins

Mixins// LESS1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }56 #menu a {7 color: #111;8 .bordered;9 }10 .post a {11 color: red;12 .bordered;13 }

Mixins/* Compiled CSS */1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }56 #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 }

MixinsAny css class, id og element definition can bemixed in

Case: reusable stylesDefine once. Use multiple time1 .awesome-styling { <awesome css go here> }23 .funky-box {4 .awesome-styling5 }67 .even funkier box {8 .awesome-styling9 <additional superfunky styling>10 }

Case: hard to rememberhacks workarounds1 .obscure-msie-hack {2 <illogical, esoteric code>3 }45 .content-that-works-in-any-other-browser {6 <styling>7 .obscure-msie-hack8 }

meh...

Parametric mixinsNow we’re talking.They should be spelled paramëtric mixinsand have a theme song.

Paramëtric mixins// LESS1 .rounded-corners (@radius: 5px) {2 -webkit-border-radius: @radius;3 -moz-border-radius: @radius;4 border-radius: @radius;5 }67 #header {8 .rounded-corners;9 }10 #footer {11 .rounded-corners(10px);12 }

Paramëtric mixins/* Compiled CSS */1 #header {2 border-radius: 5px;3 -webkit-border-radius: 5px;4 -moz-border-radius: 5px;5 }67 #footer {8 border-radius: 10px;9 -webkit-border-radius: 10px;10 -moz-border-radius: 10px;11 }

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 }

Case: Variable griddesignshack.co.uk/articles/css/introducing-the-less-css-grid

Case: Style library

@import// Import .less1 @import “lib.less”;2 @import “lib2”;// Import without processing3 @import “lib.css”;

A style library// LESS1 // Import libraries 16 form {2 @import “lib-typography”; 17 .lib_form-base3 @import “lib-branding.less”; 18 .lib_form-modern4 @import “lib-form_ui.less”; 19 ... your custom styles5 @import “lib-buttons.less”; 20 }6 217 /* Import base styling */ 22 input[type=text],8 @import “reset.css”; 23 textarea {9 @import “typography.css”; 24 .lib_form-input-modern10 25 ... more custom styles11 /* Apply library styles */ 26 }12 body {13 .lib_ty-base14 .lib_brand-base15 }

A style library/* Compiled CSS */1 <content of reset.css> 14 input[type=text],2 <content of typography.css> 15 textarea {3 16 <styles of lib_form-input-4 /* Apply library styles */ modern>5 body { 17 ... more custom styling6 <styles of lib_ty-base> 18 }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 }

Operations

Any number, colour or valuecan be operated on

Operations// LESS1 @base: 5%;2 @filler: @base * 2;3 @other: @base + @filler;45 color: #888 / 4;6 background-color: @base-color + #111;7 height: 100% / 2 + @filler;

{less} tells colours from units// LESS1 @var: 1px + 5;23 // You can use brackets4 width: (@var + 5) * 2;56 // Required for compound values7 border: (@width / 11) solid black;/* Compiled CSS */8 width: 22px;9 border: 2px solid black;

Case: Derived styling// LESS1 @fontsize-default: 14px;2 @fontsize-sec: @fontsize-default * 0.8;3 @lineheight: 1.3;45 p {6 font-size: @fontsize-default;7 line-height: @lineheight * @fontsize-default;8 }910 .block p {11 font-size: @fontsize-sec;12 line-height: @lineheight * @fontsize-sec;13 }

Colour operations

Colour operations1 lighten(@color, 10%); // a color 10% *lighter*2 darken(@color, 10%); // a color 10% *darker*34 saturate(@color, 10%); // a color 10% *more* saturated5 desaturate(@color, 10%); // a color 10% *less* saturated67 fadein(@color, 10%); // a color 10% *less* transparent8 fadeout(@color, 10%); // a color 10% *more* transparent910 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

Huh?Colors are first converted to theHSL color-spaceAnd then manipulated at the channel level

Nested rules

Nesting/* 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// LESS1 #header {2 color: black;34 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }

&-operator// LESS1 #header {2 color: black;34 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }

{less} and Drupal™

Three ways to play itThe easy way inThe performance concious solutionThe advanced version

The easy way in

LESS moduleAutomatically compiles .less files in the theme toplain css

LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment mode

LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment modemylesstheme.info:1 ;----- Stylesheets ----------------------------2 stylesheets[screen][] = styles/mylesstheme.styles.less3 stylesheets[screen][] = styles/mylesstheme.typography.less45 ;----- IE specific stylesheets ---------------6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less

Performance concious?

Compile locallyFrom the command line$ lessc styles.less > styles.cssCompiles to stdout

less.app‘The only thing easier is making fun of InternetExplorer’

I’m {more} advanced

Compile clientside withless.js

Access JS enviroment1 @height: `document.body.clientHeight`;

Progressive enhancementBuild on top of css/less compiled serverside,right?

Yummy extras

Escaping strings// 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 }

Namespaces1 #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 }1112 #header a {13 color: orange;14 #bundle > .button;15 }

String interpolationEmbed variables in strings withthe @{param} construct1 @base-url: “http://assets.fnord.com”;2 background-image: url(“@{base-url}/images/bg.png”);

JS Evaluation1 @var: `”hello”.toUpperCase() + ‘!’`;Becomes2 @var: “HELLO!”;

Questions?

Thank you!

Slides & docs{less} documentation: lesscss.orgSlides: slideshare.net/woeldicheLess module: drupal.org/project/lessless.app: incident57.com/less/

Do more with {less}

by Jesper Wøldiche

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 20

Statistics

Do more with {less} Presentation Transcript

http://lanyrd.com	19
http://www.linkedin.com	1