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

Question

[alex]

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;
}

Answer 1

[Ivan Bogachev]

или PostCSS

В CSSNext есть такая штука. Синтаксис похож на то, что вы ищете:

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  }
}

.danger {
  @apply --danger-theme;
}

Comments

[lavezzi1]

cssnext deprecated. Теперь https://preset-env.cssdb.org/

[Ivan Bogachev]

lavezzi1, из preset-env эту функциональность выпилили. Тогда уж лучше сказать, что postcss-apply существует сам по себе.

[alex]

Ivan Bogachev, спасибо, то что нужно