[Malleys]

<div class="sos">CSS is awesome. I &hearts; JS</div>
<input class="sos" id="my-field" type="text" autofocus placeholder="Введи stop, start...">
<style>
	.sos {
		--x-color: var(--color, black);
		padding: 1em;
		margin: 1em;
		border-radius: .4em;
		font-weight: bold;
		outline: 0;
		border: .2em solid var(--x-color);
		color: var(--x-color);
		transition: 1s;
	}
	
	.sos:hover {
		box-shadow: inset 0 0 0 3em var(--x-color);
		color: white;
	}
	
	.sos.start {
		--color: #52cc11;
	}
	
	.sos.stop {
		--color: #cc112e;
	}
	
	.sos.status {
		--color: #11cc92;
	}
	
	.sos.error {
		--color: #c4bfb1;
	}
</style>
<script>
{
	let classNamesRE = /^(start|stop|status)$/;
	let input = document.getElementById("my-field");
	let div = document.querySelector(".sos");
	
	let onInputHandler = event => {
		let match = event.target.value.match(classNamesRE);

		if(!match) match = ["", "error"];

		event.target.className = div.className = ["sos", match[1]].join(" "); 
	};

	input.addEventListener("input", onInputHandler);
};
</script>

Для изменения цвета используются пользовательские CSS-свойства, которые позволяют значительно сократить код. Этот пример использует переменные таким образом, которым вы не можете действительно сделать с Sass.