---
title: cssnext
category: JavaScript libraries
---

## Nesting

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

## Variables

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

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

## Colors

Also see [colorme.io](http://colorme.io/).

```css
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) */
}
```

## Mixins

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

.centered {
  @apply --centered;
}
```

## Custom media queries

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

## Media query ranges

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

## Custom selectors

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

:--button { ... }
:--button:--enter { ... }
```

## Property fallbacks

```css
/* 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 */
```

## Reset

```css
div {
  all: initial;
}

/* Sets animation, background, margin, padding, and so on */
```

## Future classes

```css
: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 */
```

## Autoprefixing

```css
div {
  display: flex;
}

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

## References

Based on cssnext 2.9.0. See: <http://cssnext.io/features/>