如何使用具有模块化比例的 SASS 为所有 headers 生成尺寸

Question

我希望使用 SCSS 创建 H1 到 H6 的尺寸。这个例子假设我已经创建了变量 $base-size 和 $modular-scale。具体来说：

h6: $base-size * $modular-scale * 1
h5: $base-size * $modular-scale * 2
h4: $base-size * $modular-scale * 3
...
h1: $base-size * $modular-scale * 6

我不知道如何使用混合或函数（或任何适合此任务的功能）生成这些类。

到目前为止我有：

@mixin make-header-size ($type, $scale) {
  .#{$type} {
    $type * $scale * (...scalar)
  }
}

不确定如何完成其余部分以便我可以简洁地生成每个尺寸。

Answer 1

只是我创建的一个小函数

$types : h6 h5 h4 h3 h2 h1;
$base-size : 16px;

$modular-scale : 0.5;
@each $type in $types{
  #{$type} {
    font-size : $base-size * $modular-scale;
    $modular-scale : $modular-scale + 1;
  }
}

见PEN

我将此功能用于个人用途。

$headings : h1 h2 h3 h4 h5 h6;
$font-size-base : 16px;

$font-size-upper : 36px;
$font-size-dec : 4px;
@each $heading in $headings{
  #{$heading} {
    font-size : $font-size-upper;
    font-size : ($font-size-upper / $font-size-base) + em;
  }
  $font-size-upper : $font-size-upper - $font-size-dec;
}

Check it out.

Answer 2

这里有一个简单的小 @for 循环来生成六种标题样式，其中 scale 变量 表示标题从 h6 增长到 px 的数量h1:

// h6 starts at $base-font-size 
// headings grow from h6 to h1 by $heading-scale
$base-font-size: 18px;
$heading-scale: 8; // amount of px headings grow from h6 to h1

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $base-font-size + $heading-scale * (6 - $i);
  }
}

还有一个 demo codepen 来玩。

Answer 3

@Fabian 和@Jinu 的回答都很好。但是，我希望我的 scss 大小取决于上下文和屏幕大小。这是我的移动优先解决方案，我通过合并@Fabian、this blog post 和一个 media-query 混入得到了它。请注意，当您查看代码时，如果您的上下文不在上下文字体中，则不会定义 font-size，因此请小心。

// https://codepen.io/zgreen/post/contextual-heading-sizes-with-sass
// 
//define vars and mix-ins
$context-font: ( header: 1, section: 1, article: 0.67, footer: 0.5, aside: 0.33 ); // Make fonts change size dependent upon what context they are in
$step-size-font: 0.333333; //step size for incremental font sizes
$amplifier-font-mobile: 1.2; //convenience var to in/decrease the values of header values in one place
$amplifier-font-desktop: 1.4; //convenience var to in/decrease the values of header values in one place
$on-laptop: 800px;
$margin-heading: 0.67em 0;
@mixin media-query($device) {
    //scss mobile-first media query
    @media screen and (min-width: $device) {
         @content;
    }
}
//function to generate the actual header size
@mixin heading-size($size) {
    $context-size-computed: $size * $step-size-font;
    font-size: $context-size-computed * $amplifier-font-mobile + em;
    @include media-query($on-laptop) {
        font-size: $context-size-computed * $amplifier-font-desktop + em;
    }
}
// Apply the stylings using the vars and mix-ins
// context-free header styling
@for $i from 1 through 6 {
    h#{$i} {
        font-weight: bold;
        margin: $margin-heading;
    }
}
//iterate thru all the contexts in context-font, setting the header sizes in each
@each $element, $value in $context-font {
    #{$element} {
        //set header sizes 1-6
        @for $i from 1 through 6 {
            h#{$i} {
                $bigger-size-proportional-to-smaller-number: (6-$i);
                @include heading-size($bigger-size-proportional-to-smaller-number * $value);
            }
        }
    }
}

编辑：另一种（simpler/better？）获取上下文特定字体大小的方法是使用 em 字体大小，并在您的上下文中更改字体大小。对于每个上下文（文章、部分、div 等），您只能执行一次此操作，并且它会影响其中的所有文本。那是因为 em 是 relative font size.

如何使用具有模块化比例的 SASS 为所有 headers 生成尺寸

How to generate sizes for all headers using SASS with modular scale

html

css

sass

mixins