Taking Advantage Of Bootstrap Mixins

Recently i took care of some css bug. Some transformation effect didnt looked good at IE.

 After examination of  less file i saw following code:

.parnetDetailsButton {
  float: left;  
  margin-top: 50px;  
  margin-left: -14px;  
  font-size: 15px;
  -webkit-transform-origin-x: 23px; 
  -webkit-transform-origin-y: 13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

Quick look on this code shows that the reason the effect not acting correctly in IE is - missing microsoft prefix on transform and transform-origin  rules. It should be prefixed with "ms"

-ms-transform-origin: 23px 13px;

That can be quickly fixed by adding proper prefix.
But since we already using bootstrap i decided to take advantage of some of bootstrap less mixins:
.rotate and .transform-origin
mixins are like functions in the less language - they can get parameters and give output.
for using mixins we need the utils of bootstrap to be imported in our less file.

@import "../bower_components/bootstrap/less/mixins/vendor-prefixes";

now this code can be written in more accurate way:

.parnetDetailsButton {
  float: left;

  margin-top: 50px;

  margin-left: -14px;

  font-size: 15px;  

  .rotate(90deg);

  .transform-origin(23px 13px);

}

after less compiled it converted to following css:

.parnetDetailsButton {
  float: left;   

  margin-top: 50px; 

 margin-left: -14px;    

  font-size: 15px;  

 -webkit-transform: rotate(90deg);    

  -ms-transform: rotate(90deg);      

   -o-transform: rotate(90deg);        

     transform: rotate(90deg);  

-webkit-transform-origin: 23px 13px;   

  -moz-transform-origin: 23px 13px;    

   -ms-transform-origin: 23px 13px;     

    transform-origin: 23px 13px;

}