SASS

Mixin - Example 2

by Ben Clayton

HTML

<div class="item">
  Home
</div>
<div class="item2">
  History
</div>

<br/>Mixins can save repetition.
( to see errors use https://www.sassmeister.com/ )

SCSS

$rotate-origin: 0% 0%;
@mixin debug {
  border: 1px solid red;
}

@mixin rotate ($angle) {
  $angle : $angle + 0deg;
  transform: rotate($angle); // W3C
  -webkit-transform: rotate($angle); // Safari & Chrome
  -moz-transform: rotate($angle); // Firefox 
  -ms-transform: rotate($angle); // Internet Explorer
  -o-transform: rotate($angle); // Opera
  transform-origin: $rotate-origin; // W3C
  -webkit-transform-origin: $rotate-origin; // Safari & Chrome
  -moz-transform-origin: $rotate-origin; // Firefox 
  -ms-transform-origin: $rotate-origin; // Internet Explorer
  -o-transform-origin: $rotate-origin; // Opera
}

div {
  @include debug();
  margin: 70px;
  width: 300px;
}

.item {
  @include rotate(10);
}

.item2 {
  @include rotate(-10);
}