SFC CSS Özellikleri

SFC CSS Özellikleri

Scoped CSS

Bir `etiketiscoped` niteliğine sahipse, CSS'i yalnızca mevcut bileşenin öğelerine uygulanır. Bu, Shadow DOM'da bulunan stil kapsüllemeye benzerdir. Bazı kısıtlamaları vardır, ancak herhangi bir polifill gerektirmez. Aşağıdakileri dönüştürmek için PostCSS kullanılarak elde edilir:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

Aşağıdaki şekilde dönüştürülür:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

Çocuk Bileşen Kök Öğeleri

scoped ile, üst bileşenin stilleri çocuk bileşenlere sızmaz. Ancak, bir çocuk bileşenin kök düğümü, hem üst bileşenin scoped CSS'sinden hem de çocuğun scoped CSS'sinden etkilenir. Bu, üst bileşenin çocuk kök öğesini düzenleme amaçları için stillendirebilmesi için tasarlanmıştır.

Derin Seçiciler

scoped stillerde bir seçicinin "derin" olmasını, yani çocuk bileşenleri etkilemesini istiyorsanız, :deep() psödo-sınıfını kullanabilirsiniz:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

Yukarıdaki, şu şekilde derlenir:

.a[data-v-f3f3eg9] .b {
  /* ... */
}

ipucu

v-html ile oluşturulan DOM içeriği scoped stillerden etkilenmez, ancak yine de derin seçiciler kullanarak stillendirebilirsiniz.

Slotlu Seçiciler

Varsayılan olarak, scoped stiller `ile render edilen içerikleri etkilemez, çünkü bunlar üst bileşen tarafından sahiplenilen öğeler olarak kabul edilir. Slot içeriğini açıkça hedeflemek için:slotted` psödo-sınıfını kullanın:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

Küresel Seçiciler

Sadece bir kuralın evrensel olarak uygulanmasını istiyorsanız, başka bir `oluşturmaktansa:global` psödo-sınıfını kullanabilirsiniz:

<style scoped>
:global(.red) {
  color: red;
}
</style>

Yerel ve Küresel Stillere Karıştırma

Aynı bileşende hem scoped hem de non-scoped stilleri de dahil edebilirsiniz:

<style>
/* küresel stiller */
</style>

<style scoped>
/* yerel stiller */
</style>

Scoped Stil İpuçları

• Scoped stiller sınıfların ihtiyaçlarını ortadan kaldırmaz. Farklı CSS seçicilerini uygularken tarayıcıların renderlama şekli nedeniyle, p { color: red } scoped olduğunda (yani bir nitelik seçici ile birleştirildiğinde) çok daha yavaş çalışır. Eğer .example { color: red } gibi sınıflar veya id'ler kullanırsanız, bu performans kaybını neredeyse tamamen ortadan kaldırırsınız.

• Yinelenen bileşenlerde torun seçicileri ile dikkatli olun! Seçici için bir CSS kuralı .a .b ise, .a ile eşleşen öğe bir yinelenen çocuk bileşeni içeriyorsa, o çocuk bileşende bulunan tüm .b öğeleri bu kural tarafından eşleşir.

CSS Modülleri

Bir `etiketi [CSS Modülleri](https://github.com/css-modules/css-modules) olarak derlenir ve sonuçta oluşan CSS sınıflarını bileşene$style` anahtarı altında bir nesne olarak sunar:

<template>
  <p :class="$style.red">Bu kırmızı olmalı</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Sonuçta oluşan sınıflar çakışmayı önlemek için hashlenir ve CSS'i yalnızca mevcut bileşene kapsüllemekte aynı etkiyi elde eder.

Daha fazla detay için CSS Modülleri spesifikasyonuna ve küresel istisnalara ve kompozisyona başvurun.

Özel Enjeksiyon Adı

Enjekte edilen sınıflar nesnesinin özellik anahtarını module niteliğine bir değer vererek özelleştirebilirsiniz:

<template>
  <p :class="classes.red">kırmızı</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

Composition API ile Kullanım

Enjekte edilen sınıflar setup() ve içinde `useCssModule` API'si aracılığıyla erişilebilir. Özel enjeksiyon isimleri olan blokları için, useCssModule ilk argüman olarak eşleşen module niteliği değerini kabul eder:

import { useCssModule } from 'vue'

// setup() kapsamı içinde...
// varsayılan, <style module> için sınıfları döndürür
useCssModule()

// adlandırılmış, <style module="classes"> için sınıfları döndürür
useCssModule('classes')

• Örnek

<script setup lang="ts">
import { useCssModule } from 'vue'

const classes = useCssModule()
</script>

<template>
  <p :class="classes.red">kırmızı</p>
</template>

<style module>
.red {
  color: red;
}
</style>

v-bind() CSS'te

SFC `` etiketleri, dinamik bileşen durumuna bağlı CSS değerlerini bağlama desteği sunar:

<template>
  <div class="text">merhaba</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

Sözdizimi `` ile çalışır ve JavaScript ifadelerini destekler (tırnak içine alınmalıdır):

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>merhaba</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

Gerçek değer, hashlenmiş bir CSS özel özelliği olarak derlenecektir, bu yüzden CSS hala statiktir. Özel özellik, bileşenin kök öğesine inline stiller aracılığıyla uygulanacak ve kaynak değer değiştiğinde reaktif olarak güncellenecektir.