Question

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

当您从该mixin查看已编译的CSS时，您可以看到它为所选元素创建了多个规则如果，则将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标记？

A）
你是否进入了一个grunt任务/ postCSS包来摆脱多个声明？如果是这样的grunt task / postCSS包呢？

b）中
如果必须，你是手工做吗？我可以看到自己已经花了几个小时检查编译的CSS，而不是我喜欢做的事情。

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

除此之外，我对这个mixin非常满意并且发现它很棒！能够在不编辑编译的CSS中编辑每个受影响的选择器的情况下摆脱这个问题会很棒。

Answer 1

我认为你想要实现的是两部分的流畅过渡。这样的事情：not a very good illustration？

您所拥有的示例不会完全这样做，因为值重叠12-40,20-80＆amp; 80-12。每个转换都按顺序进行，这意味着在401像素的屏幕分辨率下，字体大小将从40跳到20px。

除此之外，如果您正在尝试这样做，您只需从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，它允许使用动画计时功能来定义弯曲点＆＃39;。它的工作原理如下：

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

我希望有所帮助！

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

1 个答案: