Skip to content

Instantly share code, notes, and snippets.

@Jaswetz

Jaswetz/_mixins.scss

Created June 12, 2012 19:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jaswetz/2919647 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jaswetz/2919647 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jaswetz revised this gist Jun 15, 2012. 1 changed file with 33 additions and 1 deletion.
    34 changes: 33 additions & 1 deletion _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,4 +7,36 @@

    @function calc-em($target-px, $context) {
    @return ($target-px / $context) * 1em;
    }
    }

    @mixin font-size($font-size: 16){
    font-size : #{$font-size}px;
    font-size : #{$font-size / 10}rem; }

    @mixin text-overflow() {
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap; }

    // gradients

    @mixin greygrad {
    @include vertical($white, darken($greyLighter, 5%)); }

    @mixin basegrad {
    @include vertical($baseColor, darken($baseColor, 10%)); }

    @mixin infograd {
    @include vertical($infoColor, darken($infoColor, 10%)); }

    @mixin inversegrad {
    @include vertical($inversColor, darken($inversColor, 10%)); }

    @mixin successgrad {
    @include vertical($successColor, darken($successColor, 10%)); }

    @mixin warninggrad {
    @include vertical($warningColor, darken($warningColor, 10%)); }



  2. Jaswetz created this gist Jun 12, 2012.
    10 changes: 10 additions & 0 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    //----------------------------------------------------------------------------
    // mixins.scss
    //----------------------------------------------------------------------------

    // ---------------------------------------------------------------------------
    // CONVERTING PX TO EM

    @function calc-em($target-px, $context) {
    @return ($target-px / $context) * 1em;
    }