remixin is a simple and efficient SCSS (Syntactically Awesome Stylesheets) mixin (like macros — re-usable css properties, selectors with arguments) to generate vendor specific css properties.
Pull request Compare This branch is 36 commits behind ialphan:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Remixin.tmbundle
LICENSE
README.md
remixin.scss

README.md

#remixin.scss

remixin is a simple and efficient SCSS (Syntactically Awesome Stylesheets) mixin (like macros — re-usable css properties, selectors with arguments) to generate vendor specific css properties.

##Usage Call remixin with the property and value(s). Browser vendor(s) are optional.

@include remixin(property, value, vendors);

Note: Property has to be the first argument and value can be a list of parameters separated by space. See individual properties below for usage.


####animation **Usage:** `(animation, [ || || || || || ][, [ || || || || || ] ]*)`.
**Support:** Chrome 4, Firefox 5+, IE 10+, Safari 4+.
Ex. @include remixin(animation, move 1s infinite);

####background-clip **Usage:** `(background-clip, border-box | padding-box | content-box [, border-box | padding-box | content-box]*)`.
**Support:** Chrome 4+, Firefox 3.5+, IE9+, Safari 3+.
Ex. @include remixin(background-clip, border-box);

####background-size **Usage:** `(background-size, [ | | auto ]{1,2} | cover | contain [, [ | | auto ]{1,2} | cover | contain]*)`.
**Support:** Chrome 1+, Firefox 3.6+, IE9+, Safari 3+.
Ex. @include remixin(background-size, 20px 20px);

####border-radius **Usage:** `(border-radius, [ | ]{1,4} [ / [ | ]{1,4}]?)`.
**Support:** Chrome 4+, Firefox 4+, IE9+ (IE8 with CSS3Pie), Safari 3+.
Ex. @include remixin(border-radius, 20px);

####box-direction **Usage:** `(box-direction, normal|reverse|inherit)`.
**Support:** Chrome 1+, Firefox 1+, Safari 2+.
Ex. @include remixin(box-direction, reverse);

####box-shadow **Usage:** `(box-shadow, none | < inset? && [ {2,4} && ? ]> [, < inset? && [ {2,4} && ? ]> ]*)`.
**Support:** Chrome 1+, Firefox 3.5+, IE9+ (IE8 with CSS3Pie), Safari 3+.
Ex. @include remixin(box-shadow, 20px 20px 20px #f00);

####box-sizing **Usage:** `(box-sizing, content-box | border-box | inherit)`.
**Support:** Chrome 1+, Firefox 1+, IE 8+, Safari 3+.
Ex. @include remixin(box-sizing, content-box);

####font-face **Usage:** `(font-face, | style || weight)`.
**Support:** Chrome 4+, Firefox 3.5+, IE4+, Safari 3.1+.
Ex. @include remixin('font-face', Consolas);
	@include remixin('font-face', Consolas normal);
	@include remixin('font-face', Consolas normal 200);

####hyphens **Usage:** `(hyphens, none | manual | auto`.
**Support:** Chrome 13+ Firefox 6+, IE 10+, Safari 5.1+.
Ex. @include hyphens('hyphens', none);

####linear-gradient **Usage:** `(linear-gradient, ([ || ,]? , [, ]))`:
**Support:** Chorome 3+, Firefox 3.6+, IE10+ (compatible down to IE 8), Safari 4+.
Ex. @include remixin(linear-gradient, left #f00 #00f);

####opacity **Usage:** `(opacity, | inherit)`.
**Support:** Chrome 1+, Firefox 1+, IE9+ (compatible down to IE 8), Safari 1.2+.
Ex. @include remixin(opacity, 0.2);

####transform **Usage:** `(transform, none | matrix | matrix3d | translate | translate3d | translateX | translateY | translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate | rotate3d | rotateX | rotateY | rotateZ | skew | skewX | skewY | perspective)`.
**Support:** Chrome 1+, Firefox 3.5+, IE9+, Safari 3.1+.
Ex. @include remixin(transform, rotate(200deg);

####transition **Usage:** `(transition, none|all|property time linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) time)`.
**Support:** Chrome 1+, Firefox 4+, IE 10+, Safari 3.2+.
Ex. @include remixin(transition, all 2s);

####user-select **Usage:** `(user-select, none | text | toggle | element | elements | all | inherit)`.
**Support:** Chrome 1+, Firefox 1+, IE 10+, Safari 1+.
Ex. @include remixin(user-select, none);

####::selection **Usage:** `(selection, background color)`.
**Support:** Chrome 1+, Firefox 1+, IE 9+, Safari 1.1+.
Ex. @include remixin(selection, #f00);

##Browser Support

  • Chrome (-webkit) as $webkit.
  • Firefox (-moz) as $moz.
  • Internet Explorer (-ms) as $ms (IE 10), $ms9 (IE 9), $ms8 (IE 8).
  • Safari (-webkit) as $webkit.

See individual properties above for implementation.

##Advanced Usage (suggested) In the remixin() enable/disable browser vendors for your needs. Defaults are:

$moz: true, $ms8: false, $ms9:true, $ms: true, $webkit: true

If you are developing for Chrome/Safari set $webkit to true, for Firefox set $moz to true, for IE 10 but not IE8/9, set $ms8 and $ms9 to false and $ms to true.

You can also target these when you are calling your remixin. Here is an example for applying border. Declare your variables:

$fontStyle: normal;
$fontWidth: 600;

Decide on which vendor you don't need and then turn it off:

$ms: false

Note: This will also disable IE 8 ($ms8) and IE 9 ($ms9). IE ($ms) > IE 8 ($ms8) | IE 9 ($ms9)


Then use them in your remixin:
Ex. @include remixin(font-face, $fontStyle $fontWidth, $ms: false);

Multiple browser vendors can be passed as arguments separated by commas:

Ex. @include remixin(transform, rotate(200deg), $moz: false, $ms: false);

This will not generate any -moz nor -ms properties.

##TextMate Bundle (snippet). The SCSS file extension must be selected in TextMate. Type remixin then press tab, it will generate the following code and place the cursor before the comma.

@include remixin(, ); 

##License See the LICENSE file.

##History

v0.1.21 - 2012-06-19

  • Removed radial-gradient.

v0.1.2 - 2012-06-15

  • Added CSS3Pie for IE 8 fallbacks.
  • Added radial-gradient (gradient is now linear-gradient).

v0.1.1 - 2012-06-14

  • Updated incorrect usage for ::selection property in the README.md.
  • Added $fontPath variable to be used with font-face property.
  • Added these properties:
    • animation
    • box-direction
    • hyphens
    • linear-gradient
    • transform
    • transition properties
  • Added remixin snippet as TextMate bundle.

v0.1 - 2012-06-14

  • Added these properties:
    • background-clip
    • background-size
    • border-radius
    • box-shadow
    • box-sizing
    • font-face
    • opacity
    • ::selection
    • user-select