10 在Vue3中使用SCSS编写样式

概述

When using Vue components, the Vite compiler allows you to use almost any frontend templating language style. The easiest way to enable these expressive library plugins in your Vue templates is to install them when you initialize your project, or by using npm install (or yarn add) for the package.

使用 Vue 组件时，Vite 编译器允许您使用几乎任何前端模板语言风格。在 Vue 模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们，或使用 npm install（或 yarn add）安装包。

When using the style tag inside of a Vue component, you can specify a language using the lang attribute, provided that you have installed that specific language plugin.

在 Vue 组件中使用样式标签时，只要安装了特定的语言插件，就可以使用 lang 属性指定语言。

For example, if you chose to install the Stylus preprocessor, first you need to install the stylus package in your project as a dependency by performing the following command:

例如，如果您选择安装 Stylus 预处理器，首先需要执行以下命令将 stylus 软件包作为依赖关系安装到项目中：

npm add -D stylus
#OR
yarn add -d stylus

Then, you can add the lang=“stylus” attribute to the style tag to begin using Stylus:

然后，就可以在样式标签中添加 lang=“stylus” 属性，开始使用 Stylus：

<style lang="stylus">
ul
  color: #2c3e50;
  > h2
  color: #22cc33;
</style>

Another benefit of using Vue is scoping the style with the scoped attribute. This is a useful way to create isolated and component-specific CSS stylings. It also overrides any other CSS global rules, according to the CSS rule of specificity.

使用 Vue 的另一个好处是使用 scoped 属性对样式进行定义。这是一种有用的方法，可用于创建孤立的、特定于组件的 CSS 样式。根据 CSS 的特定性规则，它还可以覆盖任何其他 CSS 全局规则。

It is not recommended to scope global styles. A common method for defining global styling is to separate these styles into another style sheet and import them into your App.vue file.

不建议对全局样式设置范围。定义全局样式的常用方法是将这些样式分离到另一个样式表中，然后导入到 App.vue 文件中。

Now, let’s practice importing SCSS, a pre-processor plugin for CSS, to use in your application, and write some scoped stylings with the following exercise.

现在，让我们练习导入 SCSS（CSS 的预处理器插件）到应用程序中，并通过下面的练习编写一些范围样式。

练习：使用SCSS

In this exercise, we will be utilizing the style tag to add SCSS preprocessed styles to a component and importing external stylesheets.

在本练习中，我们将利用样式标签为组件添加 SCSS 预处理样式，并导入外部样式表。

Create a new Vue component file named Exercise1-11.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-11.vue 的 Vue 组件文件。

在App.vue中引入该组件并渲染：

<script setup>
import Exercise from "./components/Exercise1-11.vue";
</script>
<template>
  <Exercise/>
</template>

Inside Exercise1-11.vue, let’s write some HTML that can be styled using SCSS. Let’s keep practicing the interpolation method:

在 Exercise1-11.vue 中，让我们编写一些可以使用 SCSS 定型的 HTML。让我们继续练习插值法：

<template>
  <div>
    <h1>{{ title }}</h1>
    <h2>{{ subtitle }}</h2>
    <ul>
      <li>{{ items[0] }}</li>
      <li>{{ items[1] }}</li>
      <li>{{ items[2] }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'My list component!',
      subtitle: 'Vue JS basics',
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
}
</script>

Add the sass SCSS package as a project dependency:

将 sass SCSS 软件包添加为项目依赖关系：

npm install -D sass

# 或者
npm add -D sass

# 或者
yarn add sass

Add the lang attribute to the style tag and add the scss value to enable SCSS syntax inside the style block:

在样式标签中添加 lang 属性，并添加 scss 值，以便在样式块中启用 SCSS 语法：

<style lang="scss"></style>

Create a folder inside the src/ directory called styles. Inside this new folder, create a file called typography.scss.

在 src/ 目录下创建一个名为 styles 的文件夹。在这个新文件夹中，创建一个名为 typography.scss 的文件。

Inside typography.scss, add some styling for the template you composed in your component, such as defining color variables (green, grey, and blue) to reuse in different areas of related CSS rules, and some CSS styles for h1, h2, and the list elements:

在 typography.scss 中，为组件中的模板添加一些样式，例如定义颜色变量（绿色、灰色和蓝色），以便在相关 CSS 规则的不同区域重复使用，以及为 h1、h2 和列表元素添加一些 CSS 样式：

/* typography.scss */
$color-green: #4fc08d;
$color-grey: #2c3e50;
$color-blue: #003366;
h1 {
  margin-top: 60px;
  text-align: center;
  color: $color-grey;

  + h2 {
    text-align: center;
    color: $color-green;
  }
}

ul {
  display: block;
  margin: 0 auto;
  max-width: 400px;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, 0.25);

  > li {
    color: $color-grey;
    margin-bottom: 4px;
  }
}

In SCSS, you can use standard CSS selectors to select elements in your component.

在 SCSS 中，您可以使用标准 CSS 选择器来选择组件中的元素。

ul > li will select every <li> element inside of an <ul> element for styling. Similarly, using the addition symbol (+) means that the elements placed after the first element will be styled if they match the condition. For example, h1 + h2 will dictate that all h2 elements after h1 will be styled in a certain way, but h3 will not. You can understand this better through the following example.

ul > li 将选择 <ul> 元素内的每个 <li> 元素进行样式设置。同样，使用加号 (+) 表示，如果第一个元素之后的元素符合条件，那么这些元素就会被样式化。例如，h1 + h2 表示 h1 之后的所有 h2 元素都将以某种方式进行样式调整，但 h3 则不会。通过下面的示例，您可以更好地理解这一点。

In CSS, you would present this code as follows:

在 CSS 中，您可以使用如下代码来呈现这段代码：

h1 + h2 {
/* Add styling */
}
ul > li {
/* Add styling */
}

In SCSS, the same code can be represented as follows:

在 SCSS 中，同样的代码可以表示如下：

h1 {
  + h2 {
  // Add styling
  }
}
ul {
  > li {
  // Add styling
  }
}

In your component, import these styles by using the SCSS @import method:

在组件中，使用 SCSS @import 方法导入这些样式：

<style lang="scss">
@import '../styles/typography.scss';
</style>

Add the scoped attribute to your <style> tag to only apply these styles to this component instance. Use the variable from the $color-blue imported stylesheet:

在 <style> 标签中添加作用域属性，以便仅将这些样式应用于该组件实例。使用从 $color-blue 导入的样式表中的变量：

<style lang="scss" scoped>
@import '../styles/typography';
h1 {
  font-size: 50px;
  color: $color-blue; // Use variables from imported stylesheets
}
</style>