1

是否可以在 Google App Maker 中使用 CSS 变量？

:root {
  --pale-grfn-grey: #e0dcd5;
}

.app-header-header {
  border-bottom: 1px solid red;
  border-bottom-color: var(--pale-grfn-grey);
}

部署或预览的应用程序不包括定义或border-bottom-color调用。

我维护了一个用于其他网站和应用程序的外部 CSS，使用它是最好的办法吗？

4

1 回答 1

2

实际上 App Maker 并没有去除 CSS 变量。问题的原因是 App Maker 为全局样式添加了前缀#app，这会破坏您的初始变量设置。

/* Design time Global CSS */
:root {
  --customColor: red;
}

.app-MyPage-MyPage {
  background-color: var(--customColor);
}


/* Runtime time Global CSS */
#app :root {
  --customColor: red;
}

#app .app-MyPage-MyPage {
  background-color: var(--customColor);
}

有一种简单的方法可以欺骗 App Maker 以使变量起作用：

/* Design time Global CSS
   NOTE: there is no :root in the beginning BUT
   there is a whitespace OR new line */
 {
  --customColor: red;
}

.app-MyPage-MyPage {
  background-color: var(--customColor);
}

/* Runtime time Global CSS */
#app {
  --customColor: red;
}

#app .app-MyPage-MyPage {
  background-color: var(--customColor);
}

它会起作用，但不能保证 App Maker 将来会关闭这扇门（或修复原始问题）。

我还会考虑将所有变量移动到 CSS 文件中并将其添加为外部 CSS 资源（我不确定编辑器是否会在设计时选择它）。

并且请务必随时向 App Maker 团队提交错误：https ://issuetracker.google.com/issues/new?component=192783&template=833410

于 2018-03-06T18:56:11.913 回答