Google apps script css变量在来自google apps脚本的电子邮件中不起作用_Google Apps Script

Google apps script css变量在来自google apps脚本的电子邮件中不起作用

google-apps-script

Google apps script css变量在来自google apps脚本的电子邮件中不起作用,google-apps-script,Google Apps Script,css变量不起作用有什么原因吗？谷歌应用程序脚本是否存在css版本问题我正在通过Google apps脚本发送一封电子邮件，其中包含html，如： <!DOCTYPE html> <html> <head> <base target="_top"> <style> :root { --blue: #1e90ff; --white: #ffffff;

css变量不起作用有什么原因吗？谷歌应用程序脚本是否存在css版本问题

我正在通过Google apps脚本发送一封电子邮件，其中包含html，如：

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      :root {
        --blue: #1e90ff;
        --white: #ffffff;
      }

      body { background-color: var(--blue); }

      h2 { border-bottom: 2px solid var(--blue); }

      .container {
        color: var(--blue);
        background-color: var(--white);
        padding: 15px;
      }

      button {
        background-color: var(--white);
        color: var(--blue);
        border: 1px solid var(--blue);
        padding: 5px;
      }
    </style>

  </head>
  <body>
    <h2>this is H2</h2>
    <button>this is button</button>
    
  </body>
</html>

我是这样运行的：

function showasimpledialog() {
  const html=' <!DOCTYPE html><html>  <head>    <base target="_top">    <style>      :root {        --blue: #1e90ff;        --white: #ffffff;      }      body { background-color: var(--blue); }      h2 { border-bottom: 2px solid var(--blue); }      .container {        color: var(--blue);        background-color: var(--white);        padding: 15px;      }      button {        background-color: var(--white);        color: var(--blue);        border: 1px solid var(--blue);        padding: 5px;      }    </style>  </head>  <body>    <h2>this is H2</h2>    <button>this is button</button>      </body></html>';

  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),'Title');
}

函数showasimpledialog（）{
const html=':root{--blue:#1e90ff；--white:#ffffffff；}body{background color:var（--blue）；}h2{border bottom:2px solid var（--blue）；}.container{color:var（--blue）；background color:var（--white）；padding:15px；}按钮{背景色：var（-white）；颜色：var（--blue）；边框：1px实心var（--blue）；填充：5px；}这是H2这是按钮'；
SpreadsheetApp.getUi（）.showModelessDialog（HtmlService.createHtmlOutput（html），'Title'）；
}

输出：

它在对话框中呈现正常。

谢谢。可能这只是电子邮件的问题。可能是。我会在电子邮件中尝试一下。我尝试了使用变量和不使用变量，但显然它不支持变量。仅供参考：答案是它不适用于电子邮件，但适用于无模式对话框

function showasimpledialog() {
  const html=' <!DOCTYPE html><html>  <head>    <base target="_top">    <style>      :root {        --blue: #1e90ff;        --white: #ffffff;      }      body { background-color: var(--blue); }      h2 { border-bottom: 2px solid var(--blue); }      .container {        color: var(--blue);        background-color: var(--white);        padding: 15px;      }      button {        background-color: var(--white);        color: var(--blue);        border: 1px solid var(--blue);        padding: 5px;      }    </style>  </head>  <body>    <h2>this is H2</h2>    <button>this is button</button>      </body></html>';

  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),'Title');
}