Как перестроить миксин?

Question

[Andrej Sharapov]

Собственно, сабж.

Пытаюсь составить конструкцию для вывода font-size под медиа запросы, где $queries: $sm, $md, $lg, $xl; - разрешения экранов, $sizes: $fzh6, $fzh5, $fzh4, $fzh3, $fzh2, $fzh1; - размер шрифтов.

Но в попытке собрать воедино - запутался еще хуже.

@each $query in $queries {
    @media (max-width: #{$queries}) {
        @mixin media-sizes($sizes) {
            @for $i from 1 through 6 {
                h#{$i} {
                  font-size: $sizes;
                }
            }
        }
    }
}

Помогите перестроить, пожалуйста)

Answer 1

[Flying]

В целом всё очень просто:

@each $query in $queries {
    @media (max-width: #{$query}) {
        @for $i from 1 through 6 {
            h#{$i} {
              font-size: nth($sizes, $i);
            }
        }
    }
}

Однако лучше хранить размеры в map'е, это позволит упростить код:

$sizes: (
  h6: $fzh6, 
  h5: $fzh5, 
  h4: $fzh4, 
  h3: $fzh3, 
  h2: $fzh2, 
  h1: $fzh1
);

@each $query in $queries {
    @media (max-width: #{$query}) {
        @each $tag, $size in $sizes {
            #{$tag} {
              font-size: $size;
            }
        }
    }
}

Comments

[Andrej Sharapov]

но ведь тогда оно будет выводиться одинаково для всех медиа.
По идее, при разрешении , например, $md, размер шрифта для заголовка H1 должен становиться меньше, т.е. не $fzh1, а $fzh2 и так же для других.

[Flying]

Andrej Sharapov да, конечно, вы правы.

[Andrej Sharapov]

Flying,
Подскажите, как тогда надо перестроить директиву при такой карте? Составил вроде верно.

$sizes: (
  h6: ($fzh6, $fzh6, $fzh6, $fzh6), 
  h5: ($fzh6, $fzh6, $fzh5, $fzh5), 
  h4: ($fzh6, $fzh5, $fzh4, $fzh4), 
  h3: ($fzh4, $fzh4, $fzh3, $fzh3),
  h2: ($fzh3, $fzh3, $fzh2, $fzh2), 
  h1: ($fzh3, $fzh2, $fzh1, $fzh1)
);

[Flying]

В этом случае решение тоже будет простым:

@for $index from 1 through length($queries) {
    $query: nth($queries, $index);
    @media (max-width: #{$query}) {
        @each $tag, $size in $sizes {
            #{$tag} {
              font-size: nth($size, $index);
            }
        }
    }
}

однако то что вы используете list вместо map для $queries и внутри $sizes делает этот код довольно хрупким т.к. при появлении ещё одной media query придётся всё двигать руками.

[Andrej Sharapov]

Flying, уже перестраиваю в карту, но, мне кажется слишком много кода))

$breakpoints: (
    sm-min: (min-width: 36em),
    md-min: (min-width: 48em),
    lg-min: (min-width: 62em),
);

$sizes: (
    h1: (
        sm: (3rem),
        md: (3rem),
        lg: (2.5rem),
    ),
    h2: (
        sm: (2.5rem),
        md: (2.5rem),
        lg: (2rem),
    ),
    h3: (
        sm: (2rem),
        md: (2rem),
        lg: (1.5rem),
    ),
    h4: (
        sm: (1.5rem),
        md: (1.5rem),
        lg: (1.25rem),
    ),
    h5: (
        sm: (1.25rem),
        md: (1.25rem),
        lg: (1rem),
    ),
    h6: (
        sm: (1rem),
        md: (1rem),
        lg: (1rem),
    ),
);

и к тому же, я пока не могу понять как доставать "вложения из вложений"... (

Пока читаю документацию, смог составить только это

@each $query, $val in $breakpoints {
    @media #{$val} {
        @each $tag, $mq, $val in $sizes {
            #{$tag} {
                font-size: $mq, $val;
            }
        }
    }
}

[Flying]

Одиночные значения необязательно делать list'ом, более того в sass list из 1 элемента не отличается по поведению от скалярного значения (что изредка создаёт проблемы). Доставать очень просто: map-get(map-get($tag), $query)

[Flying]

map-get(map-get($sizes, $tag), $query) конечно же

[Flying]

Кроме того, если ваши значения будут только в rem можно добавить что-то типа:

$size: map-get(...); // получаем значение
@if (unitless($size)) {
  $size: $size * 1rem;
}

это позволит указывать unitless значения т.е. к примеру h6: (sm: 1, md: 1,lg: 1) что, в целом не так и много

[Andrej Sharapov]

Flying, стало только хуже)) теперь я в конец запутался)) можете поправить ошибки с учетом rem? https://codepen.io/anon/pen/BgOKWq
пошел читать документацию про карты -__-

[Flying]

Опять же всё довольно просто:

@each $query-id, $query in $breakpoints {
  $query-property: nth(map-keys($query), 1);
  $query-value: nth(map-values($query), 1);
  @media (#{$query-property}: #{$query-value}) {
        @each $tag, $sizes-list in $sizes {
            #{$tag} {
              $size: map-get($sizes-list, $query-id);
              @if (unitless($size)) {
                $size: $size * 1rem;
              }
              font-size: $size;
            }
        }
    }
}

Кроме того из-за приведения unitless значений можно сократить определение $sizes до:

$sizes: (
    h1: (sm: 3,    md: 3,    lg: 2.5),
    h2: (sm: 2.5,  md: 2.5,  lg: 2),
    h3: (sm: 2,    md: 2,    lg: 1.5),
    h4: (sm: 1.5,  md: 1.5,  lg: 1.25),
    h5: (sm: 1.25, md: 1.25, lg: 1),
    h6: (sm: 1,    md: 1,    lg: 1),
);

[Andrej Sharapov]

Flying,

Error: argument `$number` of `unitless($number)` must be a number

[Andrej Sharapov]

Flying, обновил песочницу.

Я уже начал думать, что проще наверное было бы записать размеры руками сразу в css))

[Flying]

ммм... проблема в другом: почему у вас в $breakpoints названия ключей, к примеру, sm-min, а в $sizes - sm? Поэтому ничего и не работает :)

[Andrej Sharapov]

Flying, блин, да, вы правы. Это я в свои "судорогах" сломал все))

Спасибо большое за помощь! Много не понятного, но, надеюсь, я разберусь)

[Flying]

У Sass сейчас хорошая документация, но если что - пишите. Там в целом-то всё просто

[Andrej Sharapov]

Flying, да я с sass постоянно работаю, просто подобные вещи делал простенькими миксинами или вовсе

h1 {
    fz: ...
    @media() {
        fz: ...
    }    
    ...
}

так глубоко не приходилось уходить, а тут решил...))