pre-processing-prefixes v0.1.0

Pre-processing Prefixes

Sass, Less and Stylus mixins for non-standard css prefixes for browser vendors.

Blends generate prefix css codes defined for all browser vendors. While everything is more happening for modern browsers, we still have to find separate measures and decodes for all browsers.

Installation

For using the yarn package manager.

npm install pre-processing-prefixes --save

For using the yarn package manager.

yarn add pre-processing-prefixes

For using the bower package manager.

bower install pre-processing-prefixes

Usage

Sass

To use all sass mixins, you must first include them in your file.

@import 'pre-processing-prefixes/sass';

Less

To use all less mixins, you must first include them in your file.

@import 'pre-processing-prefixes/less';

Stylus

To use all stylus mixins, you must first include them in your file.

@import 'pre-processing-prefixes/stylus'

Example

Use css preprocessor in the src folder use.scss, use.less or use.styl file you can see all the use examples.

// Sass
.animation {
    @include animation(mymove 5s infinite);
}

// Less
.animation {
    .animation(mymove 5s infinite);
}

// Stylus
.animation
    animation(mymove 5s infinite)

Output of the all mixin

.animation {
  -webkit-animation: mymove 5s infinite; // Chrome, Safari, Opera
  -moz-animation: mymove 5s infinite; // Firefox
  -o-animation: mymove 5s infinite; // Opera
  animation: mymove 5s infinite
}

All available mixins

• align-content(center)
• align-items(center)
• align-self(center)
• animation(mymove 5s infinite)
  • animation-delay(2s)
  • animation-direction(alternate)
  • animation-duration(3s)
  • animation-fill-mode(forwards)
  • animation-iteration-count(2)
  • animation-name(mymove)
  • animation-play-state(paused)
  • animation-timing-function(linear)
• backface-visibility(hidden)
• background-size(cover)
• border-radius(25px)
  • border-bottom-left-radius(25px)
  • border-bottom-right-radius(25px)
  • border-top-left-radius(25px)
  • border-top-right-radius(25px)
• box-decoration-break(clone)
• box-shadow(5px 10px #888888)
• box-sizing(border-box)
• clip-path(circle(50%))
• columns(100px 3)
  • column-count(3)
  • column-fill(auto)
  • column-gap(40px)
  • column-rule(4px double magenta)
  • column-rule-color(magenta)
  • column-rule-color(dotted)
  • column-rule-width(10px)
  • column-span(all)
  • column-width(100px)
• filter(grayscale(100%))
• flex(1)
  • flex-basis(100px)
  • flex-direction(row-reverse)
  • flex-flow(row-reverse wrap)
  • flex-grow(1)
  • flex-shrink(3)
  • flex-wrap(wrap)
• hyphens(none)
• justify-content(center)
• perspective(100px)
  • perspective-origin(left)
• transition(width 2s)
  • transition-delay(2s)
  • transition-duration(5s)
  • transition-property(width)
  • transition-timing-function(linear)
• transform(rotate(20deg))
  • transform-origin(20% 40%)
  • transform-style(preserve-3d)
• user-select(none)

License

MIT