17.CSS 预处理器&Styled-Components

两种常见的 CSS 预处理器

Sass/Scss

Sass: 诞生于 2007 年，最早也是最成熟的一款 CSS 预处理器语言。可以使用常量、变量、函数、混入、函数等功能，最后会编译成合法的 CSS 让浏览器使用。

Sass 和 Scss 的区别

Scss 是 Sass 的子集，他们采用两套语法规则

• 使用缩紧作为分隔符来区分代码块
• 和 CSS 一样采用大括号({})作为分隔符 后一种语法规则称为 SCSS, 在 Sass3 之后的版本都支持这种语法规则。

Less

Less: 2009 年开源，受 Sass 影响较大，但使用 CSS 语法。

语法

因为 Scss 和 Less 用法大同小异，下面只使用 Scss 作为演示

变量（variables）

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

嵌套（nested rules）

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

混合（mixins）

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

函数（functions）

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

具体使用：Sass 函数使用 (opens new window)

Style-Components

前言

Style-Components 是 React 实现 CSS-in-JS 的一种方式，类似的 Vue 中的 scope 也是这个思想。

什么是 CSS-in-JS

简单说：使每个组件都有它的 scopeId，样式进行绑定，避免当项目是多人协作，可能存在的命名冲突问题。

如何使用

yarn add styled-components -D;
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);