potapchino
@potapchino

«Миксины» в CSS?

Hola!

Подскажите, возможно ли реализовать что-то подобное на css и/или postcss? Возможно есть какой-нибудь плагин?

// input
:root {
	--custom-placeholder: {
		color: #444;
		opacity: .3;
		font-weight: 700;
	}
	--dark-input: {
		background-color: #444;
		box-shadow: 0 0 0 6px black;
	}
}

input.text {
	--use: var(--dark-input);
}

input.text:-moz-placeholder,
input.text::-moz-placeholder,
input.text::-webkit-input-placeholder,
input.text:-ms-input-placeholder {
	font-family: Arial;
	border: 1px solid red;
	--use: var(--custom-placeholder);
}


// output
input.text {
	background-color: #444;
	box-shadow: 0 0 0 6px black;
}

input.text:-moz-placeholder,
input.text::-moz-placeholder,
input.text::-webkit-input-placeholder,
input.text:-ms-input-placeholder {
  font-family: Arial;
  border: 1px solid red;
  color: #444;
  opacity: .3;
  font-weight: 700;
}
  • Вопрос задан
  • 907 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
или PostCSS


В CSSNext есть такая штука. Синтаксис похож на то, что вы ищете:
:root {
  --danger-theme: {
    color: white;
    background-color: red;
  }
}

.danger {
  @apply --danger-theme;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы