【问题标题】:How to make Compass Vertical Rhythm output Rems instead of Ems with px fallback?如何使用 px 后备使 Compass Vertical Rhythm 输出 Rems 而不是 Ems?
【发布时间】:2013-08-26 08:37:51
【问题描述】:

我想这样做:http://www.youtube.com/watch?v=ls3Clk-kz3s 但输出 rems(带有 px 后备)而不是 ems。

显然,这个https://github.com/chriseppstein/compass/pull/896 已添加到指南针中,并且应该以某种方式工作,但我不太清楚我需要从http://compass-style.org/reference/compass/typography/vertical_rhythm/ 到我的 .scss -file 来制作它。

如果我只是将 https://gist.github.com/ry5n/2026666 的代码作为一个 mixin(即使根本没有 Compass)并使用:

@include set-font-size()

代替:

@include adjust-font-size-to()

它与 rem 值和 px 后备效果很好。

但如果我只是尝试使用 Compass 并继续使用

$font-unit: 1rem;
$relative-font-sizing: false;

它可以工作,但没有 px 后备。

如果有人可以将 Vertical Rhythm 所需的完整 .scss 代码用于 Rems,我将不胜感激。

如果我使用 Rems,为什么我需要 $relative-font-sizing: false? 此外,除了将文本放到这样的网格中之外,是否还有一些关于垂直节奏的相互竞争的哲学?您更喜欢哪一个?您的工作流程是什么?

非常感谢您。

【问题讨论】:

    标签: html css sass compass-sass mixins


    【解决方案1】:

    目前,Compass 的这些更新仍保留在预发布 gem 中,并且在 compass-style.org(甚至 beta.compass-style.org)上还没有匹配的文档。要使用新功能,请安装最新的 gem (0.13.alpha.4):

    gem install compass --pre
    

    使用新 gem,垂直节奏 API 略有不同,主要在于其可配置变量,如 https://github.com/chriseppstein/compass/pull/896。简而言之,设置你的基本字体大小和行高,并将新的 $rhythm-unit 变量设置为rem

    $base-font-size: 16px;
    $base-line-height: 24px;
    $rhythm-unit: 'rem';
    

    $rhythm-unit 变量替换了 $font-unit,并且 $relative-font-sizing 现在是一个私有的、内部的东西,您无需担心。

    在此之后,所有正常的垂直节奏 mixin 都会输出带有回退的 rem(除非你明确地将 $rem-with-px-fallback 设置为 false)。请注意,API 的其余部分几乎保持不变,除了 rhythm mixin,它现在具有更合理的默认参数。 original pull request 中详细介绍了一些补充内容。

    请记住,节奏函数不能提供像素回退,因为它们只是返回一个值。

    【讨论】:

    • 非常感谢ry5n。对于 Compass 急需的功能以及详细的答案。我自己在使用 CodeKit,所以当新版本发布时它可能会更新自己和 Compass(知道什么时候吗?)。但是你的最后一句话是否意味着在新的 Compass 版本中不会像gist.github.com/ry5n/2026666 那样有像素后备?
    • 当 compass 0.13 发布时(我不确定何时发布),所有垂直节奏 mixin 都会有像素后备,例如 adjust-font-size-toleadertrailer、@ 987654334@等。唯一没有得到像素回退的是 functions,其中rhythm() 是我唯一真正使用的。由于这些只是计算节奏值(不是输出 CSS),它们不能提供像素后备。
    • 顺便说一下,可以告诉 CodeKit 使用本地 gem 而不是内置的 Compass。见:css-tricks.com/forums/topic/…incident57.com/codekit/help.php#help-compass
    • 我的 CodeKit 现在使用的是 Compass 版本 0.13.alpha.4,但除非我使用 pull 896 -mixin,否则它仍然无法工作。这是我仍然输出 ems 的 .scss:@import "compass";$base-font-size: 18px;$base-line-height: 24px;$rhythm-unit: 'rem';@include establish-baseline; 我想知道它是否还在使用旧版 Compass?当我在 CodeKit 上单击 About 时,它说它现在正在使用该预安装版本。
    • @import compass 有问题吗? @import 应该指向预安装版本还是 CodeKit 使用预安装版本就足够了?还是我应该开始一个新的 Compass 项目..?
    猜你喜欢
    • 1970-01-01
    • 2021-07-28
    • 2014-12-19
    • 2012-12-27
    • 1970-01-01
    • 2013-04-26
    • 1970-01-01
    • 1970-01-01
    • 2020-08-09
    相关资源
    最近更新 更多