Techumber

cssnext: future of css

Github avatar
January 30, 2019.2 min read

Variables

:root { --primary-color: rgb(63, 81, 181); --second-color: rgb(233, 30, 99); } body { background: var(--primary-color); background: color(var(--primary-color) shade(30%)); }

Color Adjustments

div { background: color(var(--primary-color) alpha(-10%)); background: color(var(--primary-color) tint(-10%)); /* lighten */ background: color(var(--primary-color) shade(-10%)); /* darken */ /* Absolute */ background: color(var(--primary-color) alpha(50%)); background: color(var(--primary-color) hue(225)); background: color(var(--primary-color) saturation(100%)); background: color(var(--primary-color) lightness(50%)); background: gray(33); /* rgb(33, 33, 33) */ background: gray(33%); /* rgb(84, 84, 84) */ background: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */ background: #0000ff80; /* rgba(0, 0, 255, 0.5) */ background: hwb(90, 0%, 0%, 0.5); /* like hsl() but easier for humans */ background: hsl(90deg 90% 70%); /* hsl(180, 90%, 70%) -- supports deg */ background: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */ background: rgb(30 60 90 / 30%); /* rgba(30, 60, 90, 0.3) */ }

Mixins

:root { --box-centered: { display: flex; align-items: center; justify-content: center; } } .centered { @apply --box-centered; }

Nesting

.login-form { & .login-btn { ...; } }

Media queries

@custom-media --viewport-medium (width <= 50rem); @media (--viewport-medium) { ··· }

image set

.foo { background-image: image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x, url(my-img-print.png) 600dpi ); }

Pseudo class

p:matches(:first-child, .special) { color: red; } p:not(:first-child, .special) { color: red; } a::before { /* ... */ } [frame='hsides' i] { border-style: solid none; }

Reference


...