stylis 增强的 CSS 语法

Styled Components 采用 stylis 样式预处理库来处理样式定义。stylis 在处理样式时，基本上采用与 SCSS 相同的语法结构，但是添加了一些特殊的语法特性。

与 SCSS 一样，stylis 支持嵌套定义样式。嵌套的选择器会形成层级选择器。操作符 & 可以用来在嵌套时指代父级，从而实现平级选择器以及父级选择器的定义。

stylis 支持大部分 CSS3 伪类，例如 ::before、::after、:not()、:hover等，并且还支持 @media() 媒体查询。stylis 定义了一个特殊的选择器 :global() 可以用来覆盖定义全局样式，例如:global(h1)。

.parent {
  .child {
    /* 这会定义组件中的具有指定class的子组件的样式。 */
    padding: 0 8px;
  }
  &:hover {
    /* 这会定义组件在鼠标悬浮状态时的样式。 */
    color: red;
  }
  & ~ & {
    /* 这会定义当组件作为另一个同名组件的非比邻兄弟组件出现时的样式。 */
    background: green;
  }
  & + & {
    /* 这会定义组件作为另一合同名组件比邻兄弟组件出现时的样式。 */
    background: lime;
  }
  &.actived {
    /* 这会定义组件具有指定class名称时的样式。 */
    padding: 0 16px;
  }
  .disabled & {
    /* 这会定义组件出现在具有指定class名称的组件中时的样式。 */
    background-color: gray;
  }
}

除此之外还可以使用&&来在样式定义中指代当前组件。这可以在根据条件定义组件样式的时候，不使样式被应用在所有同类组件上，而仅应用在当前组件上。