Have you ever had a problem with mixing units? For example, say you needed to make an equation 60%-10px? These operations could be very helpful in old browsers and this is possible right now with the calc() method in CSS. How can you use it? Let's resolve a problem with two floating boxes; one has a static width and the second is adjusting to the possible max width. The code is as follows:
HTML:
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
</div>SASS:
&:after
content: ""
display: table
clear: both
.container
+clearfix
& > *
float: left
height: 200px
padding: 10px
box-sizing: border-box
.first
width: 100px
background: red
.second
width: calc(100% - 100px)
background: blueCompiled CSS:
.container:after {
content: "";
display: table;
clear: both;
}
.container >* {
float: left;
height: 200px;
padding: 10px;
...