cssnext.md

   1 ---
   2 title: cssnext
   3 category: CSS
   4 layout: 2017/sheet
   5 updated: 2017-10-30
   6 tags: [Featurable]
   7 weight: -3
   8 ---
   9
  10 ### Variables
  11
  12 ```scss
  13 :root {
  14   --text-color: #30333a;
  15 }
  16 ```
  17
  18 ```scss
  19 body {
  20   background: var(--text-color);
  21   background: color(var(--text-color) shade(30%));
  22 }
  23 ```
  24
  25 ### Colors
  26
  27 ```scss
  28 a {
  29   /* Adjustments */
  30   color: color(red alpha(-10%));
  31   color: color(red tint(-10%));    /* lighten */
  32   color: color(red shade(-10%));   /* darken */
  33
  34   /* Absolute */
  35   color: color(red alpha(50%));
  36   color: color(red hue(225));
  37   color: color(red saturation(100%));
  38   color: color(red lightness(50%));
  39
  40   color: gray(33);       /* rgb(33, 33, 33) */
  41   color: gray(33%);      /* rgb(84, 84, 84) */
  42   color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
  43   color: #0000ff80;      /* rgba(0, 0, 255, 0.5) */
  44
  45   color: hwb(90, 0%, 0%, 0.5);     /* like hsl() but easier for humans */
  46   color: hsl(90deg 90% 70%);       /* hsl(180, 90%, 70%) -- supports deg */
  47   color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
  48   color: rgb(30 60 90 / 30%);      /* rgba(30, 60, 90, 0.3) */
  49 }
  50 ```
  51
  52 Also see [colorme.io](http://colorme.io/).
  53
  54 ### Mixins
  55
  56 ```scss
  57 :root {
  58   --centered: {
  59     display: flex;
  60     align-items: center;
  61     justify-content: center;
  62   };
  63 }
  64
  65 .centered {
  66   @apply --centered;
  67 }
  68 ```
  69
  70 Selectors
  71 ---------
  72
  73 ### Nesting
  74
  75 ```scss
  76 .class-name {
  77   & .nesting { ··· }      /* direct nesting starts with & */
  78   @nest span & { ··· }    /* complex nesting */
  79   @media (min-width: 30em) { ··· }
  80 }
  81 ```
  82
  83 ### Custom selectors
  84
  85 ```scss
  86 @custom-selector :--button input[type='submit'], input[type='button'];
  87 @custom-selector :--enter :hover, :focus;
  88 ```
  89
  90 ```scss
  91 :--button { ··· }
  92 :--button:--enter { ··· }
  93 ```
  94 {: .-setup}
  95
  96 ### Future selectors
  97
  98 ```scss
  99 :any-link { ··· }         /* :link, :visited */
 100 p:matches(.a, .b) { ··· } /* p.a, p.b */
 101 p:not(.a, .b) { ··· }     /* p:not(.a), p:not(.b) */
 102 a::before { ··· }         /* a:before -- for IE compatibility */
 103 [frame=hsides i] { ··· }  /* [frame=hsides] -- but case insensitive */
 104 ```
 105
 106 Media queries
 107 -------------
 108
 109 ### Custom media queries
 110
 111 ```scss
 112 @custom-media --viewport-medium (width <= 50rem);
 113 ```
 114
 115 ```scss
 116 @media (--viewport-medium) { ··· }
 117 ```
 118
 119 ### Media query ranges
 120
 121 ```scss
 122 @media (width >= 500px) { ··· }    /* (min-width: 500px) */
 123 ```
 124
 125 Properties
 126 ----------
 127
 128 ### Property fallbacks
 129
 130 ```scss
 131 /* font-feature-settings fallback */
 132 h2 { font-variant-caps: small-caps; }
 133 table { font-variant-numeric: lining-nums; }
 134 ```
 135
 136 ```scss
 137 div { filter: blur(4px); }          /* svg filter fallback */
 138 div { overflow-wrap: break-word; }  /* word-wrap fallback */
 139 ```
 140
 141 ### Autoprefixing
 142
 143 ```scss
 144 div {
 145   display: flex;
 146 }
 147 ```
 148
 149 ```scss
 150 /*
 151  * display: -webkit-box;
 152  * display: -ms-flexbox;
 153  * display: flex;
 154  */
 155 ```
 156
 157 ### Reset
 158
 159 ```scss
 160 div {
 161   all: initial;
 162 }
 163 ```
 164
 165 Sets animation, background, margin, padding, and so on.
 166
 167 ## References
 168 {: .-one-column}
 169
 170 - Based on cssnext 2.9.0.
 171 - <http://cssnext.io/features/>