sass px to em mixin / функція для різних розмірів бази на responsive site - sass

Я використовую sass на деякий час і протягом століть я використовував наступну функцію px для em для моїх медіа-запитів:

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
@return #{$pixels/$context}em
}

Проте, тепер я хочу налаштувати інший розмір базового шрифту в залежності від ширини екрану. SO, наприклад, для мобільних розмірів

$browser-context: 14; // Default

і для великих екранів:

$browser-context: 16; // Default

Але Im не впевнений як загорнути це все у sass. Будь-які ідеї?

Дякую,

Відповіді:

0 для відповіді № 1

Я впевнений, що це неможливо досягти в SASS, не замислюючись поза коробкою.

SASS, як ви знаєте, компілює перед відправкою в браузер, отже, в цей момент ми не знаємо, який браузер, не кажучи вже про розмір екрану. Таким чином, медіа-запити відсутні.

Що ви можете зробити (я теоретизую тут):

Налаштуйте функцію em для створення серії розмірів шрифтів, характерних для різних ширин браузера, наприклад,

@function em780($pixels, $context: $browser-context) {
@return #{$pixels/$context}em
}

і

@function em420($pixels, $context: $browser-context) {
@return #{$pixels/$context}em
}

тощо.

Це повинно дати правильний розмір EM для кожної конкретної ширини екрана. Потім призначте ці розміри у звичайному медіа-запиті

@media all and (max-width: 420px){
h1{ font-size: $em420;
}

@media all and (max-width: 780px){
h1{ font-size: $em780;
}

Чи це має сенс?

Очевидно, не копіюйте "код", який я написав тут, але сподіваюся, що загальна ідея дійсна.

---

0 для відповіді № 2

Це мій мікс:

@function em($px, $base: 16px) {
@return ($px / $base) * 1em;
}

використовувати його як розмір шрифту: em (24px) ;. Я думаю, що це більш чітко, ніж просто набирати значення

---