css3 - How do I keep parentheses of SASS / SCSS mixin? -

I am trying to create a SCSS mix for a CSS Transformation and I want to pass in logic. However, when a variable is used the parentheses of my position value are removed.

It should be compiled once:

  conversion: translateX (-100px);  

My Mix:

  @MixinFedUp ($ direction, $ value) {conversion: translation # {$ direction} ($ value); }  

when called:

  Include @edepup (X, 100px);  

which unfortunately outputs:

  conversion: translateX 100px;  

So the cells around the value of 100px are missing, and so this will not work.

Any ideas how can I keep brackets?

I think that you unquote to help keep it with () ... something should work like this:

  @MixinFedUp ($ direction, $ value) {conversion: conversion Do # $ $ direction} unquote ("(" # {$ value} ")"); } .foo {@include fadeup (X, 100px); } .bar {@ Fadeup (Y, 100px) included; }  

Compiled for:

  .foo {conversion: translateX (100px); } Bar {Transformation: Translator Y (100px); }