【问题标题】:Can possible transform translateXY mixin function in sass可以在 sass 中转换 translateXY 混合函数
【发布时间】:2018-11-13 21:02:53
【问题描述】:

您好,我正在为 translateX 和 translateY 使用 mixin 函数,并且只为值 X 和 Y 创建一个可能或不可能的函数,请在 Adavance 中提供帮助。

Example-1 是可能的,因为只有一个值通过,但另一个例子是可能的,或者没有任何其他想法在 SASS 中的一个函数中一次传递两个值?

示例 1

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

示例 2

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

【问题讨论】:

  • 有可能!! mixin 就像任何语言的函数,你可以传递你想要多少参数,你可以像这样为它设置一个起始值@mixin translateXY($value1, $value2: 30) 如果你不传递第二个值,它将假定默认为 30

标签: css sass


【解决方案1】:

使用 sass 如下:

设置@includetranslate:@include translateXY(30%,50%);的参数

@mixin 使用translate 而不是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%);

【讨论】:

  • 这是不可能的
  • 是的,这是有效的,但这只是一个特定的类权利
  • 是的..如果你想要更多的课程添加到@mixim
  • 乐于助人:)
猜你喜欢
  • 2017-11-16
  • 2016-08-21
  • 2020-10-11
  • 2016-09-17
  • 2018-03-19
  • 2012-12-19
  • 1970-01-01
  • 2012-11-28
  • 1970-01-01
相关资源
最近更新 更多