SCSS mixins usage

The mixins are made to help you. There are mixins which take care of prefixing. There are also mixins that take care of repetitive codes.

The mixins that help with the prefixes are especially useful when you don't use gulp. Some mixins are made to prevent repetitive, duplicate code and thereby more code to edit. For example to take care of all the typography there is one. There is also a mixin that takes care of all default styling of raised and flat buttons.

To use a comma in the parameter you have to unquote it. For example when you would like to add multiple transitions: @include transition(color .3s ease-in-out unquote(',') background .3ms ease-in-out).

box-shadow()

The box-shadow() mixin is used to make box-shadow styling with all the prefixes.

	
@include box-shadow(0 16px 32px 0 rgba(0, 0, 0, 0.27706));
@include box-shadow(0 16px 32px 0 rgba(0, 0, 0, 0.27706) unquote(',') 0 12px 32px 0 rgba(0, 0, 0, 0.224));
	

border-radius()

The border-radius() mixin is used to add all prefixes for the border-radius.

	
@include border-radius(50%);
	

box-sizing()

The box-sizing() mixin is used to add all prefixes for the box-sizing.

	
@include box-sizing(border-box);
	

transition()

The transition() mixin is used to add all prefixes for the transition.

	
@include transition(height 300ms ease-in-out);
	

transform()

The transform() mixin is used to add all prefixes for the transform.

	
@include transform(rotate(7deg));
	

animation()

The animation() mixin is used to add all prefixes for the animation.

	
@include animation(myMove 5s infinite);
	

keyframes()

The keyframes can be used to create a specific animation. The mixin adds all prefixes. Between the round brackets "()" you set the name, between the curly brackets "{}" you set what needs to be done.

	
@include keyframes(myMove) {
  0%, 50%, 100% {
    @include transform(scale(1) translateZ(0));
  }

  25%, 75% {
    @include transform(scale(.98) translateZ(0));
  }
}
	

border-top-left-radius

The border-top-left-radius() mixin is used to add all prefixes to the border radius.

	
@include border-top-left-radius(10px);
	

border-top-right-radius

The border-top-right-radius() mixin is used to add all prefixes to the border radius.

	
@include border-top-right-radius(10px);
	

border-radius-top

The border-radius-top() mixin is used to add all prefixes to the top border radius. This mixing includes both border-top-right-radius() and border-top-left-radius()

	
@include border-radius-top(10px);
	

border-bottom-left-radius

The border-bottom-left-radius() mixin is used to add all prefixes to the border radius.

	
@include border-bottom-left-radius(10px);
	

border-bottom-right-radius

The border-bottom-right-radius() mixin is used to add all prefixes to the border radius.

	
@include border-bottom-right-radius(10px);
	

border-radius-bottom

The border-radius-bottom() mixin is used to add all prefixes to the bottom border radius. This mixing includes both border-bottom-right-radius() and border-bottom-left-radius().

		
@include border-radius-bottom(10px);
		
	

square

The square() mixin is used to give both width and height equal value.

		
@include square(12px);
		
	

range-thumb

The range-thumb() mixing is used to add all prefixes for the range thumb.

		
@include range-thumb() {
  // Styling goes here
}
		
	

range-track

The range-track() mixing is used to add all prefixes for the range track.

		
@include range-track() {
  // Styling goes here
}