Question

我知道SCSS可以将Hex转换为RGBa，但是有相反的选择吗？

我的情况是这样的：给我一个不允许更改的调色板。这包括纯色：

$color-accent: #039B15;

有人要求我将其用作浅色背景色，不透明度为80％。很简单，我可以只使用rgba()：

$color-accent-bg: rgba($color-accent, .2);

但是，在某些情况下，我需要嵌套具有相同不透明背景色的元素-因为颜色是不透明的，嵌套时它们会变暗。

是否可以通过SASS将$color-accent-bg转换为十六进制？

Ps：尝试使用lighten()，但这似乎只能在66％的光线下工作。

Answer 1

您可以尝试#039B1580，但我认为此方法不适用于所有浏览器

Answer 2

IMO简单的rgba($color-accent-bg, 1)可以解决问题-返回与$color-accent相同的颜色。

否则，您可以使用#ie_hex_str($color)。它将颜色转换为#AARRGGBB格式的十六进制字符串。

将颜色转换为IE过滤器可以理解的格式。

示例：
...
   ie-hex-str（rgba（0，255，0，0.5））=>＃8000FF00

由于它返回字符串，因此您可以像以下代码片段的最后一行一样删除AA部分：

$color-accent: #039B15;
$color-accent-bg: rgba($color-accent, .2);
$ie-hex: ie_hex_str($color-accent-bg);    //#33039B15
$back-to-color-accent: unquote('#' + str_slice($ie-hex, 4));    //#039B15

Answer 3

将 RGBa 转换为十六进制（透明。无背景，8 位颜色）。

经过测试的解决方案我已经在 scss 中编写了这段代码，然后转换为 sass

在您的 Scss 中输入：

services.TryAddSingleton<ISystemClock, SystemClock>();

使用

// convert string to number
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1; 
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers, $character);  
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers, $character) / $digits;
      }
    }
  }

  @return if($minus, -$result, $result);;
}


@function decimal-round ($number, $digits: 0, $mode: round) {
  $n: 1;
  // $number must be a number
  @if type-of($number) != number {
      @warn '#{ $number } is not a number.';
      @return $number;
  }
  // $digits must be a unitless number
  @if type-of($digits) != number {
      @warn '#{ $digits } is not a number.';
      @return $number;
  } @else if not unitless($digits) {
      @warn '#{ $digits } has a unit.';
      @return $number;
  }
  @if $digits > 0 {
      @for $i from 1 through $digits {
          $n: $n * 10;
      }
  }
  @if $mode == round {
      @return round($number * $n) / $n;
  } @else if $mode == ceil {
      @return ceil($number * $n) / $n;
  } @else if $mode == floor {
      @return floor($number * $n) / $n;
  } @else {
      @warn '#{ $mode } is undefined keyword.';
      @return $number;
  }
}


@function rgba-to-hex($rgba){
  $colorCode: ( '0','1', '2','3','4','5','6','7','8','9','A','B','C','D','E', 'F');
  
  // 255 / 100 = 2.55
  // 10 / 16 = 0.625

  $alpha: alpha($rgba);

  // ============================================= RED ================================
  $redStr: ''+(red($rgba) / 16);

  $index: str-index($redStr, ".");
  // add decimal number incase it does not have and update index
  @if $index == null { $redStr: $redStr+'.0'; $index: str-index($redStr, ".");};

  // @debug $redStr '========================================================';

  $redInteger :  to-number(str-slice($redStr, 0, $index - 1));
  $redDecimal: decimal-round(to-number(str-slice($redStr, $index + 1,  $index + 1)) / 0.625);


  // ============================================= GREEN ============================
  $greenStr: ''+(green($rgba) / 16);


  $index: str-index($greenStr, ".");
  // add decimal number incase it does not have and
  @if $index == null { $greenStr: $greenStr+'.0'; $index: str-index($greenStr, ".");};

  $greenInteger :  to-number(str-slice($greenStr, 0, $index - 1));
  $greenDecimal: decimal-round(to-number(str-slice($greenStr, $index + 1,  $index + 1)) / 0.625);



  // ============================================= BLUE ============================  
  $blueStr: ''+(blue($rgba) / 16);

  $index: str-index($blueStr, ".");
  // add decimal number incase it does not have and
  @if $index == null { $blueStr: $blueStr+'.0'; $index: str-index($blueStr, ".");};

  $blueInteger :  to-number(str-slice($blueStr, 0, $index - 1));
  $blueDecimal: decimal-round(to-number(str-slice($blueStr, $index + 1,  $index + 1)) / 0.625) ;

  
  // if interger is 16 sent decimal should be 0

  //@debug 'blue: '+ $blueStr +'  interter: '+ $blueInteger +' decimal: '+ $blueDecimal;
  // $blue:  blue($rgba) / 2.55;

  // ============================================= ALPHA ============================  
  $alphaStr: ''+ decimal-round((($alpha*100)*2.55) /16) ;

  $index: str-index($alphaStr, ".");
  
  @if $index == null { $alphaStr: $alphaStr+'.0'; $index: str-index($alphaStr, ".");};

  //@debug 'alphaStr: '+ decimal-round(to-number($alphaStr))  ;

  $alphaInteger :  ''+to-number(str-slice($alphaStr, 0, $index - 1));

  $index: str-index($alphaInteger, ".");
  @if $index == null { $alphaInteger: $alphaInteger+'.0'; $index: str-index($alphaInteger, ".");};
  $alphaInteger :  to-number(str-slice($alphaStr, 0, $index - 1));

  $alphaDecimal: to-number(str-slice(''+to-number(str-slice($alphaStr, $index + 1, str-length($alphaStr))) / 0.625, 0, 2)) ;


  // @debug 'Integer: ==== '+$alphaInteger;
  // @debug 'Decimal: ==== '+$alphaDecimal;
  

  @return unquote("#"+nth($colorCode, $redInteger + 1)+nth($colorCode, $redDecimal + 1)+nth($colorCode, $greenInteger + 1)+nth($colorCode, $greenDecimal + 1) +nth($colorCode, $blueInteger + 1)+nth($colorCode, $blueDecimal + 1)+nth($colorCode, $alphaInteger + 1)+nth($colorCode, $alphaDecimal + 1));
};

输出

终端：

$result : rgba-to-hex( rgba(192, 84, 84, 0.582));
@debug $result;

.my-class{
  background-color: rgba-to-hex( rgba(192, 84, 84, 0.582));
}

css 构建文件：

#C0535390

在您的 sass 文件中输入：

.my-class{
  background-color: #C0535390;
}

我没有测试 sass 文件，我只是删除了分号“{”和“}”。

SASS：将RGBa转换回十六进制？

3 个答案: