cssnext

变量

:root {
    --text-color: red;
}

body {
    color: var(--text-color)
}

混合

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

.centered {
    @apply --centered;
}

颜色

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

https://colorme.io/

选择器

1. 嵌套

.class-name {
    & .nesting {...}
    @nest span & {...}
    @media (min-width: 30em) {...}
}

2. 自定义选择器

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

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

3. 未来选择器

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

媒体查询

1. 自定义媒体查询

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

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

2. 媒体查询范围

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

特性

1. 属性后备

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

2. 重置

div {
    all: initial;
}

3. 自动前缀

div {
  display: flex;
}
/*
 * display: -webkit-box;
 * display: -ms-flexbox;
 * display: flex;
 */