The Mixer

dmbdesignpdx edited this page May 13, 2018 · 10 revisions

Vendor-Prefixed Mixins

All are setup to be just like the non-prefixed property accepting that property's valid values. These are the supported prefixed properties, at-rules, functions, pseudo-classes, and pseudo-elements:

  • align-content

  • align-items

  • align-self

  • animation

  • animation-delay

  • animation-direction

  • animation-duration

  • animation-fill-mode

  • animation-iteration-count

  • animation-name

  • animation-play-state

  • animation-timing-function

  • :any *

  • appearance

  • ::backdrop

  • backface-visibility

  • background-clip

  • box-sizing

  • box-shadow *

  • calc()

  • clip-path

  • filter

  • flex

  • flex-basis

  • flex-direction

  • flex-grow

  • flex-shrink

  • flex-wrap

  • @font-face

  • font-feature-settings

  • font-kerning

  • font-smoothing

  • :fullscreen

  • grid

  • grid-align-self

  • grid-column-end

  • grid-column-span

  • grid-column-start

  • grid-justify-self

  • grid-row-end

  • grid-row-span

  • grid-row-start

  • grid-template-columns

  • grid-template-rows

  • image-rendering

  • justify-content

  • @keyframes

  • linear-gradient() *

  • mask

  • mask-clip

  • mask-image

  • mask-origin

  • mask-position

  • mask-repeat

  • object-fit

  • object-position

  • order

  • perspective

  • perspective-origin

  • ::placeholder

  • ::progress-bar

  • :read-only

  • :read-write

  • ::selection

  • ::slider-thumb

  • ::slider-runnable-track

  • tap-highlight-color

  • text-size-adjust

  • text-stroke

  • touch-action

  • transform

  • transform-style

  • transform-origin

  • transition

  • transition-delay

  • transition-duration

  • user-select

  • @viewport

* use variable groups. box-shadow() only needs a variable group for multiple shadows.

Example use:

@include transition(color 0.2s);

calc()

@include calc($property, $value);
$property
CSS Property.
$value
CSS Value.

Flex/Inline-Flex and CSS Grid/Inline-Grid

@include display($type);
$type
CSS Value. flex, inline-flex, inline-grid, grid

Font Face

@include font-face($name, $source [, $full]);
$name
String. Name of the font to be used.
$source
String. The path to the font (leave the extension out).
$full
(optional) Boolean. Use all formats. Default: false.

Linear Gradients

@include linear-gradient(($gradient) [, ($image)])
$gradient
Variable Group. A CSS linear-gradient value.
$image
(optional) Variable Group. A path to an image.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.