Skip to content

Instantly share code, notes, and snippets.

@decthomas
Created December 18, 2015 10:55
Show Gist options
  • Save decthomas/806c2d1783f7d3b31eeb to your computer and use it in GitHub Desktop.
Save decthomas/806c2d1783f7d3b31eeb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
$baseline: 6px;
@function line-height($font-size, $lines: false) {
// Get the correct # of baseline units for the given font-size
// unless an override is provided
@if not $lines {
$lines: ceil($font-size / $baseline);
// Ensure that the difference between font-size and line-height is between 4px and 6px
$font-line-diff: $lines * $baseline - $font-size;
// `/ 1px` makes the lhs unitless
@if $font-line-diff / 1px == 0 {
$lines: $lines + 1;
} @else if $font-line-diff < 4 {
$lines: $lines + 0.5;
}
}
@return $lines * $baseline / $font-size;
}
@mixin line-clamp($font-size, $lines) {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
height: $lines * $font-size * line-height($font-size);
max-height: $lines * $font-size * line-height($font-size);
overflow: hidden;
}
.test-line-clamp {
@include line-clamp(16px, 2);
}
.test-line-height {
line-height: line-height(16px);
}
.test-line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 42px;
max-height: 42px;
overflow: hidden;
}
.test-line-height {
line-height: 1.3125;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment