流体排版 Sass mixin 为同一元素创建多个规则

Question

我正在使用 Indrek Pass' Sass mixin for fluid typography as per Mike Riethmuller's post。

当你查看编译后的 CSS 从那个 mixin 你可以看到它为所选元素创建了多个规则 if 一个人使用 mixin 更多不止一个断点。而且我确实喜欢完全的排版，而不是仅限于在一个媒体查询中放大或缩小排版。

SASS

html {
  @include fluid-type(font-size, 0px, 400px, 12px, 40px);
  @include fluid-type(font-size, 401px, 800px, 20px, 80px);
  @include fluid-type(font-size, 801px, 1400px, 80px, 12px);
}

CSS

html {
  font-size: 12px;
  font-size: 20px;
  font-size: 80px;
}
@media screen and (min-width: 0px) {
  html {
    font-size: calc(12px + 28 * (100vw - 0px) / 400);
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 401px) {
  html {
    font-size: calc(20px + 60 * (100vw - 401px) / 399);
  }
}
@media screen and (min-width: 800px) {
  html {
    font-size: 80px;
  }
}
@media screen and (min-width: 801px) {
  html {
    font-size: calc(80px + -68 * (100vw - 801px) / 599);
  }
}
@media screen and (min-width: 1400px) {
  html {
    font-size: 12px;
  }
}

如何处理已编译的 CSS 中的多个字体大小声明，在本例中是第一个 HTML 标签？

一）
您是否使用 grunt task/postCSS 包来摆脱多重声明？如果是这样，什么 grunt task/postCSS 包？

b)
如果必须的话，你会用手做吗？？我可以看到自己已经花了几个小时检查编译的 CSS，这不是我真正喜欢做的事情..

c)
有没有办法编辑 Sass mixin 来处理每个元素的多个声明？

除此之外，我对这个 mixin 非常满意，发现它工作得很好！能够在不编辑编译后的每个受影响的选择器的情况下解决这个问题 CSS 会很棒。

Answer 1

我假设您要实现的是两部分的流畅过渡。像这样：not a very good illustration?

您的示例不会完全这样做，因为值重叠 12-40、20-80 和 80-12。这些转换中的每一个都会按顺序发生，这意味着在 401 像素的屏幕分辨率下，字体大小将从 40 像素跳到 20 像素。

除此之外，如果这是您想要做的，您可以简单地从 html 标记中删除结果代码的总和并保留最小值：

html {
  font-size: 12px;
}
@media screen and (min-width: 0px) {
  html {
    font-size: calc(12px + 28 * (100vw - 0px) / 400);
  }
}
@media screen and (min-width: 401px) {
  html {
    font-size: calc(20px + 60 * (100vw - 401px) / 399);
  }
}
@media screen and (min-width: 801px) {
  html {
    font-size: calc(80px + -68 * (100vw - 801px) / 599);
  }
}
@media screen and (min-width: 1400px) {
  html {
    font-size: 12px;
  }
}

这个 mixin 不是为做这样的多部分转换而设计的。如果你想写一个，我会很乐意分享它。您可能会发现此博客 post 有帮助：madebymike.com.au/writing/precise-control-responsive-typography/

更新：

我最近写了更多关于这个的东西：http://madebymike.com.au/writing/non-linear-interpolation-in-css/ 并开发了一个新的 Sass mixin，它允许使用动画计时函数来定义 'bending points'。它是这样工作的：

.classic-linear {
    @include interpolate('font-size', 600px, 12px, 1000px, 24px); 
}

.easy-peasy {
  @include interpolate('font-size', 600px, 12px, 1000px, 24px, 'ease-in');
}

.cubic-bezier {
  @include interpolate('font-size', 600px, 12px, 1000px, 24px, 'cubic-bezier(0.75, 0.05, 0.85, 0.06)');
}

.bloat-my-css {
  @include interpolate('font-size', 600px, 12px, 1000px, 24px, 'ease-in-ease-out', 10);
}

它有5个必填参数，包括目标属性、初始屏幕尺寸、初始值、最终屏幕尺寸和最终值。

它有两个可选参数，其中包括一个缓动属性，它是 CSS animation-timing-function 的字符串表示，最后是一些决定插值多少的弯曲点沿着缓动函数应用步骤。

希望对您有所帮助！

流体排版 Sass mixin 为同一元素创建多个规则

Fluid typography Sass mixin creating multiple rules for same element

css

typography

sass

mixins