标签: css-variables

所以我一直在尝试在HSLA中使用CSS变量。我需要保持相同的颜色，但只需更改不透明度。

<div>
// content here
</div>

社会保障体系

:root {
  --color: 332, 61%, 78%;
}

div {
  background: hsla(var(--color), 0.5);
}

https://codepen.io/sammiepls/pen/zLpvXY

所以我想我可以将 hsl 颜色保留在那里，并通过使用变量来更改悬停时的不透明度或诸如此类的东西。如果我只使用纯 CSS，它就可以工作。但我使用的是 SCSS，它导致它失败，因为 SASS 有它自己的 HSL 函数，需要三个值；我得到的错误基本上是没有足够的参数。有人找到解决办法吗？我尝试在整个函数周围使用字符串插值 #{} 但它不起作用。

:root {
  --icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}

@font-face {
  font-family: 'iconfont';
  src: url(var(--icon-url)'.eot');
  src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}

找不到模块：错误：无法解析“Users/xxx/xxx”中的“./var(--icon-url”

我想为文本颜色创建一个变量，但取决于我设置的背景颜色。

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color: hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color: red; /* calculate white or black */
  --main-dark-text-color: red; /* calculate white or black */
  --main-light-text-color: red; /* calculate white or black */
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: …

我正在为自己开发一个新的入门主题。其中，我希望在整个主题中使用许多断点。我不想管理每个媒体查询的断点，而是想将 CSS 变量设置为断点像素值并调用媒体查询内的变量。下面是一个示例（理想情况下）这是如何工作的

:root {
  --medium: 1024px;
}

p {
  color: black;
}

@media screen and ( min-width: var(--medium) ) {
  p {
    color: red;
  }
}

<p>Text I want to be red in screens larger than 1024px.</p>

遗憾的是，这个逻辑在常规 CSS/CSS3 中不起作用。有谁熟悉创建一个单点的方法，我可以在不使用预处理器的情况下调整整个主题的媒体查询断点？提前致谢！

在我的项目中，我有一个 CSS 自定义变量，如下所示：

:root {
  --primary-color: #e04c4c;
  --secondary-color: #2c2c5e;
  --text-color: #d67900; 
}

在我的 LESS 文件中，我使用了 LESS 颜色函数来根据其主要和次要颜色来获取更多颜色。这是它的样子：

.component1 {
  background: darken(--primary-color, 10%);
}

.component2 {
  background: lighten(--secondary-color, 5%);
}

但是当我编译这个时，它给出了这样的错误？

// Undefined_methodError: 评估函数时出错darken: // Object # 没有方法 'toHSL'

在谷歌搜索时，我找到了SASS 的解决方案，但没有找到 LESS 的解决方案。

谁能告诉我对于这种特殊情况有任何可能的解决方法吗？

谢谢。

--my-custom-var如果存在mixin，我如何有条件地应用 mixin ？例如：

.test {
  @if var(--my-custom-var) {
     @include someExampleMixin()
  }

  @if var(--another-custom-var) {
     @include someExampleMixin()
  }
}

我不在乎它的价值--my-custom-var是什么，只是想检查它的存在。

我在想如何在不使用内联样式的情况下使用 css 变量。我想我可以用这个：

[data-color] {
    --color: attr(data-color color, green);
}
* {
    color: var(--color, blue);
}

<div data-color="red">hello</div>

似乎 attr 仅在伪选择器中起作用（并且可能仅在content:属性上），但MDN attr 页面说：

attr() CSS 函数用于检索所选元素的属性值并在样式表中使用它。它也可以用在伪元素上，在这种情况下，返回伪元素的原始元素上的属性值。

甚至还有演示，但它不能在 Linux 上的 Chrome 中运行，所以对我来说没有用。它甚至无法在 Linux 上的 Firefox 中运行。

有没有其他方法可以使用没有内联样式且无需编写动态 <style></style>和随机数的CSS变量？

我想知道是否可以仅在定义了 css 变量的情况下应用 CSS 规则。我已经看到可以定义默认值，例如：

background-color: var(--bgColor, red);

但我认为这不会在我的项目中起作用，因为我想要的是，当未定义变量来获取该行在 CSS 中不存在时它将具有的样式时。

我添加了一个代码笔，以便更容易理解我在说什么：

https://codepen.io/xmorell/pen/bGWLoaL

background-color: var(--bgColor, red);

.container {
  margin: 5px;
}
.content {
  padding: 5px;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background-color: var(--bgColor) !important;
}

我用来:root创建一些 CSS 变量。是否可以使用 JavaScript 而不是 CSS 创建它们？下面是一个简单的例子：

<div id="container"></div>

:root {
  --first-color: #000;
  --second-color: #666666;
}

#container {
  background-color: var(--second-color);
  width: 90px;
  height: 90px;
}

我有一个非常简单的CSS变量问题。我想交换两个CSS变量，基本上等同[a, b] = [b, a]于ES6中的CSS变量。这是一个简单的例子：

<p>White background</p>
<button>Black background</button>
<div>
  <p>Black background</p>
  <button>White background</button>
</div>

:root {
  --primary-color: #fff;
  --secondary-color: #000;
}

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

button {
  background-color: var(--secondary-color);
}

div {
  /* i'd like to do the following: */
  --primary-color: var(--secondary-color);
  --secondary-color: var(--primary-color);

  /* so here, `--primary-color` would be `--secondary-color` from `:root`
   * and any children have these colors swapped as well
   */
  background-color: var(--primary-color);
}

但是，这失败了，因为CSS var()是实时绑定。我在这里想念什么吗？还是这是规范当前的工作方式？