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

发布于 2025-01-08 08:39:28 字数 694 浏览 0 评论 0原文

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

问题是我使用 @mixin 在几个地方应用 CSS hack (合理阻止列表),我想恢复 .block 中的 font-size 属性-列表*(目前子元素中的所有文本都已折叠)。

不满意的解决方法:

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

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

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

I'd like to store the current value of a property for later use. It's already been solved for jQuery.

The issue is that I'm using a @mixin to apply a CSS hack in several places (Justified Block List) and I'd like to restore the font-size property in .block-list * (currently all text in sub-elements is just collapsed).

Unsatisfactory workarounds:

  • Save the global default font size in a separate file and pass it to the @mixin on @import. This is of course in the general case not the same font size as the objects which the mixin is applied to.
  • Save the font size whenever you change it, and pass that. This tangles up the files involved, since it's not very elegant to @include the typography stylesheet in several otherwise unrelated files.
  • Use more jQuery.

Possibly satisfactory workarounds:

  • Override the font size with a stronger rule on the first ancestor which changes it. This could be tricky to determine.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

上课铃就是安魂曲 2025-01-15 08:39:28

在样式实际应用于文档之前,无法得知属性的计算值(这就是 jQuery 检查的内容)。在样式表语言中,除了初始值或您指定的值之外,没有“当前”值。

每当更改字体大小时都保存它,并传递它似乎是最好的,@BeauSmith 给出了一个很好的例子。此变体允许您将大小或回退传递给已定义的全局:

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

There's no way to tell the computed value of a property until the styles are actually applied to a document (that's what jQuery examines). In the stylesheet languages, there's no "current" value except the initial value or the value you specify.

Save the font size whenever you change it, and pass that seems best, and @BeauSmith has given a good example. This variant lets you pass a size or fallback to a defined global:

=block-list($font-size: $base-font-size)
  font-size: 0
  > li
    font-size: $font-size
土豪我们做朋友吧 2025-01-15 08:39:28

如果你有一个 mixin 对字体大小做了一些“hacky”的事情,那么你可能需要像你注意到的那样重置字体大小。我建议如下:

  1. 创建一个 Sass 部分来记录您的项目配置变量。我建议_config.sass
  2. _config.sass中定义基本字体大小:

    $base-font-size: 16px
    
  3. 在主 sass 文件顶部添加 @import _config.sass (s).

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

    <前><代码>@mixin foo
    导航
    font-size: 0 // 这是 hacky 部分
    >李
    font-size: $base-font-size // 重置字体大小

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

If you have a mixin which is doing something "hacky" with the font size, then you will probably need to reset the font size as you have noticed. I suggest the following:

  1. Create a Sass partial to record your projects config variables. I suggest _config.sass.
  2. Define your base font-size in _config.sass:

    $base-font-size: 16px
    
  3. Add @import _config.sass at the top of your main sass file(s).

  4. Update the mixin to reset the font-size to your $base-font-size:

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

Note: If you are using the SCSS syntax, you'll need to update the examples here.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文