<h2>  mixin with  multiple arguments  </h2>

<div class="box">  
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum eaque vel quidem porro? Quas, ea soluta velit quidem officia possimus laboriosam, laborum blanditiis id dignissimos sint. Cumque praesentium cupiditate dolorum!
</div>

<div class="box2">  
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum eaque vel quidem porro? Quas, ea soluta velit quidem officia possimus laboriosam, laborum blanditiis id dignissimos sint. Cumque praesentium cupiditate dolorum!
</div>
@mixin bordered($color, $width) {
  border: $width solid $color;
}

@mixin transform($perfix) {
  -webkit-transform: $perfix;
  -ms-transform: $perfix;
  -moz-transform: $perfix;
  transform: $perfix;
}

.box {
   @include bordered(#fff, 4px);
    color:#fff;
    width: 200px;
    margin: 20px auto;
    text-align: justify;  
    font-family: sans-serif;
    font-size: 13px;line-height: 22px;
    background-color: #282824;
    padding: 10px;
}

.box2 { 
    @extend .box;
    @include bordered(#fff, 4px);
   @include transform(rotate(20deg));
   margin: 80px auto 0px !important;  

}

//  Additional

body{ height:100vh; background: rgb(7,148,252);
background: -moz-linear-gradient(-56deg, rgba(7,148,252,1) 0%, rgba(30,236,43,1) 100%);
background: -webkit-linear-gradient(-56deg, rgba(7,148,252,1) 0%, rgba(30,236,43,1) 100%);
background: linear-gradient(-56deg, rgba(7,148,252,1) 0%, rgba(30,236,43,1) 100%);}
  
  



h2{text-align: center; color:#fff; text-transform: uppercase; margin-bottom: 30px;    font-family: sans-serif;}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.