• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Useful Mixin Functions For Generating Responsive Percentage Widths, Margins and Paddings in LESS

General · February 27, 2013

If you’re not already using LESS, you should be and I advise you start now or else. As you’ll know developing responsive websites involves taking the desired pixel value dividing it by its parent contextual value and then multiplying by 100 to get the desired percentage. I used to use a calculator back in the day before I discovered LESS.

I realised a few developer friends of mine were still doing it the hard way, so I thought I’d share some mixin functions I created and incorporate into my LESS workflow. These could perhaps be merged into one super function, but in responsive development I only ever use percentage widths and margins/paddings left and right values so this works better for me and is for flexible.

Calculating responsive widths:

.pwidth(@target, @context: 960px) {
width: 100% * (@target/@context);
}

Example usage: .pwidth(220px); // Will generate a width of 220px in percentage form based on the parent context

Responsive margin-left

.lmargin(@target, @context: 960px) {
margin-left: 100% * (@target/@context);
}

Example usage: .lmargin(10px); // Will generate a margin-left of 10px in percentage form based on the parent context

Responsive margin-right

.rmargin(@target, @context: 960px) {
margin-right: 100% * (@target/@context);
}

Example usage: .rmargin(10px); // Will generate a margin-rightof 10px in percentage form based on the parent context

Responsive padding-left

.lpadding(@target, @context: 960px) {
padding-left: 100% * (@target/@context);
}

Example usage: .lpadding(10px); // Will generate a padding-left of 10px in percentage form based on the parent context

Responsive padding-right

.rpadding(@target, @context: 960px) {
padding-right: 100% * (@target/@context);
}

Example usage: .rpadding(10px); // Will generate a padding-right of 10px in percentage form based on the parent context

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Which Neural DSP Archetype Plugins Should You Buy?
  • A review of the Neural DSP Quad Cortex: is this the future of amp-modelling?
  • How To Mock uuid In Jest
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • Microsoft Flight Simulator 2020 Settings for The HP Reverb G2 Headset and RTX 3070 Graphics Card
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)

Recent Comments

  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files
  • James on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz