SCSS / SASS

Question

我正在设计一个电子应用，所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量：

:root {
  --color: #f0f0f0;
}

我想在main.css中使用此颜色，但应用了一些不透明度：

#element {
  background: (somehow use var(--color) at some opacity);
}

我该怎么做呢？我没有使用任何preprocesser，只有CSS。我更喜欢全CSS答案，但我会接受JavaScript / jQuery。

我无法使用opacity，因为我使用的背景图片不应该是透明的。

Answer 1

您无法获取现有的颜色值并对其应用Alpha通道。也就是说，您无法获取现有的十六进制值，例如#f0f0f0，为其指定一个alpha组件，并将结果值与另一个属性一起使用。

但是，自定义属性允许您将十六进制值转换为RGB三元组以与rgba()一起使用，将该值存储在自定义属性中（包括逗号！），使用var()替换该值使用您想要的Alpha值进入rgba()函数，它就可以正常工作：

＆＃13;

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.5);
}

＆＃13;

<p id="element">If you can see this, your browser supports custom properties.</p>

＆＃13;

这看起来好得令人难以置信。¹它是如何运作的？

神奇之处在于自定义属性的值在替换属性值中的var()引用时将替换为，之前该属性＆＃ 39;计算s值。这意味着就自定义属性而言，示例中--color的值在所有中都不是颜色值，直到 var(--color)表达式出现在预期的某个位置颜色值（仅在该上下文中）。来自section 2.1的css-variables规范：

自定义属性的允许语法非常宽松。＆lt; declaration-value＆gt;生产匹配一个或多个令牌的任何序列，只要该序列不包含＆lt; bad-string-token＆gt;，＆lt; bad-url-token＆gt;，unmatched＆lt;） - token＆gt;，＆lt;] - token＆gt;或者＆lt;} - 令牌＆gt;或顶级＆lt;分号令牌＆gt;令牌或＆lt; delim-token＆gt;值为＆＃34;！＆＃34;。
的标记


例如，以下是有效的自定义属性：

--foo: if(x > 5) this.width = 10;

虽然这个值作为变量显然是无用的，因为它在任何普通属性中都是无效的，但它可能会被JavaScript读取并作用。

section 3：


如果属性包含一个或多个var（）函数，并且这些函数在语法上有效，则必须假定整个属性的语法在分析时有效。在替换var（）函数之后，它仅在计算值时间进行语法检查。

这意味着，在计算声明之前，您在上面看到的240, 240, 240值会被直接替换为rgba()函数。所以这个：

#element { background-color: rgba(var(--color), 0.5); }

起初看起来并不是有效的CSS，因为rgba()期望不少于四个以逗号分隔的数字值，因此：

#element { background-color: rgba(240, 240, 240, 0.5); }

当然，这是完全有效的CSS。

更进一步，您可以将alpha组件存储在自己的自定义属性中：

:root { --color: 240, 240, 240; --alpha: 0.5; }

并用相同的结果替换它：

#element { background-color: rgba(var(--color), var(--alpha)); }

这允许您拥有可以即时交换的不同Alpha值。

¹ _{好吧，如果您在不支持自定义属性的浏览器中运行代码段，那就是}

Answer 2

我知道OP没有使用预处理器，但如果以下信息是答案的一部分，我会得到帮助（我还不能评论，否则我会评论@BoltClock答案。

如果您正在使用，例如scss，上面的答案将失败，因为scss尝试使用scss特定的rgba（）/ hsla（）函数编译样式，这需要4个参数。但是，rgba（）/ hsla（）也是本机css函数，因此可以使用字符串插值来绕过scss函数。

示例（在sass 3.5.0 +中有效）：

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

请注意，字符串插值不适用于非CSS scss函数，例如lighten()，因为生成的代码不是函数CSS。它仍然是有效的scss，所以你不会在编译中收到任何错误。

Answer 3

这个确实可以用CSS 。它只是有点脏，你将不得不使用渐变。我编写了一个小片段作为示例，请注意，对于深色背景，您应该使用黑色不透明度，对于浅色 - 白色。：

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

Answer 4

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

使用0到1之间的任何内容替换不透明度

Answer 5

在CSS中你应该能够使用rgba值：

#element {
  background: rgba(240, 240, 240, 0.5);
}

或只设置不透明度：

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

Answer 6

您可以为每种颜色设置特定变量/值 - 原始颜色和具有不透明度的颜色：

＆＃13;

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}

＆＃13;

<div id="a1">asdf</div>
<div id="a2">asdf</div>

＆＃13;

如果你不能使用这个并且你可以使用javascript解决方案，你可以使用这个：

＆＃13;

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

＆＃13;

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

＆＃13;

Answer 7

我处于类似的情况，但是不幸的是，给定的解决方案对我不起作用，因为变量可以是rgb到hsl到hex甚至是颜色名称。
我现在通过将background-color和opacity应用于伪:after元素来解决了这个问题：

.container {
    position: relative;
}

.container:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

可能需要对样式进行一些更改，具体取决于应应用背景的元素。
同样，它可能无法在所有情况下都起作用，但是希望在某些情况下可以使用其他解决方案。

Answer 8

如果您使用明暗模式，我将使用此示例。我更喜欢将颜色和rgb颜色变量分配分开。所以我每个循环使用两个。我意识到这个解决方案不是干代码。如果要干燥代码，可以使用一个循环。

$colors-light: (
  white: #fff,
  black: #0c0d0e,
  orange: #f48024,
  green: #5eba7d,
  blue: #0077cc,
  red: #d1383d,
  red-100: #e2474c,
  red-200: red,
);

$colors-dark: (
  black: #fff,
  white: #2d2d2d,
  orange: #dd7118,
  green: #5eba7d,
  blue: #0077cc,
  red: #aa1c21,
  red-100: #c9292e,
  red-200: red,
);

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

@mixin generate_colors($colors) {
  // Colors
  @each $color, $value in $colors {
    @if str-slice(#{$value}, 1, 1) == "#" {
      --#{$color}: #{$value};
    } @else {
      --#{$color}: var(--#{$value});
    }
  }

  // RGB Colors
  @each $color, $value in $colors {
    @if str-slice(#{$value}, 1, 1) == "#" {
      --RGB_#{$color}: #{hexToRGB($value)};
    } @else {
      --RGB_#{$color}: var(--RGB_#{$value});
    }
  }
}

:root {
  @include generate_colors($colors-light);
}

[data-theme="dark"] {
  @include generate_colors($colors-dark);
}

干码

@mixin generate_colors($colors) {
  // Colors, RGB Colors
  @each $color, $value in $colors {
    @if str-slice(#{$value}, 1, 1) == "#" {
      --#{$color}: #{$value};
      --RGB_#{$color}: #{hexToRGB($value)};
    } @else {
      --#{$color}: var(--#{$value});
      --RGB_#{$color}: var(--RGB_#{$value});
    }
  }
}

css输出

:root {
  --white: #fff;
  --RGB_white: 255, 255, 255;
  --black: #0c0d0e;
  --RGB_black: 12, 13, 14;
  --orange: #f48024;
  --RGB_orange: 244, 128, 36;
  --green: #5eba7d;
  --RGB_green: 94, 186, 125;
  --blue: #0077cc;
  --RGB_blue: 0, 119, 204;
  --red: #d1383d;
  --RGB_red: 209, 56, 61;
  --red-100: #e2474c;
  --RGB_red-100: 226, 71, 76;
  --red-200: var(--red);
  --RGB_red-200: var(--RGB_red);
}

[data-theme="dark"] {
  --black: #fff;
  --RGB_black: 255, 255, 255;
  --white: #2d2d2d;
  --RGB_white: 45, 45, 45;
  --orange: #dd7118;
  --RGB_orange: 221, 113, 24;
  --green: #5eba7d;
  --RGB_green: 94, 186, 125;
  --blue: #0077cc;
  --RGB_blue: 0, 119, 204;
  --red: #aa1c21;
  --RGB_red: 170, 28, 33;
  --red-100: #c9292e;
  --RGB_red-100: 201, 41, 46;
  --red-200: var(--red);
  --RGB_red-200: var(--RGB_red);
}

