Andreas Plahn Blog

Use Interpolate: body height: calc(100% – #{$body_padding})

Source: css3 – Sass Variable in CSS calc() function – Stack Overflow

Snippet for positioning items centered horizontally and vertically:

display: flex; /* turn flexbox on */ 
justify-content: center; /* center children horizontally */ 
align-items: center; /* center children vertically */

Snippets for container positioning items and IE10 rules:

/* IE 10 flexbox cheatsheet */

/* enable flexbox */
display:                  flex;
display: 		  -ms-flexbox;

/* container - horizontal align items */
justify-content:          flex-start | flex-end | center | space-around | space-between;
-ms-flex-pack:            start | end | center | distribute | justify;

/* container - vertical align items */
align-items:              flex-start | flex-end | center | stretch | baseline;
-ms-flex-align:           start | end | center | stretch | baseline;

/* container - vertical height for items when extra space is available (multi line) */
align-content:            flex-start | flex-end | center | space-around | space-between | stretch;
-ms-flex-line-pack:       start | end | center | distribute | justify | stretch;

Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/

Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/

Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4