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或函数（或此任务的任何适当功能）生成每个类。

到目前为止，我有：

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

不确定如何完成剩下的工作，以便我可以简洁地生成每种尺寸。

Answer 1

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

// 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 2

我创建的一个小功能

$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 3

@ Fabian＆@ Jinu的答案非常好。但是，我希望我的scss大小与上下文和屏幕大小相关。这是我的移动优先解决方案，我通过合并@Fabian，this blog post和media-query混合来达到这个目标。请注意，当您查看代码时，如果您的上下文不是上下文字体，则不会定义font-size，因此要小心。

// https://codepen.io/zgreen/post/contextual-heading-sizes-with-sass
// https://stackoverflow.com/questions/38426884/how-to-generate-sizes-for-all-headers-using-sass-with-modular-scale
//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);
            }
        }
    }
}

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

如何使用模块化比例的SASS生成所有标题的大小

3 个答案: