Question

我希望有人在使用Sass版本时如何在Zurb Foundation for Emails 2中更改列的背景颜色的正确方向。有没有一种方法可以设置列或行的背景颜色？我尝试了多种方法，但由于某种原因无法将样式应用于列或行。身体， html

        h4.topline {
      text-align: center;
      color: rgb(0, 255, 85);
      background: red;
    }
    p.value {
      text-align: center;
      color:indigo;
      font-weight: bold;
      background: greenyellow
    }
    div.test{
        background: greenyellow
    }
    .columns.descr {
      text-align: center;
      color: gainsboro;
      font-weight: bold
    }
    .row.test{
        border-width: thick;
        border-color: aqua

    }
    </style>

<container class="body-notify">
                <row>
                    <columns small="12" large="12" >
                        <spacer size="10"></spacer>
                        <h4 class="topline">Information</h4>
                    </columns>
                </row>
                <row>
                    <div class="test">
                    <columns class="descr" small="12" large="6">Description 1</columns>
                    </div>
                    <columns small="12" large="6"><p class="value">Value 1</p></columns>
                </row>
                <row>
                    <columns small="12" large="6">Description 1</columns>
                    <columns small="12" large="6"><p class="value">Value 2</p></columns>
                  </row>
        </container>

Answer 1

我去年从事电子邮件营销工作，我知道一些事情，您不能在电子邮件样式中添加任何样式的CSS。所以我认为您可以像这样在div上内联添加背景色：

<div class="row" style="backgound:red;"></div>

Answer 2

在这方面有点晚了，但希望它会有所帮助！ columns元素是Inky模板标记的一部分，如果在浏览器中进行检查，您会发现它实际上是带有类名称列的<th>元素。因此，您应该可以使用th.columns来定位它：

th.columns.descr { 文本对齐：居中；颜色：gainsboro； font-weight：粗体}

类似地，HTML标记中的<row>是一个表元素，因此请尝试table.row { add css here }

还要警惕在HTML电子邮件中使用<div>标签-一些电子邮件客户端会剥离它们。来自基金会docs

在制作电子邮件时，div无关紧要。不要杀死信使，但这是事实。发现我们不能只使用带有自动左和右页边距的居中或背景颜色，这并不是一件有趣的事。它不适用于大多数电子邮件客户端。 <div>仍可用于定位CSS和对语义相关元素进行分组，但不应用于结构目的或间距。

您可以改为使用<wrapper>元素（也包括漆黑的模板标记）。在实际的html中，这是一个带有包装器类的表元素，因此，如果您需要使用sass来定位它，它将是

table.wrapper

将样式应用于Zurb Email Foundations中的列

2 个答案: