[译] 如何导出的Sass变量JavaScript与Next.js

HuskyYellow
815 阅读6分钟

使用 Sass 构建 web 应用程序可以帮助你获得 CSS 的超能力，但它是另一个工具，你通常需要在JavaScript 之外管理另一组配置和设置。我们怎样才能让 Sass 和 Next.js 的 JavaScript 应用都运行得很好，这样我们只需要在一个地方定义这些配置?

什么是 Sass 变量?

首先，Sass 是一个 CSS 扩展，它让你能够在 CSS 上使用一堆通常不可用的特性。 我个人最喜欢的一些代码包括嵌套、内置颜色函数和 mixins，它们基本上允许你定义 CSS 的可重复块。

但是变量也是 Sass 的另一个很棒的特性。

$my-color: blueviolet;

.my-class {
  color: $my-color;
}

虽然 CSS 现在有自定义属性，但在 Sass 中仍然有一个维护变量的大用例，特别是当你在项目中使用 Sass 时。

为什么我们要在 JavaScript 和 Next.js 中使用 Sass 变量?

在获得 Sass 生态系统时，你通常会在该生态系统中保留所有设置和颜色，以便你可以轻松地在所有样式中共享它们。

部分问题是有时你需要在 JavaScript 中引用这些颜色，无论是仅将颜色作为传入的导入组件，还是你正在执行一些需要 JavaScript 动态的自定义样式。

无论哪种方式，如果不共享变量，你就不得不在两个位置维护这些变量。

我们要构造什么?

为了学习如何在 Sass 和 JavaScript 之间共享变量，我们将使用 Create Next App 启动一个快速的 Next.js 应用程序。

准备好后，我们将安装 Sass 并创建一些变量，我们将能够使用这些变量进行测试。

最后，我们将看到如何导出我们的 Sass 变量并在我们的 JavaScript 中直接使用它们，包括将它们与 React 组件库一起使用。

注意：感谢 Phat 找到此特性并在Next.js WordPress Starter中实现！

第 1 步：使用 Create Next App 创建一个新的 Next.js 应用程序

我们将使用 Create Next app 创建一个新的Next.js应用程序。

在你的终端里面, 运行:

yarn create next-app my-sass-variables
# or
npx create-next-app my-sass-variables

注意：随意使用与 my-sass-variables 不同的值作为您的项目名称！

安装完成后，进入项目文件夹并启动服务：

cd my-sass-variables

yarn dev
# or
npm run dev

加载后，你现在应该可以在 http://localhost:3000 上打开你的新应用程序！

新的 Next.js 应用

第 2 步：在 Next.js 中安装和配置 Sass

为了创建和使用我们的变量，我们需要首先安装 Sass。

在我们的终端内，运行以下命令：

yarn add sass
# or
npm install sass

安装后，我们需要更新我们现有的文件，以便我们可以在我们的项目中实际使用 Sass。 我们有两个要更新的现有样式表：

  • styles/globals.css
  • styles/Home.module.css

首先，我们要重命名这些文件，使其文件扩展名为 .scss 而不是 .css。

例如，将下面文件

styles/Home.module.css

改为

styles/Home.module.scss

并且一定要重命名styles/globals.css。

然后我们需要更新导入这些文件的位置。

在 pages/_app.js 中将 CSS 导入更新为：

import '../styles/globals.scss'

在 pages/index.js 中将 CSS 导入更新为：

import styles from '../styles/Home.module.scss'

现在如果你重新加载页面，此时我们应该不会看到任何不同的东西，但是现在我们可以在我们的项目中使用 Sass！

跟随提交!

第 3 步：使用 Sass 变量维护主题色

在Sass中使用变量的一个很好的用例是用于主题或品牌颜色。

Next.js 默认带有的一种固执己见的颜色是用于标题链接的蓝色以及当您将鼠标悬停在任何卡片上时的悬停效果。

将鼠标悬停在 Next.js 应用程序中的“学习”链接上

我们可以将该颜色定义为一个变量，而不是多次定义该颜色，这样我们就可以随时轻松地更改它。

首先，styles让我们在目录内创建一个名为colors.module.scss.

styles/colors.module.scss内添加：

$color-link: #0070f3;

接下来，在 styles/Home.module.scss内部，我们要先导入这个新变量。

在styles/Home.module.scss顶部添加：

@import "./colors.module";

现在我们的新 $color-link 变量在整个文件中可用，所以现在我们可以用我们的变量替换所有这些颜色！

更新对该变量的所有引用以使用该变量，包括将 .title a 选择器更新为：

.title a {
  color: $color-link;

以及各种 .card 状态：

.card:hover,
.card:focus,
.card:active {
  color: $color-link;
  border-color: $color-link;
}

如果我们打开我们的应用程序，我们应该仍然看不到我们的应用程序有什么不同，但是现在如果我们回到我们的styles/colors.module.scss文件并将我们的变量更新为：

$color-link: blueviolet;

我们可以看到，当我们重新加载应用程序时，我们的链接现在都是蓝紫色的！

带有蓝紫链接的 Next.js 应用程序

跟随提交!

第 4 步：导出 Sass 变量并导入到 JavaScript 中

现在我们已经使用了变量并建立了基础，现在我们需要实际导出变量，以便在 JavaScript 中使用它们。

要做到这一点，我们需要打开 styles/colors.module.scss 文件，并在最底部添加:

:export {
  colorLink: $color-link;
}

我们正在做的是创建一个新的导出规则，在里面，我们创建了一个名为 colorLink 的变量它将被赋值给 Sass 变量 $color-link 的值。

我们可以使用colorLink在 JavaScript 中导入了！

现在来测试一下，让我们回到 pages/index.js ，在顶部，让我们首先导入这个变量:

import { colorLink } from '../styles/_colors.module.scss';

通过这一行，我们现在可以访问变量了。

为了测试这一点，让我们将描述代码片段更新为:

<p className={styles.description}>
  Link color is <span style={{ color: colorLink }}>{colorLink}</span>
</p>

现在，如果我们打开我们的应用程序，我们可以看到来自于 Sass 变量内部的链接颜色都被打印在了页面上，而且是正确的颜色!

Next.js 应用程序的描述显示链接颜色为蓝紫色

我们甚至可以通过将其更新为另一种颜色来证明这是有效的，例如在 styles/colors.module.scss文件里更新：

$color-link: darkorange;

当页面重新加载时，我们会看到我们的新颜色！

Next.js 应用程序的描述显示链接颜色为深橙色

跟随提交!

第 5 步：将 Sass 变量传入 React Icons 组件

作为我们现在如何使用导出的颜色的另一个示例，当我们为 React 组件提供选项时，我们可以使用此方法将我们的颜色作为指传递到 React 组件中。

为了测试这一点，让我们安装React Icons：

yarn add react-icons
# or
npm install react-icons

接下来，我们可以导入任何我们想要的图标，我将继续使用我最喜欢的空间主题，然后导入:

import { IoPlanet, IoRocketSharp } from 'react-icons/io5';

提示：React Icons 支持大量可以导入的图标。查看可用的内容：react-icons.github.io/react-icons

然后我们可以在我们的 UI 中添加这些图标：

<p className={styles.description} style={{ fontSize: '4em', marginBottom: 0}}>
  <IoRocketSharp />
  <IoPlanet />
</p>

应用程序中的火箭和行星图标

现在，我们不使用这些作为链接，所以也许我们想要使用不同的颜色。

在 styles/color.module.scss 里面让我们首先添加一个新的颜色变量：

$color-link: blueviolet;
$color-icon: darkturquoise;

:export {
  colorLink: $color-link;
  colorIcon: $color-icon;
}

我们添加了一个 $color-icon 变量设置为 darkturquoise，然后我们将其导出为 colorIcon。

然后，我们可以将该新变量添加到 pages/index.js 中的导入中：

import { colorLink, colorIcon } from '../styles/colors.module.scss';

最后，我们可以更新我们的图标，使用这些颜色：

<p className={styles.description} style={{ fontSize: '4em', marginBottom: 0}}>
  <IoRocketSharp color={colorIcon} />
  <IoPlanet color={colorIcon} />
</p>

一旦我们重新加载浏览器，我们现在可以看到我们的图标与我们更新的 colorIcon 颜色!

深绿松石色的火箭和行星图标

虽然这是一个简单的例子，但它展示了我们如何在Sass和JavaScript之间保持颜色管理的一致性，无论我们是在复杂的图表中使用它们，每个图表都需要单独的颜色，还是像 Chakra 这样的组件系统，它将把颜色作为它的 主题 的一部分!

跟随提交!

我们接下来可以做什么？

将颜色作为“系统”进行管理

虽然我们只设置了两个颜色变量示例，但创建一个将在整个项目中使用的颜色系统最有帮助

努力构建一个系统，颜色可以很好地协同工作，并根据 JavaScript 特定用途的需要导出它们。

导出比颜色更多的变量

我们可以使用相同的方法将其他变量从Sass导出到JavaScript中。

例如，如果我们正在创建一个响应式web应用程序，它需要在不同的断点上进行动态更改，我们可以将这些断点定义为Sass变量，允许我们在媒体查询中使用它们，以及导入它们，就像我们的颜色在React中更复杂的工作!

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

avatar
文章
阅读
粉丝