如何在 SASS 中获取 CSS 属性的值？

Question

我想存储一个属性的当前值以供以后使用。 jQuery已经解决了。

问题是我正在使用 @mixin 在多个地方应用 CSS hack (Justified Block List)，我想恢复 .block-list * 中的 font-size 属性（目前 all 子元素中的文本只是折叠）。

不满意的解决方法：

• 将全局默认字体大小保存在单独的文件中，并将其传递给@import 上的@mixin。在一般情况下，这当然与应用 mixin 的对象的字体大小不同。
• 在更改字体大小时保存并传递。这会混淆所涉及的文件，因为在几个原本不相关的文件中，@include 排版样式表并不是很优雅。
• 使用更多的 jQuery。

可能令人满意的解决方法：

• 在更改字体的第一个祖先上使用更强的规则覆盖字体大小。这可能很难确定。

Answer 1

在样式实际应用到文档之前（这是 jQuery 检查的），没有办法知道属性的 computed 值。在样式表语言中，除了初始值或您指定的值之外，没有“当前”值。

每次更改时保存字体大小，然后通过似乎最好，@BeauSmith 已提供a good example。此变体允许您将大小或回退传递给已定义的全局：

=block-list($font-size: $base-font-size)
  font-size: 0
  > li
    font-size: $font-size

Answer 2

如果您有一个 mixin 正在对字体大小进行“hacky”，那么您可能需要重新设置字体大小，正如您所注意到的那样。我建议如下：

1. 创建一个 Sass 部分来记录您的项目配置变量。我建议_config.sass。

2. 在_config.sass 中定义您的基本字体大小：

   $base-font-size: 16px
   

3. 在主 sass 文件的顶部添加 @import _config.sass。

4. 更新 mixin 以将字体大小重置为您的 $base-font-size：

   @mixin foo
     nav
       font-size: 0 // this is the hacky part
       > li
         font-size: $base-font-size // reset font-size
   

注意：如果您使用的是 SCSS 语法，则需要在此处更新示例。