代码之家 › 专栏 › 技术社区 › TalGabay

CSS变量和角度5

css-variables angular css javascript

9

TalGabay · 技术社区 · 8 年前

我正在尝试在角度应用程序中使用css Variable, 在子组件中,它只是不起作用。在浏览器的元素工具(我使用的是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一起使用? 非常感谢。

3 回复 | 直到 8 年前

1

19

Vlad S. 8 年前

您的根选择器可能还会获得具有角度组件id的属性。

试试这个

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

2

10

J Hutch 7 年前

我知道这很古老,但比::ng deep更好的解决方案是使用:host。这将避免在以后不推荐使用::ng deep时出现问题。

:host {
  --width: 43.75%;
}

3

1

user4676340 user4676340 8 年前

CSS变量不依赖于角度,它们依赖于您的浏览器。您需要有最新的浏览器才能使用它们。 CanIUse 我可以帮你。

既然你用的是Angular,你可以用 .scss 文件,或 .less 文件,用于 SASS 和 LESS . 它们都处理变量,还有更多。

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

您也可以访问 .angular-cli.json 并更改 styleExts 给你选择的那个。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号