AppMaker剥离CSS变量

是否可以在Google App Maker中使用CSS变量？AppMaker剥离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，我们用于其他网站和应用程序，是最好的办法吗？

来源

2017-05-22 Jonathon

其实App Maker不会去掉CSS变量。导致问题的原因是App Maker在Global Styles前加上#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); 
}

有一个简单的方法来欺骗应用设备，以使变量的工作：

/* 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); 
}

它会工作，但没有保证应用设备将关闭这扇门在未来（或修复原始问题）。我还会考虑将所有变量移动到CSS文件中，并将其添加为外部CSS资源（我不确定编辑器是否会在设计时选取它）。

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

来源

2018-03-06 18:56:11

AppMaker剥离CSS变量

回答

相关问题