Techumber

cssnext: future of css

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

css

...