Skip to content

Instantly share code, notes, and snippets.

@dechowdev

dechowdev/_functions-mixins.scss

Created July 2, 2014 09:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dechowdev/7a3546df204862bb17eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dechowdev/7a3546df204862bb17eb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lucas Dechow created this gist Jul 2, 2014.
    89 changes: 89 additions & 0 deletions _functions-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    //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;
    }