單文件組件由三個不同的實體組成：模板、腳本和樣式。所有這些都很重要，但后者往往被忽視，盡管它可能會變得復雜，并經(jīng)常導致挫折和錯誤。更好地理解可以改進代碼審查并減少調(diào)試時間。
這里有 7 個小貼士可以幫助你：
-
1.樣式作用域和插槽內(nèi)容
-
2.作用域選擇器性能
-
3.全局樣式
-
4.樣式中的 JAVAscript 變量
-
5.css 模塊
-
6.CSS 與 SCSS 中的變量
-
7.SCSS include 與 extend
1.樣式作用域和插槽內(nèi)容
將樣式的作用域限定為只影響當前組件，是防止組件耦合和意外副作用的有效策略。
它是通過添加 scoped 屬性來轉(zhuǎn)換以下內(nèi)容來實現(xiàn)的：
<template>
<div class="title">Hello world!</div>
</template>
<style scoped>
.title {
font-size: 24px;
}
</style>
to
<template>
<div class="title" data-v-7ba5bd90>Hello world!</div>
</template>
<style scoped>
.title[data-v-7ba5bd90] {
font-size: 24px;
}
</style>
如果想讓樣式影響子組件，可以使用 deep 選擇器。
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
其編譯為：
.a[data-v-7ba5bd90] .b {
/* ... */
}
使用插槽選擇器對插槽內(nèi)的內(nèi)容也是如此。
<style scoped>
:slotted(div) {
color: red;
}
</style>
2.作用域選擇器性能
作用域樣式不會消除對類的需求。由于 CSS 選擇器的工作方式，當使用作用域時，p { color: red } 的速度會慢很多倍。如果使用類來代替，性能方面的影響可以忽略不計。
<!-- DO -->
<template>
<h1 class="title">Hello world!</h1>
</template>
<style scoped>
.title {
font-size: 24px;
}
</style>
<!-- DONT -->
<template>
<h1>Hello world!</h1>
</template>
<style scoped>
h1 {
font-size: 24px;
}
</style>
3.全局樣式
影響整個應用程序的樣式可能不是一個好主意。如果您還是想這么做，可以將作用域樣式與非作用域樣式混合使用，或者使用 :global 偽選擇器
<style scoped>
:global(.red) {
color: red;
}
</style>
4.樣式中的 JavaScript 變量
自 Vue 3.2 版起，可以在樣式標簽內(nèi)使用 v-bind。這可以帶來一些有趣的用例，比如只需幾行代碼就能實現(xiàn)顏色選擇器。
<template>
<h1 class="text">Hello World!</h1>
<input type="color" v-model="color" />
</template>
<script setup>
import { ref } from "vue";
const color = ref("");
</script>
<style>
.text {
color: v-bind(color);
}
</style>
一個更高級的用例是使可重用應用程序圖標組件的圖標大小動態(tài)化。
<template>
<p>
<input type="radio" v-model="size" :value="sizes.s" />S
<input type="radio" v-model="size" :value="sizes.m" />M
<input type="radio" v-model="size" :value="sizes.l" />L
<input
type="radio"
v-model="size"
:value="sizes.xl"
/>XL
</p>
<div class="icon" />
</template>
<script setup lang="ts">
import { ref } from "vue";
enum sizes {
s = 8,
m = 16,
l = 32,
xl = 64,
}
const size = ref(sizes.xl);
</script>
<style>
.icon {
width: v-bind(size + "px");
height: v-bind(size + "px");
background: #cecece;
}
</style>
5.CSS 模塊
只需在樣式標簽中添加 module 屬性，即可立即支持 CSS 模塊。這些類會通過 $style 變量自動顯示在模板中。
<template>
<p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
color: red;
}
</style>
6.CSS 與 SCSS 中的變量
SCSS 變量是我們編寫 CSS 方式的一次重大變革。在使用預處理器之前，使用變量是不可能的。此后，CSS 迎頭趕上，現(xiàn)在所有主流瀏覽器都支持 CSS 變量。CSS 變量提供了 SCSS 變量所能做到的一切，此外還提供了更簡便的主題功能，因此在這場爭論中，CSS 變量明顯勝出。
7.SCSS include 與 extend
這兩個 SCSS 助手經(jīng)常會引起混淆，因為它們都可以用來減少 SCSS 代碼的重復。CSS 輸出中存在一些細微的差別，您應該注意。
@include 幫助程序用于包含在 mixin 塊中編寫的代碼。
<template>
<p class="error-text">Hello World!</p>
<p class="error-notification">Hello World!</p>
</template>
<style lang="scss">
@mixin error {
color: red;
}
.error-text {
@include error;
font-size: 24px;
}
.error-notification {
@include error;
border: 1px solid red;
padding: 8px;
}
</style>
生成的 CSS 將根據(jù)需要多次重復代碼
.error-text {
color: red;
font-size: 24px;
}
.error-notification {
color: red;
border: 1px solid red;
padding: 8px;
}
?這里的
errormixin 只有一條規(guī)則，但在實際應用中通常會有更復雜的 mixin。
另一方面，當元素幾乎相同時 @extend 更有用。
<template>
<p class="error-text">Hello World!</p>
<p class="error-notification">Hello World!</p>
</template>
<style lang="scss">
%error {
color: red;
}
.error-text {
@extend %error;
font-size: 24px;
}
.error-notification {
@extend %error;
border: 1px solid red;
padding: 8px;
}
</style>
生成的代碼為：
.error-notification,
.error-text {
color: red;
}
.error-text {
font-size: 24px;
}
.error-notification {
border: 1px solid red;
padding: 8px;
}
這里的一般規(guī)則是選擇 extend，除非你想在 mixin 中使用一個參數(shù)，在這種情況下，只有 include 才有效。
