文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS变量和角5

问CSS变量和角5
EN

Stack Overflow用户

提问于 2018-01-23 08:00:21

回答 3查看 6.8K关注 0票数 9

我试图在我的角度应用程序中使用css varible，在一个子组件中，它只是不起作用。在浏览器的元素工具(我使用的是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一起工作吗？谢谢

javascript

css

angular

css-variables

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-01-23 08:24:19

您的根选择器也可能获得带有角分量id的属性。

尝尝这个

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

票数 21

Stack Overflow用户

发布于 2019-06-14 21:00:02

我知道这是旧的，但一个比：：ng-深度更好的解决方案是使用:host。这将避免以后出现下列问题时:ng深度被否决。

:host {
  --width: 43.75%;
}

票数 10

Stack Overflow用户

发布于 2018-01-23 08:05:00

CSS变量不依赖于角度，而是依赖于浏览器。你需要一个最新的浏览器来使用它们。CanIUse可以帮你解决这个问题。

由于您使用的是角，您可以使用.scss文件或.less文件，用于沙斯和较少。它们都处理变量，还有更多的变量。

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48396763

复制

相似问题

问CSS变量和角5
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS变量和角5EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS变量和角5
EN