Question

我遇到一个问题，padding-left :some_Value and margin-left: some value有很多内嵌样式。

<div class="row" style="padding-left: 40px">
</div>

我们如何以通用和最佳方式处理此类事情。问题是这些属性都没有consistent and unique value。我们可以创建某种函数或mixin来处理这个问题吗？

Answer 1

最佳实践 - 单调乏味 - 将清理HTML：从中删除内联样式（style="padding-left: 40px"）。以这种方式混合样式和内容几乎是最糟糕的做法。

您可以在样式表中使用!important来覆盖来自HTML的内联样式。示例：

p {
  margin: 1rem;
  padding: 1rem;
  background-color: #DDD !important;
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p style="background-color: #99F">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

请注意！重要的是一种代码味道 - 它有点hacky因为你已经在处理HTML中的次优内联样式。您可以将此与您在系统中使用的任何Sass混合使用。

将内联样式替换为泛型类

1 个答案: