CSS Calc Prop

by tomjleo

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<h1>CSS Calc Prop</h1>

<div class="box">
    <div class="inner-box">A</div>
    <div class="inner-box">B</div>
    <div class="inner-box">C</div>
    <div class="inner-box">D</div>
    <div class="inner-box">E</div>
    <div class="inner-box">F</div>
</div>

<div class="box medium">
    <div class="inner-box">A</div>
    <div class="inner-box">B</div>
    <div class="inner-box">C</div>
    <div class="inner-box">D</div>
    <div class="inner-box">E</div>
    <div class="inner-box">F</div>
</div>

<div class="box small">
    <div class="inner-box">A</div>
    <div class="inner-box">B</div>
    <div class="inner-box">C</div>
    <div class="inner-box">D</div>
    <div class="inner-box">E</div>
    <div class="inner-box">F</div>
</div>

<div class="box extra-small">
    <div class="inner-box">A</div>
    <div class="inner-box">B</div>
    <div class="inner-box">C</div>
    <div class="inner-box">D</div>
    <div class="inner-box">E</div>
    <div class="inner-box">F</div>
</div>

SCSS

html, body {
    height: 100%;
}

.box {
    width: 100%;
    background: green;
    color: black;
    overflow: hidden;
}

.box {
    &.medium {
        width: 80%;        
    }
    &.small {
        width: 50%;
    }
    &.extra-small {
        width: 25%;   
    }
}

.inner-box {
    width: calc(100% / 6);
    height: inherit;
    color: white;
    float: left;
}

.box {
    .inner-box:nth-child(1) { background: red; }
    .inner-box:nth-child(2) { background: blue; }
    .inner-box:nth-child(3) { background: purple; }
    .inner-box:nth-child(4) { background: orange; }
    .inner-box:nth-child(5) { background: yellow; }
    .inner-box:nth-child(6) { background: pink; }
}