不透明度

Question

我嘗試讓我對除魔覆蓋稍微可控的，所以我想知道如果我可以做一些像SASS變量我添加opactiy壽，它不再做狗屎了。也離開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; 
}