Skip to content

Instantly share code, notes, and snippets.

@owzim

owzim/_mixins.scss

Created March 19, 2013 14:33
Show Gist options
  • Save owzim/5196620 to your computer and use it in GitHub Desktop.
Save owzim/5196620 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Christian revised this gist Mar 19, 2013. 1 changed file with 21 additions and 24 deletions.
    45 changes: 21 additions & 24 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,14 +10,6 @@ $prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");
    }
    }

    @mixin transparent($color, $alpha) {
    $rgba: rgba($color, $alpha);
    $ie-hex-str: ie-hex-str($rgba);
    background-color: transparent;
    background-color: $rgba;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
    zoom: 1;
    }


    /*
    @@ -29,6 +21,8 @@ $prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");
    }
    }



    /*
    @include keyframe(background-shift) {
    0% {
    @@ -58,7 +52,9 @@ $prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");
    }
    }

    /**


    /*
    div.logo {
    background: url("logo.png") no-repeat;
    @include image-2x("logo2x.png", 100px, 25px);
    @@ -77,23 +73,24 @@ div.logo {
    }



    /*
    @include slices((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, 0, " .icon");
    sprites should look like this:
    _______ _______ _______ _______
    | | | | |
    regular state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    hover state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    active state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    @include sprites((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, 0, " .icon");
    sprites should look like this:
    _______ _______ _______ _______
    | | | | |
    regular state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    hover state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    active state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    */
    @mixin slices($selectors, $width, $height, $position: 0, $suffix: "" ) {
    @mixin sprites($selectors, $width, $height, $position: 0, $suffix: "" ) {

    $i: $position;

  2. Christian revised this gist Mar 19, 2013. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -78,19 +78,19 @@ div.logo {


    /*
    @include slices((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, 0, " .icon");
    @include slices((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, 0, " .icon");
    sprites should look like this:
    sprites should look like this:
    _______ _______ _______ _______
    | | | | |
    regular state | icon1 | icon2 | icon3 | icon4 |
    regular state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    hover state | icon1 | icon2 | icon3 | icon4 |
    hover state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    active state | icon1 | icon2 | icon3 | icon4 |
    active state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    */
    @mixin slices($selectors, $width, $height, $position: 0, $suffix: "" ) {
  3. Christian revised this gist Mar 19, 2013. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -82,16 +82,16 @@ div.logo {
    sprites should look like this:
    _______ _______ _______ _______
    | | | | |
    regular state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    hover state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    active state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    _______ _______ _______ _______
    | | | | |
    regular state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    hover state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    active state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    */
    @mixin slices($selectors, $width, $height, $position: 0, $suffix: "" ) {

  4. Christian revised this gist Mar 19, 2013. 1 changed file with 16 additions and 3 deletions.
    19 changes: 16 additions & 3 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -78,11 +78,24 @@ div.logo {


    /*
    @include slices((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, " .icon");
    @include slices((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, 0, " .icon");
    sprites should look like this:
    _______ _______ _______ _______
    | | | | |
    regular state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    hover state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    | | | | |
    active state | icon1 | icon2 | icon3 | icon4 |
    |_______|_______|_______|_______|
    */
    @mixin slices($selectors, $width, $height, $suffix: "" ) {
    @mixin slices($selectors, $width, $height, $position: 0, $suffix: "" ) {

    $i: 0;
    $i: $position;

    @each $name in $selectors {
    #{$name}#{$suffix} {
  5. Christian revised this gist Mar 19, 2013. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -78,20 +78,20 @@ div.logo {


    /*
    @include slices((icon-calendar,icon-tickets,icon-newsletter), 64px, 64px);
    @include slices((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, " .icon");
    */
    @mixin slices($sliceNames, $width, $height) {
    @mixin slices($selectors, $width, $height, $suffix: "" ) {

    $i: 0;

    @each $name in $sliceNames {
    .#{$name} {
    @each $name in $selectors {
    #{$name}#{$suffix} {
    background-position: (-($width * $i)) 0;
    }
    .#{$name}:hover {
    #{$name}:hover#{$suffix} {
    background-position: (-($width * $i)) (-($height));
    }
    .#{$name}:active {
    #{$name}:active#{$suffix} {
    background-position: (-($width * $i)) (-($height * 2));
    }
    $i: $i + 1;
  6. Christian created this gist Mar 19, 2013.
    103 changes: 103 additions & 0 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    $prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");

    @mixin selection($color, $background, $textshadow: none) {
    @each $prefix in $prefixes {
    ::#{$prefix}selection {
    color: $color;
    background: $background;
    text-shadow: none;
    }
    }
    }

    @mixin transparent($color, $alpha) {
    $rgba: rgba($color, $alpha);
    $ie-hex-str: ie-hex-str($rgba);
    background-color: transparent;
    background-color: $rgba;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
    zoom: 1;
    }


    /*
    @include animation(some-name 1s infinite linear);
    */
    @mixin animation($animation) {
    @each $prefix in $prefixes {
    #{$prefix}animation: $animation;
    }
    }

    /*
    @include keyframe(background-shift) {
    0% {
    background-position: 0;
    }
    100% {
    background-position: -100%;
    }
    }
    */
    @mixin keyframe($animation-name) {
    @-webkit-keyframes $animation-name {
    @content;
    }

    @-moz-keyframes $animation-name {
    @content;
    }

    @-o-keyframes $animation-name {
    @content;
    }

    @keyframes $animation-name {
    @content;
    }
    }

    /**
    div.logo {
    background: url("logo.png") no-repeat;
    @include image-2x("logo2x.png", 100px, 25px);
    }
    */
    @mixin image-2x($image, $width, $height) {
    @media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
    }
    }


    /*
    @include slices((icon-calendar,icon-tickets,icon-newsletter), 64px, 64px);
    */
    @mixin slices($sliceNames, $width, $height) {

    $i: 0;

    @each $name in $sliceNames {
    .#{$name} {
    background-position: (-($width * $i)) 0;
    }
    .#{$name}:hover {
    background-position: (-($width * $i)) (-($height));
    }
    .#{$name}:active {
    background-position: (-($width * $i)) (-($height * 2));
    }
    $i: $i + 1;
    }

    }