### Variables

    :root {
      --text-color: #30333a;
    }

    body {
      background: var(--text-color);
      background: color(var(--text-color) shade(30%));
    }

### Colors

    a {
      /* Adjustments */
      color: color(red alpha(-10%));
      color: color(red tint(-10%));    /* lighten */
      color: color(red shade(-10%));   /* darken */

      /* Absolute */
      color: color(red alpha(50%));
      color: color(red hue(225));
      color: color(red saturation(100%));
      color: color(red lightness(50%));

      color: gray(33);       /* rgb(33, 33, 33) */
      color: gray(33%);      /* rgb(84, 84, 84) */
      color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
      color: #0000ff80;      /* rgba(0, 0, 255, 0.5) */

      color: hwb(90, 0%, 0%, 0.5);     /* like hsl() but easier for humans */
      color: hsl(90deg 90% 70%);       /* hsl(180, 90%, 70%) -- supports deg */
      color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
      color: rgb(30 60 90 / 30%);      /* rgba(30, 60, 90, 0.3) */
    }

Also see colorme.io.

### Mixins

    :root {
      --centered: {
        display: flex;
        align-items: center;
        justify-content: center;
      };
    }

    .centered {
      @apply --centered;
    }

## Selectors

### Nesting

    .class-name {
      & .nesting { ··· }      /* direct nesting starts with & */
      @nest span & { ··· }    /* complex nesting */
      @media (min-width: 30em) { ··· }
    }

### Custom selectors

    @custom-selector :--button input[type='submit'], input[type='button'];
    @custom-selector :--enter :hover, :focus;

    :--button { ··· }
    :--button:--enter { ··· }

### Future selectors

    :any-link { ··· }         /* :link, :visited */
    p:matches(.a, .b) { ··· } /* p.a, p.b */
    p:not(.a, .b) { ··· }     /* p:not(.a), p:not(.b) */
    a::before { ··· }         /* a:before -- for IE compatibility */
    [frame=hsides i] { ··· }  /* [frame=hsides] -- but case insensitive */

## Media queries

### Custom media queries

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

    @media (--viewport-medium) { ··· }

### Media query ranges

    @media (width >= 500px) { ··· }    /* (min-width: 500px) */

## Properties

### Property fallbacks

    /* font-feature-settings fallback */
    h2 { font-variant-caps: small-caps; }
    table { font-variant-numeric: lining-nums; }

    div { filter: blur(4px); }          /* svg filter fallback */
    div { overflow-wrap: break-word; }  /* word-wrap fallback */

### Autoprefixing

    div {
      display: flex;
    }

    /*
     * display: -webkit-box;
     * display: -ms-flexbox;
     * display: flex;
     */

### Reset

    div {
      all: initial;
    }

Sets animation, background, margin, padding, and so on.

## References

- Based on cssnext 2.9.0.
- http://cssnext.io/features/

0 Comments for this cheatsheet. Write yours!