如何在React Native中使用Sass

Sass是 "Syntactically Awesome Style Sheets "的缩写，是一个预处理器，可以帮助你编写、结构和组织CSS代码。今天，它被广泛用于替代大型网络应用的原始CSS样式。

事实上，许多现代CSS框架和库，如Bootstrap，也是用Sass编写的。它允许开发者在他们的CSS样式中使用变量、混合器、模块、参数和操作符。

虽然Sass通常与React等前端框架结合在一起，但你也可以在React Native项目中使用它。在本指南中，我将指导你如何在你的React Native应用程序中配置和使用Sass，但首先，让我们了解Sass是如何工作的。

Sass是如何工作的

Sass只是一个开发时的工具，而不是对CSS标准的扩展。这意味着，当你使用webpack或模块捆绑器来构建你的代码时，它也会编译你的Sass文件。在Web生态系统中，你的Sass文件被保存为.scss ，而不是常规的.css 扩展。SCSS代表 "Sassy CSS"，提供了一个类似于CSS的语法糖。

你也可以在你的Sass文件中编写原始CSS，因为每个有效的CSS也是一个有效的SCSS。然而，反之亦然就不对了。

由于React Native不使用CSS，而是使用样式对象，你的Sass文件也会被转换为React Native的样式对象。

这给了你一个重要的优势，即编写原始CSS来为你的React Native组件样式。你的React Native项目在运行时编译你的Sass文件，并将它们转换为常规的JavaScript对象。

现在你了解了Sass的工作原理，让我们在React Native项目中设置它。为此，我们将使用包 react-native-sass-transformer。

在React Native中设置Sass

react-native-sass-transformer包允许我们在任何类型的React Native项目中轻松配置、设置和使用Sass。它还使用包node-sass 作为依赖，以提供对Sass的Node绑定。

让我们开始创建一个新的React Native项目。

npx react-native init rn-sass-app

你可以通过运行以下命令在你的项目中安装这两个依赖项。

npm install react-native-sass-transformer node-sass

一旦你创建了项目和上述依赖，你需要做一些额外的配置修改。在根目录下，将以下配置添加到你的metro.config.js 文件中。

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

如果你使用Expo CLI，你需要在根目录下明确创建一个metro.config.js 文件。你还需要告诉Expo在项目中加载这些配置，对你的app.json 文件做如下调整。

{
  "expo": {
   ...
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["js", "jsx", "scss", "sass"]
    }
   ...
  }
}

一旦上述变化完成，你就可以在你的Expo CLI或React Native CLI项目中使用Sass。

使用Sass为你的React Native组件设计样式

在项目中，让我们创建一个名为App.scss 的新文件，在这里我们可以为我们的<App/> 组件编写Sass样式。在App.scss 文件中，让我们添加以下样式。

.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #333;
}

上面的样式是用纯CSS写的，但由于我们使用了.scss 扩展，我们的应用程序将能够编译这些样式。请注意，我们使用了一个类选择器.container 来定义我们的样式。

为了在我们的App.js 文件内使用上述样式，我们首先需要导入它们。

import Appstyles from './App.scss';

让我们简单地把Appstyles 对象记录到控制台，看看这些样式是什么样子的。

console.log({Appstyles})

你会注意到，我们的CSS样式已经被编译成了一个普通的JavaScript对象。

Object {
  "Appstyles": Object {
    "container": Object {
      "alignItems": "center",
      "backgroundColor": "#333",
      "display": "flex",
      "flexBasis": 0,
      "flexGrow": 1,
      "flexShrink": 1,
      "justifyContent": "center",
    },
  },
}

我们现在可以像任何常规的React Native样式对象一样在App.js 文件中使用这些样式。

