:root переменные как использовать=?

Question

[Юрий Иванов]

Погуглил, и не нашел ответ на свой вопрос, помоги пожалуйста.
с помощью --color-green: rgba(69, 178, 107, 1); я могу задать переменную цвета, а потом использовать color: var(--green);
и все работает прекрасно
а если я хочу создать рут переменную для шрифта (font-size, line-height, color) могу ли я как-то с помощью root создать такую переменную, как предположим это возможно scss %font {}

Comments

[Ankhena]

Если вы имеете в виду плейсхолдеры, то напрямую нет.
И вы можете одновременно использовать возможности и препроцессора и кастомных свойств.

Сочинить можно что-то типа того https://jsfiddle.net/f1nact6v/

В этом гайде есть интересные примеры использования кастомных свойств
https://css-tricks.com/a-complete-guide-to-custom-...

Answer 1

[Тынай Бакасов]

root: {
--color:#ffffff;
--size:24px;
--height:3em;
}
.h1 {
  color: var(--color);
  font-size: var(--size);
  line-height: var(--height);
}

Comments

[Тынай Бакасов]

Для SCSS

$color1: #81899b;
$size: 14px;
$height: 24px;
root: {
--color: #{$color1};
--font-size: #{$size};
--line-height: #{$height};
}
.h1 {
color: var(--color);
font-size: var(--font-size);
line-height: var(--line-height);
}

[Тынай Бакасов]

SCSS удаляет кавычки, чтобы избежать проблем используйте meta.inspect()

$font-family: "Roboto", sans-serif;

:root {
  --font-familyf: #{meta.inspect($font-family)};
}

Answer 2

[Никита Чернов]

https://css-tricks.com/a-complete-guide-to-custom-...