Установка гибкого приращения интервалов для полей на основе корневой переменной emCSS

Разбираемся в CSS
Ответить
Anonymous
 Установка гибкого приращения интервалов для полей на основе корневой переменной em

Сообщение Anonymous »

В настоящее время у меня есть файлы темы, которые выглядят примерно так:
export const Theme = {

//Primary is accessible on white or beige bckgrnd, others are not //
primary: "#036c5f",
secondary: "#f89d3e",
primaryGreen: "#083D35",
accentGreen: "#62CDB1",
midGreen: "#0E6C5F",

// Background and neutral colours //
backgroundBeige: "#F6F5F1",
lightGray: "#eaeaea",
ultraLightGray: "#fafafa",
gray: "#d0d3d4",
charcoalGrey: "#636363",
darkBlack: "#242627",
lightBlack: "#2d2f31",

// Focus State colours //
focusBlue: "#2C81FF",

borderRadius: "8px",
borderRadiusElliptic: "32px 0px 32px 0px",
boxShadow:
"0 0 0 1px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%), 0 12px 24px rgb(0 0 0 / 5%);",
boxShadowMedium: "0 8px 30px rgba(0,0,0,.12)",
border: "1px solid #eaeaea",
breakpointPhone: "299px",
breakpointPhoneM: "420px",
breakpointPhoneL: "620px",
breakpointTablet: "899px",
breakpointLaptop: "1024px",
breakpointLaptopBig: "1224px",
};

export default Theme;

Я хочу структурировать интервал на основе корневой переменной (заданной в единицах em), как в этом примере CSS в приведенном выше файле темы:
:root {
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
}

НО я хочу написать это на JavaScript в приведенном выше файле theme.js.
Какой синтаксис мне следует использовать?
Любая помощь буду признателен.
Я пробовал следующее:
spaceUnit: "1em";
spaceXS: "calc(0.5 * var(--spaceUnit))",
spaceS: "calc(1 * var(--spaceUnit))",
spaceM: "calc(1.5 * var(--spaceUnit))",
spaceL: "calc(2 * var(--spaceUnit))",
spaceXL: "calc(3.5 * var(--spaceUnit))",

НО я не думаю, что это правильно.
Я ссылаюсь на это на таких страницах:





Подробнее здесь: https://stackoverflow.com/questions/787 ... m-variable
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»