LessCSS unitless mixins

When doing development and you need to dimensions to a block element in CSS its pretty tedious to write:

.block {
width: 200px;
height: 200px;

I use LessCSS as my css pre-processor so wrote a handy little mixin to shorten this:

.size(@w, @h) {
width: @w;
height: @h;

Then to use it in the example above I would use:

.block {

Not much of a saving but when you do this 20-30 times in a less file the savings can add up. One thing that always bugged me though was that I had to pass through the px in the mixin arguments. I thought the way to get round this would be to change the mixin code to:

.size(@w, @h) {
width: @{w}px;
height: @{h}px;

However this always resulted in a syntax error. I guess the variable interpolation isn’t that great. I have however solved this today to achieve the simpler .size(200,200) that I am after use this funky syntax:

.size(@w, @h) {
width: ~"@{w}px";
height: ~"@{h}px";

Lovely jubbly or to extend it further in case you want to throw in a different unit but default to pixels:

.size(@w, @h, @unit: 'px') {
width: ~"@{w}@{unit}";
height: ~"@{h}@{unit}";

Local Domain Without Hosts File on OSX

Where I do a lot of local development I need to set up a lot of virtual hosts etc for each new project. I’m always looking for ways to shave a bit of time off this process and make it quicker and simpler to set up. In general all of my projects follow a similar pattern. I assign a 3 letter code to the project and use this to set up a local domain, always in the form of xxx.localhost. This convention in general makes things very quick for me but I still end up having to edit a few files to set up a new site.

One thing that has bugged me for a while is having to edit my hosts file to add a new entry. In DNS world I would have a wildcard domain *.localhost which mapped to my machine, however this isn’t available in the hosts file so I ended up having to manually add it each time and my hosts file contained hundreds of entries.

Today I deleted all those entries and instead set up dnsmasq to create a *.localhost situation. It was fairly straightforward, only bit slightly difficult was the need to add to the list of DNS servers. I use Macports, but Homebrew is just as straightforward.

  • sudo port install dnsmasq
  • vim /opt/localhost/etc/dnsmasq.conf
  • add “address=/localhost/” to the end of the file
  • sudo port load dnsmasq
  • Open up Network preferences, add to the DNS Servers List
  • ping xxx.localhost – should return

That’s it. A wildcard DNS for *.localhost set up and working. One less file to remember to edit.