main.css 中的 Sass 变量和 css 样式

Question

其实我想了解一些关于sass的具体知识，因为我对sass一无所知。问题是。我是否必须将 scss 文件与我正在工作或正在编写样式的不同 css 文件链接，并将其添加为另一个 css 源。

我问这个愚蠢的问题，因为我已经以一种愚蠢的方式尝试使用 Bootstrap 5.3.2 上给出的 sass 变量，但是我失败了，因为我将 sass 文件链接到我的 main.css 并且当我编译 sass 文件时我的 main.css 文件被覆盖，我不知道为什么会发生这种情况。所以我想知道是否有办法将 css 自己的样式与 sass 变量混合。如果我没有足够的能力在这里提问，请原谅。谢谢你，美好的一天。

Answer 1

第1步：安装Live Sass编译器 首先，启动 Visual Studio Code。加载后，转到左侧面板并选择扩展选项卡。

1 VS Code 中的“扩展”选项卡 在搜索栏中，搜索“Live Sass Compiler”并安装它。此扩展帮助我们将 Sass 文件 - .scss（或 .sass） - 编译为 .css 文件。

第2步：设置保存位置 现在更改文件路径，以便将 Sass 编译到 styles 文件夹中。

为此，您需要更改 settings.json 文件。

在 VS Code 中，转到文件 > 首选项 > 设置。现在搜索 live sasscompile 来更改全局设置。

单击编辑settings.json。

现在，在前几行，您可以看到以下代码：

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/"
    }
  ],

Change "savePath": "/" to "savePath": "/styles", so it now looks like this:

{
  "liveSassCompile.settings.formats":[
    {
      "format": "expanded",
      "extensionName":".css",
      "savePath":"/styles",
    },

// You can also use this minified extension for production, as it reduces the file size



 {
      "format": "compressed",
      "extensionName":".min.css",
      "savePath":"/styles",
    }
  ],

第3步：编译Sass 现在，保存设置后，返回 Sass 文件，然后单击窗口最底部的“Watch Sass”按钮。

点击“观看 Sass” 单击按钮后，会在 styles 文件夹中创建两个文件：.css 和 .css.map。

但是，您不应该更改其中任何一个。因为它已经帮助您在每次保存新样式时将 Sass 编译为 CSS。

第4步：链接CSS文件 然后，链接 index.html 中的 CSS 文件。在我们的例子中：

现在在浏览器中运行该文件。