🎬 HoRain云小助手：个人主页

 🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

---

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

目录

⛳️ 推荐

专栏介绍

安装 Sass

创建一个 Sass 文件

实例例

my-sass.scss

实例

---

Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器。

Sass 允许你使用 CSS 中尚不存在的特性，比如变量、嵌套规则、混入、函数等等。

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

安装 Sass

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

npm i sass

现在你已经准备好在项目中包含 Sass 文件了！

创建一个 Sass 文件

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

在 Sass 文件中，你可以使用变量和其他 Sass 功能。

实例例

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

my-sass.scss 文件代码：

my-sass.scss

$myColor: red;

h1 {
  color: $myColor;
}

像导入 CSS 文件一样导入 Sass 文件：

实例

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 />);

以上代码中，我们创建了一个 Sass 文件 my-sass.scss，并在其中使用了 Sass 变量 $myColor 来定义 h1 的颜色。然后，我们在 index.js 中像导入普通 CSS 文件一样导入了这个 Sass 文件，并在 Header 组件中使用了这些样式。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