CSS nye features
/* Math functions */
width: min(90vw, 1200px);
/* clamp(min, preferred, max) */
height: clamp(200px, 50vh, 600px);
padding: calc(2rem + 5vw);
/* Custom properties (variables) */
:root {
--primary: #ffd4eb;
--spacing: 2rem;
}
/* Native nesting */
.card {
background: white;
padding: var(--spacing);
&:hover {
transform: scale(1.05);
}
.title {
font-size: 2rem;
color: var(--primary);
}
}
/* Container queries */
@container (min-width: 400px) {
.card { flex-direction: row; }
}