CSS 带引号的边距

Question

我正在检查 semantic-ui 的源文件并注意到 semantic.css 中的一条规则，例如：

margin: '';

一开始，我以为是打错了，但这条规则用在了3行不同的地方。我搜索了 Google 但找不到任何东西。这只是一个错误还是有用的东西？有谁知道为什么要使用这样的规则？

Answer 1

总结

我的猜测是，这是一种允许使用 LESS 变量的机制，该变量应该被主题覆盖，但也可以为空。如果不声明变量，LESS 将不会编译为 CSS。将变量的值设置为 initial 之类的有效值会导致不良行为。因此，他们删除属性如果主题未设置它，则使其无效。

例子

我将以 horizontal divider 为例来说明我的意思。编译后的CSS为：

.ui.horizontal.divider {
  display: table;
  margin: '';
  /* ... */
}
.ui.divider {
  margin: 1rem 0;
  /* ... */
}

在 GitHub 存储库中，您将找到 LESS for the horizontal divider:

.ui.horizontal.divider {
  display: table;
  margin: @horizontalMargin;
  /* ... */
}

变量声明可以在对应的.variables file of the theme中找到。在默认主题中它只是 @horizontalMargin: '';。这将导致为水平分隔线提供更一般的 .ui.divider 的边距，如上所示 (margin: 1rem 0;)，这与 auto、[=12= 等边距的有效值不同], inherit, unset.

CSS 带引号的边距

CSS Margin with Quotation Marks

css

margin

semantic-ui

总结

例子