标签: css-variables

我正在设计一个新的博客模板.我想通过更改变量的值来同时更改整个模板颜色,因此我使用了以下这些行:

:root {
  --bg-color: #fff;
  --url-color : #000;
  --main-color : #2daeeb;
  --main-hover-color : #2ca1de;
  --alt-color : #ff6347;
}

但不幸的是,它在Edge浏览器中不起作用,即使我使用了前缀:

-webkit-

我已经能够编辑CSS变量document.documentElement.style.setProperty("--text-color", "#333")但是,我无法使用jQuery重现这一点,.css()原型似乎只适用于已知的CSS属性.

以下是上述CSS变量的示例CSS.

:root {
  --text-color: #888;
}

div {
  color: var(--text-color);
}

在我在这里完全被火焰击落之前，除了我的做法如下之外，我想不出任何其他方式来措辞或表达这个问题......

我想在 Bootstrap 4 中为 1366px 和 1920px 设置 2 个额外的断点，因为 Bootstrap 的 xl 非常有限，只有 1200px。

我的页面引用了 bootstrap.min.css 和 bootstrap.bundle.min.js。

我添加了 --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; 紧接在 --breakpoint-xl:1200px 之后；在 boostrap.min.css 文件中，我创建了两列，如下所示：

<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 1 Content
</div>
<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 2 Content
</div>

当我在浏览器中以 1366 和 1920 预览此内容时，列没有调整为 50%/50%。

我是否误解了如何做到这一点？谢谢。新泽西州

我正在尝试使用 Webpack+PostCSS。这是 CSS 配置：

const cssRule = {
    test: /\.css$/,
    use: [
        'style-loader',
        {loader: 'css-loader'},
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    postcssImport({
                        paths: ['./assets']
                    }),
                    postcssPresetEnv({
                        stage: 0,
                        browsers: 'Firefox ESR',
                        importFrom: ['./assets/shared/colors.css']
                    }),
                    postcssEasingGradients()
                ]
            }
        }
    ]
}

assets/shared/colors.css 文件如下所示：

:root {
    --color-primary-0: #051845;
    --color-primary-1: #05112B;
    --color-primary-2: #041335;
    --color-primary-3: #092568;
    --color-primary-4: #0A328D;

    --color-primary-3-a20: #09256820;

    --color-secondary-1-0: #200446;
    --color-secondary-1-1: #16052C;
    --color-secondary-1-2: #190336;
    --color-secondary-1-3: #310769;
    --color-secondary-1-4: #42098F;

    --color-secondary-2-0: #004628;
    --color-secondary-2-1: #012C1A;
    --color-secondary-2-2: #00361F;
    --color-secondary-2-3: #006A3D;
    --color-secondary-2-4: #009153;

    --light-gray: #EEE;
    --dark-gray: …

:root {
    --foo: #fff;
    --bar: --foo;
}

一个用例是 - 我允许设置原色并在其他变量中重复使用。

我似乎无法找到任何关于此的信息，我开始认为这是不可能的。

我正在使用 Angular 12，并且正在创建动态主题更改。

当我的应用程序根据所选主题加载时，我设置所有颜色变量，如下所示：

document.documentElement.style.setProperty(colorKey, colorValue);

之后，所有颜色都设置为文档元素而不是根元素。

正如您所看到的，我还有一些根元素的变量。但这些变量在 css 文件中定义为：

:root {
    --primary: #005d7a;
    --primary-50: #edf1f2;
    --primary-400: #0094bd;
    --primary-700: #027498;
    --secondary-50: #ffebb7;
    --silver: #3a3a3a;
    --silver-light: #e4e7ea;
    --silver-light-border: #dad7d6;
    --main-background: white;
    --main-page-background: #e4e7ea;
    --main-text-color: #3a3a3a;
    --disabled-color: #ccc;
}

效果很好。

我的问题是：

1. 如何将从 ts 文件定义的其他变量设置到根目录而不是文档元素？
2. 根据帖子根选择器比文档强。那么（如上图所示）我的根primary-50颜色如何被文档primary-50覆盖？

我想在 Flexbox 中使用 CSS 自定义属性来定义我的flex-basis，它可以是可变的。以下代码无法正常工作。该变量计算得很好，但flex-basis没有应用。flex是否可以像这样在属性中使用自定义属性？

.row-flex {
    --flex-basis: 30%;

    display: flex;
}

.row-flex >:first-child {
     flex-basis: 0 0 var(--flex-basis);
}

我想创建一个黑暗模式，我想知道是否可以使用这种逻辑来实现。也许用一些 javascript 或什么的？或者这只是愚蠢的:)？所以在这种情况下，我 ofc 有一些 js 切换按钮，可以为 body 提供 .night 类，从而将“light”更改为“dark”

 :root{

    --light: #ffffff;

}


.night :root{

    --light: #000000;

}

我对文本阴影属性有疑问。

这有效：

text-shadow: 1px 1px 0 var(--primary-color);

这不起作用：

text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);

有谁知道问题是什么？

谢谢你！