Skip to content

Instantly share code, notes, and snippets.

@dechowdev
Created July 2, 2014 09:11
Show Gist options
  • Save dechowdev/7a3546df204862bb17eb to your computer and use it in GitHub Desktop.
Save dechowdev/7a3546df204862bb17eb to your computer and use it in GitHub Desktop.
Nice sass mixins and functions from GUFF
//MIXINS AND FUNCTIONS FROM GUFF [https://github.com/kenwheeler/guff/]
//Respect man these are dang useful!
// Strips unit suffix from value
@function _strip-unit($num) {
@if type-of($num) != "number" {
@warn "num: #{$num} is not a number";
@return null;
}
@return $num / ($num * 0 + 1);
}
// Converts to rem, utility for rem-calc
@function _convert-to-rem($value, $base-value: $rem-base) {
@if type-of($value) != "number" {
@warn "value: #{$value} is not a number";
@return null;
}
@if type-of($base-value) != "number" {
@warn "base-value: #{$base-value} is not a number";
@return null;
}
$value: _strip-unit($value) / _strip-unit($base-value) * 1rem;
@if (_strip-unit($value) == 0) { $value: 0; } // Turn 0rem into 0
@return $value;
}
// Calculates rem value from number
@function rem-calc($values, $base-value: $rem-base) {
@if type-of($values) != "number" {
@warn "values: #{$values} is not a number";
@return null;
}
@if type-of($base-value) != "number" {
@warn "base-value: #{$base-value} is not a number";
@return null;
}
$max: length($values);
@if $max == 1 { @return _convert-to-rem(nth($values, 1), $base-value); }
$remValues: ();
@for $i from 1 through $max {
$remValues: append($remValues, _convert-to-rem(nth($values, $i), $base-value));
}
@return $remValues;
}
// Safe Rem
@mixin safe-rem($property: font-size, $num: 14){
$valid: true;
@if type-of($property) != "string" {
@warn "property: #{$property} is not a string";
$valid: false;
}
@if type-of($num) != "number" {
@warn "num: #{$num} is not a number";
$valid: false;
}
@if $valid == true {
#{$property}: #{_strip-unit($num)}px;
#{$property}: rem-calc($num);
}
}
// Text hider
@mixin hide-text($extend: true) {
$valid: true;
@if type-of($extend) != "bool" {
@warn "extend: #{$extend} is not a boolean";
$valid: false;
}
@if $valid == true {
@if $extend {
@extend %hide-text;
}
@else {
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
}
}
}
// Placeholder for hide-text
%hide-text {
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment