Skip to content

Instantly share code, notes, and snippets.

@Guilh
Last active August 29, 2015 14:15
Show Gist options
  • Save Guilh/efc7c9d47215de2261a3 to your computer and use it in GitHub Desktop.
Save Guilh/efc7c9d47215de2261a3 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
// This could be one of your mq breakpoint variables
$wide-screen : "(min-width: 1025px)";
// Function
@function get-vw($target) {
// 1 vw is equal to 1% of the viewport width
$vw-context: (1000*.01) * 1px;
@return ($target/$vw-context) * 1vw;
}
// Mixin
@mixin vw($f) {
font-size: get-vw($f);
// Prevent font-size from getting too big
@media #{$wide-screen} {
font-size: $f;
}
}
// Using it
h1 {
@include vw(72px);
}
// If the width of the viewport is 1025px or wider,
// the font size will remain at 72px.
// Otherwise, the value will adjust as 7.2vw
h1 {
font-size: 7.2vw;
}
@media (min-width: 1025px) {
h1 {
font-size: 72px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment