Learning CSS Properties

CSS Properties

During my education, we dabbled in CSS, experimenting with tools like Styled Components, Tailwind, and SCSS. While we touched on the basics, there was a lack of in-depth exploration into CSS and its potential. Instead, we used SCSS variables and never explored the more recent parts of CSS.

It wasn’t until much later, when I was to implement a toggle between themes for a personal project, that I stumbled upon the power of plain CSS variables. I used them for the theme (since SCSS variables can’t be used in the same way), and soon found other use cases.

For example, creating a simple button with different states

.button {
	padding: 5px 7px;
	background: var(--btn-bg, white);
	color: var(--btn-color, black);
	transition: all 3s;

	&--success {
		--btn-bg: green;
		--btn-color: white;
	}
	
	&--alert {
		--btn-bg: red;
		--btn-color: white;
	}

  &:is(:hover, :focus) {
    --btn-bg: blue;
    --btn-color: white;
  }
}

Can be used for range mapping

.style {
	--i: 0;
	opacity: calc(.2 + var(--i) * 1);

	&--something {
		--i: .5;
	}

	&--something-else {
		--i: 1;
	}
}

Related posts