文章/答案/技术大牛

发布

社区首页 >问答首页 >SASS:将RGBa转换回十六进制？

问SASS:将RGBa转换回十六进制？
EN

Stack Overflow用户

提问于 2018-08-14 10:09:10

回答 3查看 1.6K关注 0票数 1

我知道SCSS可以将十六进制转换为RGBa，但有没有相反的选择？

我的情况是这样的:我得到了一个不允许更改的调色板。这包括纯色强调色：

$color-accent: #039B15;

我被要求使用这个作为浅背景色，80%的不透明度。这很简单，我可以直接使用rgba()

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

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

有没有办法用SASS把$color-accent-bg转换回十六进制？

Ps:我试过使用lighten()，但似乎只能达到66%的亮度。

css

sass

Stack Overflow用户

发布于 2021-03-15 00:30:24

将RGBa转换为十六进制(透明。无背景，8位彩色)。

测试解决方案我用scss写了这段代码，然后转换成了sass。

在您的Scss中放入：

// 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));
}

OutPut

终端：

#C0535390

css构建文件：

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

在您的sass文件中放入：

@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

  @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, ".")



  $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, ".")
  @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) 



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

  $index: str-index($alphaStr, ".")
  
  @if $index == null 
    $alphaStr: $alphaStr+'.0' 
    $index: str-index($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)) 

  @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 'peter =='+$result

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

票数 0

查看全部 3 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51832785

复制

相似问题

问SASS:将RGBa转换回十六进制？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SASS:将RGBa转换回十六进制？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SASS:将RGBa转换回十六进制？
EN