CSS 变量和 Angular 5

Question

我正在尝试在我的 Angular 应用程序中使用 css 变量，在子组件中，它只是不工作。在浏览器的元素工具（我使用的是 Chrome 最新版本）中， var() 不执行任何操作。示例：

css 文件:

:root {
  --width: 43.75%;
}

#content {
  display: grid;
  grid-template-columns: repeat(2, var(--width));
  grid-auto-rows: 90%;
  grid-gap: 3px;
  align-content: center;
  justify-content: center;
  border: 2px solid black;
  width: 400px;
  height: 250px;
  margin: 0 auto;
}

这就是它在浏览器中的显示方式：

CSS 变量是否可以与 Angulat 一起使用？谢谢

Answer 1

CSS 变量不依赖于 Angular，它们依赖于您的浏览器。您需要有一个最新的浏览器才能使用它们。 CanIUse 可以帮助您。

由于您使用的是 Angular，因此您可以使用 .scss 个文件，或 .less 个文件，用于 SASS and LESS .他们都处理变量，还有很多很多。

如果您使用的是 CLI，只需重命名您的文件，并在您的组件装饰器中重命名对这些文件的引用。

您也可以转到 .angular-cli.json 并将 styleExts 的值更改为您选择的值。

Answer 2

您的根选择器可能还具有 angular 组件 ID 的属性。

试试这个

::ng-deep :root {
  --width: 43.75%;
}

Answer 3

我知道这是旧的，但比 ::ng-deep 更好的解决方案是改用 :host。这将避免以后在弃用 ::ng-deep 时出现问题。

:host {
  --width: 43.75%;
}

CSS 变量和 Angular 5

CSS Variables and Angular 5

javascript

css

css-variables

angular