使用 Sass 设计 React

什么是Sass

Sass 是一个 CSS 预处理器。

Sass 文件在服务器上执行，并将 CSS 发送到浏览器。

您可以在我们的中了解有关 Sass 的更多信息Sass 教程。

我可以使用 Sass 吗？

如果您使用create-react-app在您的项目中，您可以轻松地在 React 项目中安装和使用 Sass。

通过在终端中运行以下命令来安装 Sass：

>npm i sass

现在您已准备好将 Sass 文件包含在您的项目中！

创建一个 Sass 文件

创建 Sass 文件的方式与创建 CSS 文件相同，但 Sass 文件具有文件扩展名.scss

在 Sass 文件中，您可以使用变量和其他 Sass 函数：

示例

我的sass.scss：

创建一个变量来定义文本的颜色：

$myColor: red;

h1 {
  color: $myColor;
}

以与导入 CSS 文件相同的方式导入 Sass 文件：

示例

索引.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

运行示例 »