Почему скобки не компилируются после # {$ var} в SASS?

У меня в SASS есть @mixin:

@mixin complexTransform($axis, $perspective, $degrees, $axis2, $px) {

    -webkit-transform: 
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    -moz-transform: 
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    -o-transform: 
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    -ms-transform:
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    transform:
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );
}

Все компилируется хорошо, за исключением скобок после поворота # {$ axis} и перемещения # {$ axis}. Вот как выглядит скомпилированный CSS:

  -webkit-transform: perspective(600px) rotateX45deg translateY75px;
  -moz-transform: perspective(600px) rotateX45deg translateY75px;
  -o-transform: perspective(600px) rotateX45deg translateY75px;
  -ms-transform: perspective(600px) rotateX45deg translateY75px;
  transform: perspective(600px) rotateX45deg translateY75px;

Что я делаю не так? Или это совершенно неправильный способ сделать это?

Заранее спасибо!

ЭИДТ: Да ладно! Нашел решение ... это может быть немного "взломано", но, по крайней мере, оно работает. Я публикую его здесь на случай, если кто-то еще столкнется с той же проблемой.

Вот улучшенный рабочий миксин:

@mixin complexTransform($axis, $perspective, $degrees, $axis2, $px) {

    -webkit-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    -moz-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    -o-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    -ms-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };
}

css sass mixins parentheses
person Martin Velchevski    schedule 16.08.2013    source источник
comment
Если вы отвечаете на свой вопрос, опубликуйте ответ. Если вы отредактируете свой вопрос так, чтобы он содержал ответ, просто создается впечатление, что на него нет ответа.   -  person cimmanon    schedule 16.08.2013
comment
Спасибо @cimmanon! Пытался сделать это - не могу отвечать на свои вопросы около 6 часов. Я здесь новенький :)   -  person Martin Velchevski    schedule 16.08.2013

Ответы (1)


arrow_upward
2
arrow_downward

С небольшими изменениями я считаю, что этот миксин лучше соответствует моим требованиям:

 @mixin keyframeBuilder($animationName, $f, $startParams, $stopParams) {
        @-webkit-keyframes $animationName {
            from { -webkit-transform: $f+'('#{$startParams}')' }
            to   { -webkit-transform: $f+'('#{$stopParams}')' }
        }
        @-moz-keyframes $animationName {
            from { -moz-transform: $f+'('#{$startParams}')' }
        to   { -moz-transform: $f+'('#{$stopParams}')' }
        }
        ... (other vendor prefixes)
    }

По сути, когда я звоню

@include keyframeBuilder(spin, rotate, 0deg, 360deg);

Производит:

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(360deg); } }

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }

  to {
    -moz-transform: rotate(360deg); } }

@-o-keyframes spin {
  from {
    -o-transform: rotate(0deg); }

  to {
    -o-transform: rotate(360deg); } }

@keyframes spin {
  from {
    transform: rotate(0deg); }

  to {
    transform: rotate(360deg); } }

Надеюсь, это тоже кому-то поможет! :)

person dvdchr    schedule 29.11.2013