neyia
1/30/2019 - 11:49 AM

Function. Less. A key/value array

Function. Less. A key/value array

/**
 * R Style Guide Heading
 * --------------------------------
*/
/**
 * Heading R Styles. Frontify
 * --------------------------------
*/

//массив медиа и коэффициент, на который умножаем размер шрифта
@media-factors-array: 1300px 1.5px, 800px 2.0px, 450px 2.4px, 380px 2.7px, 340px 3.1px;

//вызов, название класса, размер шрифта, массив значений
.make-classes(text-14, 14, @media-factors-array);
.make-classes(heading-30, 30, @media-factors-array);
.make-classes(heading-26, 26, @media-factors-array);
.make-classes(heading-24, 24, @media-factors-array);
.make-classes(heading-20, 20, @media-factors-array);
.make-classes(heading-16, 16, @media-factors-array);
.make-classes(heading-14, 14, @media-factors-array);

//функция миксин для адаптива по коэффициентам
.make-classes(@prefix, @size, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i);
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2);
    
        .@{prefix}{
            @media only screen and (max-device-width: @key) {
                font-size: @size*@value;
            }
        }
    }
}