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

Question

我正在使用 Indrek Pass' Sass mixin根据 Mike Riethmuller's post 进行流体排版.

当您查看从该混入中编译的 CSS 时，您可以看到它为所选元素创建了多个规则如果一个人将混入用于多个断点。而且我确实喜欢按我的意愿完全排版，而不仅限于在一个媒体查询中放大或缩小排版。

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 任务/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 不是为做这样的多部分转换而设计的。如果你想写一个，我会很乐意分享它。您可能会发现这篇博文很有帮助:madebymike.com.au/writing/precise-control-responsive-typography/

更新:

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

.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 动画计时函数的字符串表示，最后是一些 flex 点，用于确定沿着缓动函数应用了多少插值步骤。

希望对您有所帮助!