Posted over 7 years ago. Visible to the public. Repeats.

CSS: Combining different length units with calc()

calc() lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:

Copy
width: calc(100% - (20px * 2));

When using Sass, you need to interpolate Sass expressions:

Copy
width: calc(100% - #{$margin})

Supported by all modern browsers and IE9+.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
about 2 years ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more