как использовать CSS переменную, которая имеет несколько свойств - PullRequest
Новая
       20

как использовать CSS переменную, которая имеет несколько свойств

1 голос
/ 23 апреля 2020

В настоящее время я работаю над проектом реагирования, который использует DSM invision для дизайна пользовательского интерфейса, в основном DSM предоставляет файл css '_style-params', который содержит переменные стиля. 

--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;

для этого Вид легко понять и использовать, я могу просто импортировать файл css в мой основной файл css и написать: 

background-color:var(--color-primary);

Однако, когда дело доходит до шрифта, у меня возникает вопрос: ниже от _style-params. css: 

/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;

--font-button-fonts-default-5-warning: {
  font-size: var(--font-button-fonts-default-5-warning-font-size);
  line-height: var(--font-button-fonts-default-5-warning-line-height);
  text-align: var(--font-button-fonts-default-5-warning-text-align);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  font-style: var(--font-button-fonts-default-5-warning-font-style);
  font-weight: var(--font-button-fonts-default-5-warning-font-weight);
  font-family: var(--font-button-fonts-default-5-warning-font-family);
};

Могу ли я просто использовать следующую переменную (которая является объектом) 

var(--font-button-fonts-default-5-warning)

Я не знаю, какое свойство использовать эту переменную , я попробовал следующее: 

font:var(--font-button-fonts-default-5-warning)

, который не работает (очевидно). Итак, могу ли я использовать этот объект CSS переменная? или я должен использовать отдельные переменные?

1 Ответ

0 голосов
/ 23 апреля 2020

В CSS переменных отсутствует понятие объекта. Вам нужно использовать их по отдельности, но вы также можете объединить их в той же переменной, которую сможете использовать позже, опираясь на краткую запись свойств.

Пример: 

:root {
/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 30px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: "Roboto";

--font-button-fonts-default-5-warning:  
    var(--font-button-fonts-default-5-warning-font-style)
    var(--font-button-fonts-default-5-warning-font-weight)
    var(--font-button-fonts-default-5-warning-font-size)/
    var(--font-button-fonts-default-5-warning-line-height)
    var(--font-button-fonts-default-5-warning-font-family);
}
.warning {
  font:var(--font-button-fonts-default-5-warning);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  text-align:var(--font-button-fonts-default-5-warning-text-align);
}
<p>text here</p>
<p class="warning">text here</p>

Мы можем использовать почти все значения внутри шрифта, но не color, letter-spacing и text-align, которые вам нужны, по отдельности.

...