#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.
Demo: demo.html and demo.css in demo directory, demonstrates the basic usage of remixin with box-shadow.
##Supported Properties - animation - appearence - backface-visibility - background-clip - background-size - border-image - box-direction - box-shadow - box-sizing - column-count - column-fill - column-gap - column-rule - column-rule-color - column-rule-style - column-rule-width - column-span - column-width - filter - font-face - hyphens - linear-gradient - opacity - perspective - radial-gradient - ::selection - transform - transform-origin - transform-style - transition - user-select
##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);
####appearence **Usage:** `(appearence, normal | icon | window | button | menu | field)`.
**Support:** Chrome 1, Firefox 1+, Safari 3+.
Ex. @include remixin(appearence, none);
####backface-visibility **Usage:** `(backface-visibility, visible | hidden)`.
**Support:** Chrome 12+, Firefox 10+, IE10+, Safari 4+.
Ex. @include remixin(backface-visibility, hidden);
####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-image **Usage:** `(border-image, || [ / | / ? / ]? || )`.
**Support:** Chrome 19+, Firefox 3.6+, Safari 5.1+.
Ex. @include remixin(border-image, url(borderImage.png) 20 20 round);
####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);
####column-count **Usage:** `(column-count, | auto)`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-count', 2);
####column-fill (TODO) **Usage:** `(column-fill, auto | balance)`.
**Support:** Chrome 1+, Firefox 13+, IE10+, Safari 3+.
Ex. @include remixin('column-fill', 2);
####column-gap **Usage:** `(column-gap, | normal)`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-gap', 20px);
####column-rule **Usage:** `(column-rule, || || )`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-rule', solid 20px #f00);
####column-rule-color **Usage:** `(column-rule-color, )`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-rule-color', red);
####column-rule-style **Usage:** `(column-rule-style, )`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-rule-style', dotted);
####column-rule-width **Usage:** `(column-rule-width, )`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-rule-width', 3px);
####column-span **Usage:** `(column-span, none | all)`.
**Support:** Chrome 1+, IE10+, Safari 3+.
Ex. @include remixin('column-span', all);
####column-width (TODO) **Usage:** `(column-width, | auto)`.
**Support:** Chrome 1+, Firefox 1.5+, IE10+, Safari 3+.
Ex. @include remixin('column-width', 100px);
####font-face **Usage:** `(font-face, | style || weight)`.
**Support:** Chrome 4+, Firefox 3.5+, IE4+, Safari 3.1+.
Ex. @include remixin('font-face', Consolas); or
@include remixin('font-face', Consolas normal); or
@include remixin('font-face', Consolas normal 200); or
@include remixin('font-face', Consolas 200 normal);
####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);
####perspective **Usage:** `(perspective, none | )`.
**Support:** Chrome 12+, Firefox 10+, IE10+, Safari 4+.
**Note:** Same as transform(perspective).
Ex. @include remixin(perspective, 200px);
####radial-gradient (simple) **Usage:** `(radial-gradient, ([ || ,]? [ || ,]? , [, ]*)`:
**Support:** Chorome 3+, Firefox 3.6+, IE10+, Safari 4+.
Ex. @include remixin(radial-gradient, center, ellipse cover, #f00 0%, #00f 100%);
####::selection
Usage: (selection, background color)
.
Support: Chrome 1+, Firefox 1+, IE 9+, Safari 1.1+.
Ex. @include remixin(selection, #f00);
####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));
####transform-origin **Usage:** `(transform-origin, [ | | left | center | right | top | bottom] | [[ | | left | center | right] && [ | | top | center | bottom]] ?)`.
**Support:** Chrome 1+, Firefox 3.5+, IE9+, Safari 3.1+.
Ex. @include remixin(transform-origin, 50% 50%);
####transform-style **Usage:** `(transform-style, flat | preserve-3d )`.
**Support:** Chrome 12+, Firefox 10+, IE10+, Safari 4+.
Ex. @include remixin(transform-origin, preserve-3d);
####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, transform 2s ease);
####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);
##Browser Support * Chrome (-webkit) as $webkit. * Firefox (-moz) as $moz. * Internet Explorer (-ms) as $ms. * 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, $ms: true, $webkit: true
If you are developing for Chrome/Safari set $webkit to true, for Firefox set $moz to true, for IE set $ms to true.
You can also target these when you are calling your remixin. Here is an example setting your font-face. Declare your variables:
$fontStyle: normal;
$fontWidth: 600;
Decide on which vendor you don't need and then turn it off:
$ms: false
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 and Sublime Text Bundle (snippet) (suggested) Type *remixin* then press ⇥ (tab), it will generate the following code and place the cursor before the comma then press ⇥ (tab) again to place the cursor after the comma. If you press ⇥ (tab) one more time it will place the cursor at the end of the snippet. **Note:** SCSS file extension must be selected in TextMate or Sublime Text.
Ex. remixin ⇥
@include remixin(, );
##License See the LICENSE file.
##Language CSS (SCSS).
##History
v0.1.30 - 2014-02-27
- Improved transition property.
v0.1.29 - 2013-09-30
- Added appearence.
v0.1.28 - 2013-08-14
- Added these properties:
- column-fill
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- Reordered unprefixed property (non-vendor) to be last.
v0.1.27 - 2013-05-21
- Added Sublime Text snippet.
v0.1.26 - 2012-11-25
- Added these properties:
- backface-visibility
- transform-style
v0.1.26 - 2012-11-07
- Removed IE8 support: removed border-radius. MS9 is now just MS.
- Added filter property.
v0.1.25 - 2012-10-15
- Added transform-origin.
v0.1.24 - 2012-09-12
- Converted to a partial http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials.
v0.1.24 - 2012-08-20
- Added these properties:
- column-count
- column-gap
- column-rule
v0.1.23 - 2012-08-16
* Added perspective property. Note that it's same as transform(perspective).
* Added [demo.html](https://github.com/ialphan/remixin.scss/blob/master/demo/demo.html) and [demo.css](https://github.com/ialphan/remixin.scss/blob/master/demo/demo.scss) in [demo](https://github.com/ialphan/remixin.scss/tree/master/demo) directory. It demonstrates the basic usage of remixin with box-shadow.
* Added border-image property.
v0.1.22 - 2012-08-15
* Added simple radial-gradient.
* Added supported properties sections to the README.md.
* Fixed a typo in advanced-usage.
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