LESS calc

This Code Adds Up

Are you OCD like me? Are you a code control freak? If you aren't, calc will make you one.

Calc allows you to define measurements using formulas. Why would you want that? Well, start using it, and you'll see.

For example, let's look at the newsletter bar on sugar.org.

We want the newsletter bar to fill up the remaining space that the social icons leave. There are probably a few ways to do this, and hey, if it weren't responsive, you could just measure the pixels and call it a day. But those days are long gone.

.content{
		width: ~"calc(100% - 80px)";
		max-width: 1600px;
	
		#newsletter{
			width: ~"calc(100% - 440px)"; 
			form{
				width: ~"calc(100% - 255px - 20px - 10px)";
				margin-left: 20px;

				input{
					width: ~"calc(100% - 156px - 22px - 10px)";
					padding-right: 20px;
					border: 1px solid @light-gray;
				}
			}
		}
}

I've removed the code that doesn't affect the widths here to keep this example simple, but you can see that calc is being used over an over to determine responsive widths. The ~ syntax is for WP less and might not be necessary for your compiler.

This is just the beginning! Use it for margins, pads and whatever else you can think of.