Any chance of getting an explicit licence added to this?

An easy way to center an element both vertically and horizontally is to apply display: flex to its parent and margin: auto to the item being centered. However, at least Safari 8.0.8 (and probably everything from there to 9) requires display: -webkit-flex.

/* KEYFRAMES */
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@Keyframes #{$animation-name} {
@content;
}
}

Hey,

this is not really an issue, but some ideas and questions while reading your scss code

1. what is the advantage of this mixins instead of using "normal" css?
   @mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
   text-shadow: $x $y $blur $color;
   }
2. i think the $r, $g, $b vars are to much, you can transform the normal hexcode color to rgb or rgba with background: rgba($color, $opacity);

@mixin box-rgba($r: 60, $g: 3, $b: 12, $opacity: 0.23, $color: #3C3C3C)

1. i also think the font-face mixins has too much parameters.
   i think its better, when you rename all the fonts with their types to the same name.

e.g. you have arial as webfont, so rename alle the types to the same name (arial.ttf, arial,woff, arial.eot, ...)

@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf')

so you can have just one src file

and make it like this:
src: url('webfonts/#{$file}.eot'),
url('webfonts/#{$file}.woff') format('woff'),

and so one. Maybe you should add the font-weight as a new parameter.

I hope this is helpful for you.

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Noticed a bug where compressed colour codes generated by using Sass with the --compressed flag (e.g. #ff0 instead of #ff0000) will break microsoft gradient filters as they expect full, 6-digit hex codes. Using sass's built in ie-hex-str() function will fix this:

@mixin background-gradient
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{ie-hex-str($startColor)}', endColorStr='#{ie-hex-str($endColor)}');

@mixin box-rgba
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{ie-hex-str($color)}',endColorStr='#{ie-hex-str($color)}');

sass.compile:
[apply] Syntax error: Invalid CSS after "...'#{$endColor}')": expected expression (e.g. 1px, bold), was ";"
[apply] on line 48 of /home/rttadi/Websites/mitaismain/spring/src/main/webapp/resources/sass/sass-css3-mixins/css3-mixins.sass
[apply] Use --trace for backtrace.

Hi,

I have problem when I compile the lib.
"css3-mixins.scss:196: error: error reading values after opacity"

I added the lib by @import "css3-mixins.scss" into my scss file and use gulp for compile it.

cannot pass vendor specific content transform, like:

@include keyframes(animation-name) {
    //this content will be same for every vendor
    //so I cannot pass transform or something like that
} 

It seems to be a problem with the box-shadow inset config:

I can't get this to compile, get this error:

scss/css3-mixins.scss:188: error reading values after opacity

/* OPACITY */
@mixin opacity($opacity: 0.5) {
    filter:         alpha(opacity=($opacity * 100));
    -ms-filter:     "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
    @include css3-prefix('opacity', $opacity);
}

Lines 229-331:

@mixin flex($value: 1) {
  @include css3-prefix('box-flex', $value);
}

See this article:
https://css-tricks.com/old-flexbox-and-new-flexbox/

I see mixins css3-prefix have 2 arguments, but in some methods calling with more than 2 args.

@include css3-prefix('box-shadow', 0 0 0 1px $colorTwo, 0 0 0 2px $colorThree);

@include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);

When i tried to use @include transition(); without args, sass fired the error

Mixin css3-prefix doesn't have the following arguments: $what, $length, $easing.

We've begun using https://rails-assets.org/ to generate rails gems for front-end components and it works great with most bower components.

sass-css3-mixins doesn't work because there isn't git release/version number. It's easily fixed by going to https://github.com/matthieua/sass-css3-mixins/releases and creating a release e.g. 'v0.1.0'

For background, see this comment: tenex/rails-assets#105 (comment) (different component, but same issue.)

How to make this happen?

@include box-shadow(none);

The blank/default $inset parameter in the box-shadow mixin (#1) is producing following invalid output:

-webkit-box-shadow: "" 2px 2px 5px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: "" 2px 2px 5px rgba(0, 0, 0, 0.4);
           box-shadow: "" 2px 2px 5px rgba(0, 0, 0, 0.4);

(sass version: 3.2.9)

I suggest to check if the string is empty:

/* BOX SHADOW */
@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
  @if ($inset != "") {
    -webkit-box-shadow: $inset $x $y $blur $color;
    -moz-box-shadow:    $inset $x $y $blur $color;
    box-shadow:         $inset $x $y $blur $color;
  } @else {
    -webkit-box-shadow: $x $y $blur $color;
    -moz-box-shadow:    $x $y $blur $color;
    box-shadow:         $x $y $blur $color;
  }
}

// Calc
/// @param {} $property Property
/// @param {} $expression Expression
@mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}

// Calc with default
/// @param {} $property Property
/// @param {} $default Value
/// @param {*} $expression Expression
@mixin calc-default($property, $default, $expression) {
#{$property}: $default;
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}

The filter properties for IE in the mixins background-gradient, box-rgba and rotate produce invalid output (the variables are displayed as $xxx in the css).

The right use should be:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');