export default function App() {
  return (
    <View style={Appstyles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

以上应该使我们的<App/> 组件看起来像这样。

因此，有了Sass，你甚至可以用纯CSS编写你的样式。现在让我们用SCSS重构我们上面的样式。

在Sass中使用变量

Sass允许我们创建变量来存储信息，我们可以在各种样式块中使用。我们可以使用$ 前缀来创建一个Sass变量。让我们在我们的App.scss 文件内创建以下变量。

$background-color: #333;
$primary-color: #d3d3d3;
$font-large: 20px;

我们可以使用变量来为文本设置不同的字体大小，为我们的容器设置背景颜色，而不是硬编码字体大小和颜色。让我们使用上述变量为<View/> 和<Text/> 组件设置样式。

$background-color: #333;
$primary-color: #d3d3d3;
$font-large: 20px;

.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: $background-color;
  padding: 20px;
}
.text {
  font-weight: 700;
  text-align: center;
  font-size: $font-large;
  color: $primary-color;
}

让我们在我们的App.js 文件中使用上述样式。

export default function App() {
  return (
    <View style={Appstyles.container}>
      <Text style={Appstyles.text}>Open up App.js to start working on your app!</Text>
    </View>
  );
}

现在我们应该看到我们的<Text/> 组件有了不同的样式。

很好!现在让我们看看如何在Sass的不同选择器中使用继承来重用我们的样式。

在Sass中使用继承性

Sass最富有成效的特点之一是，它可以让你在许多选择器中重用一组样式。

就像我们可以为一个样式规则定义变量一样，我们可以使用% 符号定义一个包含一组样式规则的占位符类。然后，我们可以在任何我们想要的地方重复使用这些样式。

为了演示，让我们在我们的App.scss 文件内创建一些更多的变量。

$light: #fff;
$purple: purple;
$blue-violet: blueviolet;
$box-dimension: 100;

现在，让我们定义一个名为box-shared 的占位符类，它有以下样式。

%box-shared {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  border: 1px solid #ccc;
  padding: 10px;
  height: $box-dimension;
  width: $box-dimension;
  margin-bottom: 100px;
}

我们现在可以在不同的选择器中使用我们的box-shared 占位符类里面定义的样式。上面的样式可以作为我们想与任何我们想使用的box 类相关联的一般样式。

例如，假设我们想在屏幕上呈现一个白框。我们可以使用@extend 关键字来继承上述样式，而不是重写上述样式。

.boxWhite {
  @extend %box-shared;
  background-color: $light;
}

上面的.boxWhite 类将包含所有在box-shared 类中定义的样式。让我们渲染一个简单的<View/> 组件来显示上述样式。

export default function App() {
  return (
    <View style={Appstyles.container}>
      <View style={Appstyles.boxWhite}>
      </View>
    </View>
  );
}

现在我们应该在屏幕上看到一个白框，如图所示。

如果我们想添加类似的UI元素，可以重复使用一些常见的样式，我们可以使用extend 或继承。例如，我们可以为更多不同颜色的盒子创建样式，如图所示。

.boxPurple {
  @extend %box-shared;
  background-color: $purple;
}
.boxBlueViolet {
  @extend %box-shared;
  background-color: $blue-violet;
}

然后在我们的组件内使用这些类。

export default function App() {
  return (
    <View style={Appstyles.container}>
      <View style={Appstyles.boxWhite}/>
      <View style={Appstyles.boxPurple}/>
      <View style={Appstyles.boxBlueViolet}/>
    </View>
  );
}

上面应该呈现三个不同颜色的盒子，如图所示。

棒极了在我们总结之前，让我们看看Sass是如何让我们在使用运算符编写样式时进行简单的数学计算的。

在Sass中使用运算符

我们可以使用运算符来动态地计算我们的元素的高度、宽度、padding、margin和其他类似属性。回到App.scss 文件，创建另一个变量。

$box-dimension-lg: 250;

让我们也创建一个extend 类，包含我们的flexbox样式。

%flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

让我们改变我们的box-shared 占位符类的样式，如下所示。

%box-shared {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  border: 1px solid #ccc;
  padding: 10px;
  height: $box-dimension-lg;
  width: $box-dimension-lg;
  margin-bottom: 100px;
  border-radius: 10px;
}

同时，让我们更新我们在上一节中使用的boxWhite 类的样式。

.boxWhite {
  @extend %flex-box;
  @extend %box-shared;
  background-color: $light;
}

如果你注意到了，我们继承了我们的boxWhite 类里面的两个类的样式，这是很好的。

我现在想创建另一个盒子，它的高度和宽度始终是它的父盒子的一半。因为我们要在带有boxWhite 类的白色盒子里面渲染这个盒子，我们可以用$box-dimension-lg 来计算这个盒子的高度和宽度。

.boxInside {
  @extend %box-shared;
  background-color: lightblue;
  height: ($box-dimension-lg/2);
  width: ($box-dimension-lg/2);
}

让我们也在我们的App.js 文件内渲染这个盒子。

export default function App() {
  return (
    <View style={Appstyles.container}>
      <View style={Appstyles.boxWhite}>
        <View style={Appstyles.boxInside}/>
      </View>
    </View>
  );
}

现在我们应该看到一个尺寸为其父方块一半的方块，位于其内部。

你可以使用所有的运算符，如+,-,*,/, 和% 来计算你规则中的数值。

总结

在变量和继承的帮助下，Sass确实可以简化你的CSS样式和规则。它可以帮助你为你的React Native应用程序编写更多简洁的样式。你也可以在你的Web和React Native项目之间轻松地重复使用你的Sass样式。

Sass还提供了其他一些有用的功能，如模块、混合器、函数等。你可以查看官方文档来进一步探索。直到下一次!

The postHow to use Sass in React Nativeappeared first onLogRocket Blog.