Mixins

Round Corner

Add rounded corners to your element without worry about browser prefixes.

Examples

@include border-radius(2rem);
integer

Code
					
.button { @include border-radius(1rem); }
.button { @include border-radius(1rem 2rem 1rem 0.5rem); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Box Size

Change the behavior of the element by adding box-size declaration.

Examples

@include box-sizing(border-box);
content-box | border-box | initial | inherit

Code
					
select  { @include box-sizing(content-box); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Rotate

Add a rotation in your stylesheet without worrying about browser prefixes.

Examples

@include rotate(45deg);
integer + "deg"

Code
					
.rotate45 { @include rotate(45deg); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Transform

Add transform changes to your element without worry about browser prefixes.

Examples

@include transformed(translate3d(0, 0, 0));
transform

Code
					
.element { @include transformed(translate3d(0, 0, 0)); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Box-Shadow

Add box shadows to your element without worry about browser prefixes.

Examples

@include box-shadow(0 0.05rem 0.5rem rgba(0,0,0,.3));
shadow

Code
					
.element { @include box-shadow( 0 0.05rem 0.5rem rgba(0,0,0,.3)); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Font Smoothing

Add font smoothing when element is being transformed without worry about browser prefixes.

Examples

@include font-smoothing;

Code
					
.element { @include font-smoothing; }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Animations

Add animations and keyframes without worry about browser prefixes.

Examples

@include animation(fadein 1s, fadeout 1s 4.5s);

@include keyframes(slideMainMenu) { ... }

Code
					
.element { @include animation(fadein 1s, fadeout 1s 4.5s); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Flexbox Mixins

Predefined SASS mixins that can be used in a CSS file.

Examples

@include flexbox();

@include flex(3);
integer | initial | auto | none

@include flex-wrap(nowrap);
nowrap | wrap | wrap-reverse

@include align-items(stretch);
flex-start | flex-end | center | baseline | stretch

@include flex-direction(row);
row | row-reverse | column | column-reverse

@include justify-content(space-between);
flex-start | flex-end | center | space-between | space-around

@include align-content(flex-start);
flex-start | flex-end | center | space-between | space-around | stretch

@include align-self(center);
auto | flex-start | flex-end | center | baseline | stretch

@include order(2);
integer

Code
					
.items { @include flex-wrap(nowrap); }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_mixins.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

To Top