Как сгенерировать размеры для всех заголовков, используя SASS с модульной шкалой

html css sass mixins

5549 просмотра

3 ответа

948 Репутация автора

Я ищу, чтобы создать размеры для H1 до H6, используя SCSS. В этом примере предполагается, что я создал переменные $ 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)
  }
}

Не уверен, как завершить все остальное, чтобы я мог кратко сгенерировать каждый из этих размеров.

Автор: steviejay Источник Размещён: 17.07.2016 11:26

Ответы (3)


1 плюс

6107 Репутация автора

Просто небольшая функция, которую я создал

$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;
  }
}

Смотрите ПЕН

Я использую эту функцию для личного пользования.

$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;
}

Проверьте это.

Автор: Jinu Kurian Размещён: 18.07.2016 10:44

12 плюса

2130 Репутация автора

Решение

Здесь у вас есть простой и маленький @forцикл для генерации шести стилей заголовков с переменной масштаба, которая указывает количество пикселей, с которых заголовки растут от h6 до 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);
  }
}

И демо-код, чтобы поиграть с ним.

Автор: Fabian Mebus Размещён: 19.07.2016 07:40

1 плюс

4011 Репутация автора

Ответы @ Fabian и @ Jinu довольно хорошие. Однако я хотел, чтобы размеры моего scss зависели от контекста и размера экрана. Вот мое первое мобильное решение, к которому я пришел, соединив @Fabian, этот пост в блоге и media-queryмиксин. Обратите внимание, что пока вы просматриваете код, если ваш контекст не находится в context-font, no 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 относительный размер шрифта .

Автор: James L. Размещён: 23.10.2016 10:57
Вопросы из категории :
32x32