概述

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 編譯器允許您使用幾乎任何前端模板語言風(fēng)格。在 Vue 模板中啟用這些表現(xiàn)力庫插件的最簡單方法是在初始化項目時安裝它們，或使用 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 組件中使用樣式標(biāo)簽時，只要安裝了特定的語言插件，就可以使用 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 預(yù)處理器，首先需要執(zhí)行以下命令將 stylus 軟件包作為依賴關(guān)系安裝到項目中：

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:

然后，就可以在樣式標(biāo)簽中添加 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 屬性對樣式進行定義。這是一種有用的方法，可用于創(chuàng)建孤立的、特定于組件的 CSS 樣式。根據(jù) CSS 的特定性規(guī)則，它還可以覆蓋任何其他 CSS 全局規(guī)則。

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.

不建議對全局樣式設(shè)置范圍。定義全局樣式的常用方法是將這些樣式分離到另一個樣式表中，然后導(dǎo)入到 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.

現(xiàn)在，讓我們練習(xí)導(dǎo)入 SCSS（CSS 的預(yù)處理器插件）到應(yīng)用程序中，并通過下面的練習(xí)編寫一些范圍樣式。

練習(xí)：使用SCSS

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

在本練習(xí)中，我們將利用樣式標(biāo)簽為組件添加 SCSS 預(yù)處理樣式，并導(dǎo)入外部樣式表。

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。讓我們繼續(xù)練習(xí)插值法：

<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 軟件包添加為項目依賴關(guān)系：

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:

在樣式標(biāo)簽中添加 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/ 目錄下創(chuàng)建一個名為 styles 的文件夾。在這個新文件夾中，創(chuàng)建一個名為 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 中，為組件中的模板添加一些樣式，例如定義顏色變量（綠色、灰色和藍色），以便在相關(guān) CSS 規(guī)則的不同區(qū)域重復(fù)使用，以及為 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 中，您可以使用標(biāo)準(zhǔn) 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> 元素內(nèi)的每個 <li> 元素進行樣式設(shè)置。同樣，使用加號 (+) 表示，如果第一個元素之后的元素符合條件，那么這些元素就會被樣式化。例如，h1 + h2 表示 h1 之后的所有 h2 元素都將以某種方式進行樣式調(diào)整，但 h3 則不會。通過下面的示例，您可以更好地理解這一點。

In CSS, you would present this code as follows:

在 CSS 中，您可以使用如下代碼來呈現(xiàn)這段代碼：

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 方法導(dǎo)入這些樣式：

<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> 標(biāo)簽中添加作用域?qū)傩裕员銉H將這些樣式應(yīng)用于該組件實例。使用從 $color-blue 導(dǎo)入的樣式表中的變量：

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

到此這篇關(guān)于在Vue3中使用SCSS編寫樣式的文章就介紹到這了,更多相關(guān)Vue3編寫樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論