Skip to content

Instantly share code, notes, and snippets.

@geoffyuen
Last active December 13, 2019 15:41
Show Gist options
  • Save geoffyuen/82e693a5423d9fb071f028846b481618 to your computer and use it in GitHub Desktop.
Save geoffyuen/82e693a5423d9fb071f028846b481618 to your computer and use it in GitHub Desktop.
Sass/css - width from browser edge to grid system column
// Calculates the width of something that hugs the browser edge
// to a column inside a grid system with a max-width (Tachyons)
.sideimg {
$mw: 1920px; // max-width of container
$col: 40; // tach col width in percentage
// this doesn't evaluate
width: calc( 50% + ( -$mw / 2 + $mw * $col/100 ) );
// simplify using #{}
width: calc(50% - #{$mw / 2 - $mw * $col/100});
}
.sideimg {
width: calc( 50% + ( -$mw / 2 + $mw * $col/100 ) );
width: calc(50% - 192px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment