CODEWITHSUNDEEP
csssass
Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

Can possible transform translateXY mixin function in sass

Hello i am using mixin fuction for translateX and translateY and create only one function for both value X and Y that is possible or not please help Thanks in Adavance.

Example-1 is possible because only one value pass but another example is possilbe or not any other idea for pass two value at a time in only one function in SASS ?

Example-1 

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

Example-2

@mixin translateXY($value1, $value2) {
    -webkit-transform: translateXY($value1, $value2);
    -moz-transform: translateXY($value1, $value2);
    -ms-transform: translateXY($value1, $value2);
    transform: translateXY($value1, $value2);
}

Upvotes: 1

Views: 175

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

Use sass as below:

Set in @include the params of translate:@include translateXY(30%,50%);

And in @mixin use translate and not translateXY

See fiddle

@mixin translateXY($value1, $value2) {
  .try{
    -webkit-transform: translate($value1, $value2);
    -moz-transform: translate($value1, $value2);
    -ms-transform: translate($value1, $value2);
    transform: translate($value1, $value2);
    }
}

@include translateXY(30%,50%);

Upvotes: 1

Related Questions