Question

我试图让我的叠加器对于杀手更加可控，所以我想知道我是否可以做类似的事情：

.item-caption {
    background: rgba($red, $green, $blue, 0.$slider_text_background_opacity);
    text-align: center;
    color: #fff;
}

第一个红绿色和蓝色都完美无缺，当我添加opactiy tho时，它不再做什么了。也离开0.并把整个变量放在那里似乎没有正常工作..任何建议？

Answer 1

所以你的上一个变量是错误的。你不能像

那样把价值放在一起

0.$slider_text_background_opacity

但如果你做了类似

的事情

$slider_text_background_opacity: 0.5

然后将它放在rgba函数中，如下所示：

background: rgba($red, $green, $blue, $slider_text_background_opacity);

它有效。

工作小提琴：https://jsfiddle.net/swchkt62/

Answer 2

所以，你不知道用户不透明度的价值是多少。它可能是0.2，20%，20，"lol"等。

SassMeister演示：link。

要解决此问题，您可以使用以下代码：

// Removes units
//  10px ->  10
//  20%  ->  20
// .2    -> .2
//  lol  ->  1
@function strip-units($value: 1) {
  @if (type-of($value) == 'number') {
    @return $value / ($value * 0 + 1);
  } @else {
    // Throw an error
    // @error "Error from function strip-units: parameter $value must be a number!";
    // or return default value
    @return 1;
  }
}

// Returns opacity in decimal format
//  10%  -> .1
// .1    -> .1
// -1    ->  0
//  101  ->  1
@function get-opacity($opacity: 1) {
  $opacity: strip-units($opacity);

  @if ($opacity < 0) {
    $opacity: 0;
  }

  @if ($opacity >= 100) {
    $opacity: 1;
  }

  @if (($opacity > 1) and ($opacity < 100)) {
    $opacity: $opacity / 100;
  }

  @return $opacity;
}

不透明度的SASS变量

2 个答案: