如何在React JS中使用Sass实现CSS中的变量简介 React是目前最流行的JavaScript框架。根据Wap

简介

React是目前最流行的JavaScript框架。根据Wappalyzer的数据，React在JavaScript框架技术中占据了34.1%的市场份额。它有一个简单的学习路径，你可以在JavaScript之后学习它。

Sass是CSS的扩展，功能更强大。使用Sass，你可以实现变量、函数、嵌套和其他很棒的功能。

这是 "用Sass制作令人敬畏的样式表 "系列的第一部分。我们还有许多其他的文章在酝酿中，如暗/亮主题，加载骨架，以及其他使用Sass的文章。你可以在Twitter上关注我(@surajondev)，以便更早地得到未来文章的通知。

我们将通过在ReactJS中安装和使用Sass变量来合并这两种技术。

所以让我们开始吧。

我们需要预先安装NodeJS。NodeJS是一个运行时的JavaScript。这些将有利于运行安装React和Sass的命令。

在你的机器上安装Nodejs后，现在你可以安装React。运行下面的命令来安装React。

命令：

npm create-react-app react-sass

react-sass 将是你的项目的名称。下载后，删除所有不必要的文件和代码。

现在，是时候安装我们项目的超级英雄了，即Sass。确保你在react-sass 目录下，并运行以下命令。

命令：

npm install sass

安装成功后，你将能够在package.json 的依赖属性下看到sass 。

创建一个样式表文件，名称为style.scss 。SCSS是Syntactically Awesome Style Sheet的缩写，是CSS的超集。Sass使用这个文件扩展名来实现它。

对于变量的声明，你只需要在变量的名字前加上$ ，然后再加上变量的名字：

$primary-color: #2C372A

在文件的任何地方使用这个变量，其名称为$primary-color

在一起，它将看起来像这样：

$primary-color:#33D199;

.App {
  font-family: sans-serif;
  text-align: center;
  background-color: $primary-color;
}

通过在组件中导入文件来使用这个样式表。你可以通过import命令来完成这个任务。

import "./style.scss";

你可以在这里的codesandbox中看到这个项目的实时工作。

我希望，这篇文章能帮助你了解Sass及其功能，以及React应用程序的安装指南。请在Twitter上关注我(@surajondev)，以获取未来的更新。

谢谢你阅读这篇博文。