Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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.
branch: master

This branch is 36 commits behind ialphan:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

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, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>][, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*).
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, [<length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | 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, [<length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{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? && [ <length>{2,4} && <color>? ]> [, < inset? && [ <length>{2,4} && <color>? ]> ]*).
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, <font> | 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, ([<point> || <angle>,]? <stop>, <stop> [, <stop>])):
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, <alphavalue> | 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
Something went wrong with that request. Please try again.