标签: css-variables

我使用 CSS 变量，这样我就可以轻松地进行彻底的更改。我的变量之一是--gap: 15px，到目前为止我已经使用了大约 15 次。但是，我现在需要使用 的反转值--gap，即-15px。

失败：

1. calc(0 - var(--gap))
2. calc(var(--gap) * -1)

作品：

3. calc(var(--gap) - calc(var(--gap) * 2))

问题：

• 第一次尝试显然是最有说服力的，但为什么不起作用呢？

• 有没有比第三种方法更雄辩的方法来实现这一目标？

对于以下每个h1和h2元素，下面的 CSSfont-family以两种替代方式指定 a：(a) 作为传统字符串，例如，font-family: Tangerine,cursive;以及 (b) 作为先前定义的 CSS 变量，例如 ，font-family: var(--my-font-family-cursive);其中一种替代方式已被注释掉。

您还可以在此 CodePen Pen中看到我的代码。

当我使用传统的字符串规范（注释掉 CSS 变量规范）时，一切正常。每个标题都以其所需的字体呈现，如以下屏幕截图所示：

但是，当我注释字符串规范并取消注释 CSS 变量规范时，该font-family规范将被完全忽略，并且渲染默认为我的浏览器的用户代理规范serif，如以下屏幕截图所示：

例如，Chrome 和 Firefox 开发人员工具都认为font-family: var(--my-font-family-cursive);“属性值无效”。请参阅屏幕截图。

请注意，我使用相应的 CSS 变量语法来定义字体颜色--my-font-color，并且--my-font-color-cursive这些字体颜色被识别，从而产生红色h1和蓝色h2。

肯定是我忽略了一些愚蠢的东西，但我无法弄清楚为什么我的 CSS 变量公式被拒绝。

这只是“CSS 文献”中的一个示例，它似乎准确地支持了我正在做的事情：CSS Variables \xe2\x80\x94 How To Use CSS Custom Properties\n。该来源给出了以下示例：

:root …

是否可以在 SVG 中使用 CSS 变量来操作元素的“属性样式”中的半径或位置等值？

例如，在下面的代码中，我添加了一个 CSS 颜色变量 ---dark-text-clr和一个半径变量--radius。当我在填充中使用颜色 CSS 变量时，它渲染得很好 - 第一个圆，但使用半径变量不会渲染元素 - 第二个圆。

:root{
--dark-text-clr: blue;
--radius: 12;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
  <circle cx="9" cy="9" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=9 ></circle>
  <circle cx="36" cy="20" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r="var(--radius)" ></circle>
</svg>

我正在将 Storybook 与 React 项目一起使用，该项目也使用样式组件。其中许多样式定义访问在目录根目录的文件:root中定义的 CSS 变量值。以这种方式定义的所有 CSS 变量都只是颜色的占位符。但是，当组件在 Storybook 中渲染时，CSS 变量的值不会被访问，因此这些颜色永远不会渲染/显示。index.csssrc

有没有办法通过插件或配置来使我在index.css文件中定义的 CSS 变量在 Storybook 中渲染时可供组件访问？

我有这个组件，可以根据组件收到的道具颜色以不同的颜色显示。

const Card = ({color}) => {
  return (
    <p style={{color}}>Some Text</p>
  )
}

我有这些全局 css 变量：

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

有没有办法将此 css 变量作为 prop 传递给“Card”组件？就像这样：

import variableStyles from '../../styles/globalVariables.css'

const App = () => {
  return(
    <Card color={variableStyles['--text-clr']} />
  )
}

我不currentColor经常使用,但是当我这样做时,它非常有用.

所以我对CSS变量的到来感到有些兴奋.

我们来一个红绿灯.

NB请相信我,日本的红绿灯变成琥珀色到蓝色.我知道这很难相信.我知道蓝灯看起来很绿.但它不是,它是蓝色的.

div {
float: left;
width: 200px;
}

div div {
float: none;
}

.top {
color: rgb(255,0,0);
}

.middle {
color: rgb(255,227,0);
}

.bottom {
color: rgb(63,255,63);
}

.jp .bottom {
color: rgb(0,255,191);
}

.light {
text-align: center;
}

.light::before {
content: '';
display: block;
margin: 6px auto 0;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: currentColor;
}

<div class="uk">
<h2>UK Traffic Lights</h2>
<div class="top light">Red</div>
<div …

请帮我找出为什么 CSS 变量中的算术运算会破坏代码。

我从一个带有一个规则的简单 CSS 文件开始：

html {
  font: 16px/32px Arial;
}

在浏览器中，它是这样写的：字体大小为 16px，行高为 32px，字体本身为 Arial。

然后我添加了变量：

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

它也有效；认为行高是 16px，因为我让它等于字体大小。

但是当我乘以第二个值时，字体声明停止工作：

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font: var(--default-font-size)/var(--default-line-height) Arial;  /* not working! */
}

所有属性font-size、line-height和font-family都设置为浏览器默认值。

如果我将font速记属性拆分为三个不同的速记属性，则代码再次正常工作：

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font-size: var(--default-font-size);
  line-height: var(--default-line-height);
  font-family: Arial;
}

前面的代码示例有什么问题，有没有办法让它在不拆分成普通属性的情况下工作？

一个快速的问题,答案可能是"不",但我是CSS变量的新手,所以我不确定.

如果我想定义颜色然后能够为其添加alpha通道,那么CSS变量的唯一选择是将其定义为RGB通道的3个数字:

--color: 12 12 12

以后再用它rgb或者rgba？

color: rgb(var(--color));

background: rgba(var(--color), .5);

实际上没有办法定义实际颜色,后来只使用CSS变量为它添加alpha？可能我最好的选择是定义2个变量:

--color-rgb 和 --color: rgb(var(--color-rgb))

我无法让全局 css 变量按照 ionic stencil docs中的描述工作。

我在 'src/global/' 中创建了一个 'variables.css' 文件，然后将“globalStyle: 'src/global/variables.css'”放入“stencil.config.ts”文件中。

然后我在 variables.css 中创建了一组 css 变量，并尝试在我组件的 css 文件中使用它们；但是，使用默认值是因为它无法加载全局变量。

// stencil.config.ts
import { Config } from '@stencil/core';

export const config: Config = {
    namespace: 'mycomponent',
    outputTargets:[
        {
            type: 'dist'
        },
        {
            type: 'www',
            serviceWorker: null
        }
    ],
    globalStyle: 'src/global/variables.css'
}


// src/global/variables.css
:root {
    --qa-primary-color: #2169e7;
    --qa-secondary-color: #fcd92b;
    --qa-dark-color: #0000;
    --qa-light-color: #ffff;
    --qa-font-family: Arial, Helvetica, sans-serif;
    --qa-font-size: 12px;
}


// src/components/my-component.css
.main {
    background: var(--qa-dark-color, yellow);
}
.first { …

我想让我的标题背景颜色透明。我的 HTML 如下：

帐户.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
        <ion-title>Account</ion-title>
    </ion-toolbar>
</ion-header>

账户.page.scss

ion-header {
    --ion-toolbar-background-color: rgba(0, 0, 0, 0);
}

这使得 bg 颜色为白色，而不是透明。我还尝试background: transparent通过 Chrome Inspector 对每个元素进行设置。但我只是得到white.

任何帮助如何实现这一目标？