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 with TextMate/Sublime Text bundle.
CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
LICENSE
README.md
_remixin.scss
remixin.sublime-snippet

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.

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


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