body {
  background-color: var(--white);
}

.colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 50px 0 0 30px;
}

.box {
  width: 100px;
  height: 100px;
  margin-right: 5px;
}

.black {
  background-color: var(--black);
}

.white {
  background-color: var(--white);
}

.orange {
  background-color: var(--orange);
}

.green {
  background-color: var(--green);
}

.blue {
  background-color: var(--blue);
}

.red {
  background-color: var(--red);
}

.red-200 {
  background-color: var(--red-200);
}

.black-rgba {
  background-color: rgba(var(--RGB_black), 0.5);
}

.white-rgba {
  background-color: rgba(var(--RGB_white), 0.5);
}

.orange-rgba {
  background-color: rgba(var(--RGB_orange), 0.5);
}

.green-rgba {
  background-color: rgba(var(--RGB_green), 0.5);
}

.blue-rgba {
  background-color: rgba(var(--RGB_blue), 0.5);
}

.red-rgba {
  background-color: rgba(var(--RGB_red), 0.5);
}

.red-rgba-200 {
  background-color: rgba(var(--RGB_red-200), 0.5);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <input type="checkbox" id="dark-switch" name="theme" />
      <label for="dark-switch">Dark / Light</label>
    </div>

    <div class="color-box">
        <div class="colors">
          <div class="box red-200"></div>
          <div class="box black"></div>
          <div class="box white"></div>
          <div class="box orange"></div>
          <div class="box green"></div>
          <div class="box blue"></div>
          <div class="box red"></div>
        </div>
        <br>

        <h1>RGBA</h1>
        <div class="colors">
          <div class="box red-rgba-200"></div>
          <div class="box black-rgba"></div>
          <div class="box white-rgba"></div>
          <div class="box orange-rgba"></div>
          <div class="box green-rgba"></div>
          <div class="box blue-rgba"></div>
          <div class="box red-rgba"></div>
        </div>

    </div>

    <script>
      const dark_switch = document.getElementById("dark-switch");

      dark_switch.addEventListener("change", (e) => {
        e.target.checked
          ? document.documentElement.setAttribute("data-theme", "dark")
          : document.documentElement.setAttribute("data-theme", "light");
      });
    </script>
  </body>
</html>

Answer 9

您可以使用 linear-gradient 来修改颜色：

background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)

$(() => {
  const setOpacity = () => {
    $('#canvas').css('--opacity', $('#opacity-value').val())
  }
  const setColor = () => {
    $('#canvas').css('--color', $('#color-value').val());
  }
  $('#opacity-value').on('input', setOpacity);
  $('#color-value').on('input', setColor);
  setOpacity();
  setColor();
})

#canvas {
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  --hack: 10000%;
  background: linear-gradient( to bottom, var(--color) calc((var(--opacity) - 1) * var(--hack)), transparent calc(var(--opacity) * var(--hack)));
}

#container {
  background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  padding: 10px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="canvas"></div>
</div>
<hr/>
<input type="range" id="opacity-value" min="0" max="1" step="0.1" value="0.5" />
<input type="color" id="color-value" />

Answer 10

对于将rgba（）与常规css变量一起使用，请尝试以下操作：

在：root中声明颜色，但不要像其他答案一样使用rgb（）。只需输入值

:root{
  --color : 255,0,0;
  }

使用var（）作为其他答案使用--color变量

#some-element {
  color : rgba(var(--color),0.5);
}

Answer 11

SCSS / SASS

这就是我最初构想的方法：https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

修改

添加了另一种方法，如何使用它。

结果

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

用法：

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

Mixin和功能

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

希望这可以节省一些时间。

Answer 12

如果您喜欢像我这样的十六进制颜色，那么还有另一种解决方案。十六进制值是6位数字，之后是alpha值。 00是100％透明度99是大约75％，则它使用字母'a1-af'然后是'b1-bf'，以'ff'结尾，后者是100％不透明。

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}

如何将不透明度应用于CSS颜色变量？

12 个答案:

SCSS / SASS

结果

用法：

Mixin和功能