Variables, transitions, animations and modern selectors — HTML5 & CSS3 — Semantic Markup to Responsive Layouts

9. Variables, transitions, animations and modern selectors

IntermediateMediumLesson 9 of 11

css

:root { --brand: #3b5bdb; --radius: 12px; --space: 16px; }
.btn { background: var(--brand); border-radius: var(--radius); padding: calc(var(--space) / 2) var(--space);
       transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(0 0 0 / 15%); }

@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }

/* Native nesting and :has() */
.card {
  padding: var(--space);
  & h3 { margin: 0; }
  &:has(img) { padding-top: 0; }
}

Custom properties vs Sass variables: CSS variables are live at runtime (change them with JS or media queries, they inherit and cascade — ideal for theming/dark mode); Sass variables are replaced at compile time.

Hiding things: display: none (removed from layout and accessibility tree), visibility: hidden (keeps space), opacity: 0 (keeps space, still clickable), visually-hidden class (hidden visually, still read by screen readers).