При использовании единиц измерения [i]rem[/i] верстальщики зачастую выставляют базовый размер шрифта, равный 10 пикселям. В таком случае всё сводится к простым вычислениям, для которых не нужен калькулятор:
[list][*]10px -> 1rem[*]23px -> 2.3rem[/list]и так далее.
Такой подход хоть и имеет право на существование, но связан с одной проблемой: браузеры позволяют выставлять минимальный размер шрифта в своих настройках. При этом он выставляется не для тега [i]html[/i], что позволило бы пересчитать все единицы [i]rem[/i] на странице, а просто насильно увеличивается размер шрифта. Это приводит к порой страшным результатам, особенно, если стоит не стандартное значение свойства [i]line-height[/i]. Слипшиеся строки вам гарантированы.
Если мы всё же хотим использовать единицы [i]rem[/i] и при этом высчитывать значения от реального базового размера шрифта, то нам понадобится конвертер [i]px[/i] в [i]rem[/i].
В этом задании вам необходимо написать функцию px-to-rem, которая принимает на вход значения в пикселях, а на выходе возвращает значение в [i]rem[/i]. На вход функции может поступать любое количество значений, разделённых пробелом. Это позволит писать адекватный [i]SASS[/i] код в тех свойствах, где может быть не одно значение.
Возвращённое значение из функции обязательно должно быть в виде строки. Это позволит при любом наборе данных иметь на выходе значения, которые имеют одинаковый тип данных.
Примеры[table]
$rem-base: 16px;
 
.px-20 {
  padding-left: px-to-rem(20px);
  padding-right: px-to-rem(20px);
}
 
.card {
  padding: px-to-rem(20px 15px 30px 45px);
}[/table]После компиляции должен получится следующий [i]CSS[/i] код:
[table]
.px-20 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
 
.card {
  padding: 1.25rem 0.9375rem 1.875rem 2.8125rem;
}[/table]Подсказки[list][*]Для перевода значения в строку можно воспользоваться [i]интерполяцией[/i].[*]Для деления используйте функции math.div() из пространства sass:math. Само пространство уже подключено в файле [i]app.scss[/i][/list]

При использовании единиц измерения rem верстальщики зачастую выставляют базовый размер шрифта, равный 10 пикселям. В таком случае всё сводится к простым вычислениям, для которых не нужен калькулятор:
<ul><li>10px -&gt; 1rem</li><li>23px -&gt; 2.3rem</li></ul>и так далее.
Такой подход хоть и имеет право на существование, но связан с одной проблемой: браузеры позволяют выставлять минимальный размер шрифта в своих настройках. При этом он выставляется не для тега html, что позволило бы пересчитать все единицы rem на странице, а просто насильно увеличивается размер шрифта. Это приводит к порой страшным результатам, особенно, если стоит не стандартное значение свойства line-height. Слипшиеся строки вам гарантированы.
Если мы всё же хотим использовать единицы rem и при этом высчитывать значения от реального базового размера шрифта, то нам понадобится конвертер px в rem.
В этом задании вам необходимо написать функцию px-to-rem, которая принимает на вход значения в пикселях, а на выходе возвращает значение в rem. На вход функции может поступать любое количество значений, разделённых пробелом. Это позволит писать адекватный SASS код в тех свойствах, где может быть не одно значение.
Возвращённое значение из функции обязательно должно быть в виде строки. Это позволит при любом наборе данных иметь на выходе значения, которые имеют одинаковый тип данных.
Примеры[table]
$rem-base: 16px;
 
.px-20 {
 padding-left: px-to-rem(20px);
 padding-right: px-to-rem(20px);
}
 
.card {
 padding: px-to-rem(20px 15px 30px 45px);
}[/table]После компиляции должен получится следующий CSS код:
[table]
.px-20 {
 padding-left: 1.25rem;
 padding-right: 1.25rem;
}
 
.card {
 padding: 1.25rem 0.9375rem 1.875rem 2.8125rem;
}[/table]Подсказки<ul><li>Для перевода значения в строку можно воспользоваться интерполяцией.</li><li>Для деления используйте функции math.div() из пространства sass:math. Само пространство уже подключено в файле app.scss</li></ul>

Гость guest_16516498078481

SASS программирование