sfc-css-features (#174)

Author: mostafa-nematpour

src/api/sfc-css-features.md

@@ -1,8 +1,8 @@
-# SFC CSS Features {#sfc-css-features}
+# ویژگی‌های CSS در SFC {#sfc-css-features}
 
-## Scoped CSS {#scoped-css}
+## CSS دارای اسکوپ {#scoped-css}
 
-When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:
+وقتی یک تگ `<style>` دارای اتریبیوت `scoped` باشد، CSS نوشته شده در آن تنها بر عناصر کامپوننت فعلی اعمال می‌شود. این شبیه به کپسوله‌سازی استایل در Shadow DOM است، اما نیازی به پلی‌فیل ندارد. این کار با استفاده از PostCSS برای تبدیل موارد زیر:
 
 ```vue
 <style scoped>
@@ -16,7 +16,7 @@ When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements
 </template>
 ```
 
-Into the following:
+به موارد زیر:
 
 ```vue
 <style>
@@ -30,13 +30,13 @@ Into the following:
 </template>
 ```
 
-### Child Component Root Elements {#child-component-root-elements}
+### المنت ریشه کامپوننت فرزند {#child-component-root-elements}
 
-With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
+با `scoped`، استایل‌های کامپوننت والد به کامپوننت‌های فرزند نشت پیدا نمی‌کنند. با این حال، المنت ریشه کامپوننت فرزند تحت تأثیر هر دو CSS دارای scope والد و فرزند قرار می‌گیرد. به طور عمد برای این طراحی شده است که والد بتواند عنصر ریشه فرزند را برای اهداف چیدمان، استایل بدهد.
 
-### Deep Selectors {#deep-selectors}
+### انتخابگرهای عمیق {#deep-selectors}
 
-If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` pseudo-class:
+اگر می‌خواهید یک سلکتور در استایل‌های `scoped` اصطلاحا "deep" باشد، یعنی کامپوننت‌های فرزند را تحت تأثیر قرار دهد، می‌توانید از شبه‌کلاس ‍`‎:deep()‎`‍ استفاده کنید:
 
 ```vue
 <style scoped>
@@ -46,21 +46,21 @@ If you want a selector in `scoped` styles to be "deep", i.e. affecting child com
 </style>
 ```
 
-The above will be compiled into:
+مورد فوق به صورت زیر کامپایل می‌شود:
 
 ```css
 .a[data-v-f3f3eg9] .b {
   /* ... */
 }
 ```
 
-:::tip
-DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
+:::tip نکته
+محتوای DOM ایجاد شده با ‍`v-html`‍ تحت تأثیر استایل‌های دارای scope قرار نمی‌گیرند، اما همچنان می‌توانید آن‌ها را با استفاده از deep selectors استایل دهید.
 :::
 
-### Slotted Selectors {#slotted-selectors}
+### انتخابگرهای Slotted {#slotted-selectors}
 
-By default, scoped styles do not affect contents rendered by `<slot/>`, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class:
+به طور پیش‌فرض، استایل‌های دارای scope بر محتوای رندر شده توسط ‍`‎<slot/>‎`‍ تأثیر نمی‌گذارند، زیرا آن‌ها متعلق به کامپوننت والدی در نظر گرفته می‌شوند که آن‌ها را ارسال کرده است. برای هدف قرار دادن صریح محتوای اسلات، از شبه‌کلاس ‍`‎:slotted`‍ استفاده کنید:
 
 ```vue
 <style scoped>
@@ -70,9 +70,9 @@ By default, scoped styles do not affect contents rendered by `<slot/>`, as they
 </style>
 ```
 
-### Global Selectors {#global-selectors}
+### انتخابگرهای سراسری {#global-selectors}
 
-If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `<style>` (see below):
+اگر می‌خواهید فقط یک قاعده به صورت سراسری اعمال شود، می‌توانید از شبه‌کلاس ‍`‎:global`‍ به جای ایجاد یک ‍`<style>`‍ دیگر استفاده کنید (در زیر مشاهده کنید):
 
 ```vue
 <style scoped>
@@ -82,29 +82,29 @@ If you want just one rule to apply globally, you can use the `:global` pseudo-cl
 </style>
 ```
 
-### Mixing Local and Global Styles {#mixing-local-and-global-styles}
+### مخلوط کردن استایل‌های محلی و سراسری {#mixing-local-and-global-styles}
 
-You can also include both scoped and non-scoped styles in the same component:
+همچنین می‌توانید هم استایل‌های دارای scope و هم بدون scope را در یک کامپوننت داشته باشید:
 
 ```vue
 <style>
-/* global styles */
+/* استایل‌های سراسری */
 </style>
 
 <style scoped>
-/* local styles */
+/* استایل‌های محلی */
 </style>
 ```
 
-### Scoped Style Tips {#scoped-style-tips}
+### نکاتی درباره استایل‌های دارای scope {#scoped-style-tips}
 
-- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.
+- **استایل‌های دارای scope نیاز به کلاس‌ها را از بین نمی‌برند**. به دلیل شیوه رندر انواع انتخابگرهای CSS در مرورگرها، `p { color: red }` زمانی که دارای scope است (یعنی وقتی با یک انتخابگر اتریبیوت ترکیب می شود) چندین برابر کندتر خواهد بود. اگر به جای آن از کلاس‌ها یا شناسه‌ها استفاده کنید، مانند `‎.example { color: red }`، آنگاه عملاً آن افت عملکرد را حذف می‌کنید.
 
-- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
+- **هنگام استفاده از انتخابگرهای فرزند در کامپوننت‌های بازگشتی مراقب باشید!** (کامپوننت بازگشتی یک نوع کامپوننت است که در داخل خود، از خود استفاده می‌کند) برای یک قاعده CSS با انتخابگر `‎.a .b`، اگر عنصری که `‎.a` را مچ می‌کند حاوی یک کامپوننت فرزند بازگشتی باشد، آنگاه همه `‎.b` در آن کامپوننت فرزند توسط این قاعده مچ خواهند شد.
 
 ## CSS Modules {#css-modules}
 
-A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$style`:
+یک تگ `<style module>` به عنوان [CSS Modules](https://github.com/css-modules/css-modules) کامپایل می‌شود و کلاس‌های CSS حاصل را به عنوان یک آبجکت تحت کلید `‎$style` در اختیار کامپوننت قرار می‌دهد:
 
 ```vue
 <template>
@@ -118,13 +118,13 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul
 </style>
 ```
 
-The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
+کلاس‌های حاصل هش می‌شوند تا از تداخل جلوگیری شود، که همان اثر کپسوله کردن CSS به کامپوننت فعلی را ایجاد می‌کند.
 
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
+برای جزئیات بیشتر مانند [استثنائات سراسری](https://github.com/css-modules/css-modules#exceptions) و [ترکیب](https://github.com/css-modules/css-modules#composition)، به [CSS Modules spec](https://github.com/css-modules/css-modules) مراجعه کنید.
 
-### Custom Inject Name {#custom-inject-name}
+### سفارشی سازی نام ماژول تزریق شده{#custom-inject-name}
 
-You can customize the property key of the injected classes object by giving the `module` attribute a value:
+می‌توانید نام آبجکتی که کلاس‌های تزریق شده را ارائه می‌دهد را با دادن یک مقدار به اتریبیوت `module` سفارشی کنید:
 
 ```vue
 <template>
@@ -138,24 +138,24 @@ You can customize the property key of the injected classes object by giving the
 </style>
 ```
 
-### Usage with Composition API {#usage-with-composition-api}
+### استفاده با Composition API {#usage-with-composition-api}
 
-The injected classes can be accessed in `setup()` and `<script setup>` via the `useCssModule` API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:
+می‌توان به کلاس‌های تزریق شده در `setup()‎` و `<script setup>` از طریق `useCssModule` دسترسی پیدا کرد. برای بلوک‌های `<style module>` با نام‌های تزریقی سفارشی، `useCssModule` مقدار خاصیت `module` مطابق را به عنوان اولین آرگومان می‌پذیرد:
 
 ```js
 import { useCssModule } from 'vue'
 
-// inside setup() scope...
-// default, returns classes for <style module>
+// setup() در محدوده
+// بازمی‌گرداند <style module> به طور پیش‌فرض، کلاس‌ها را برای
 useCssModule()
 
-// named, returns classes for <style module="classes">
+// بازمی‌گرداند <style module="classes"> برای نامگذاری شده، کلاس‌ها را برای
 useCssModule('classes')
 ```
 
-## `v-bind()` in CSS {#v-bind-in-css}
+## `v-bind()‎` در CSS {#v-bind-in-css}
 
-SFC `<style>` tags support linking CSS values to dynamic component state using the `v-bind` CSS function:
+تگ‌های `<style>` در SFC از لینک کردن مقادیر CSS به state پویای کامپوننت با استفاده از تابع CSS `v-bind` پشتیبانی می‌کنند:
 
 ```vue
 <template>
@@ -179,7 +179,7 @@ export default {
 </style>
 ```
 
-The syntax works with [`<script setup>`](./sfc-script-setup), and supports JavaScript expressions (must be wrapped in quotes):
+سینتکس آن با [`<script setup>`](./sfc-script-setup) کار می‌کند و از عبارات جاوااسکریپت (باید در داخل گیومه قرار گیرند) پشتیبانی می‌کند:
 
 ```vue
 <script setup>
@@ -199,4 +199,4 @@ p {
 </style>
 ```
 
-The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes.
+مقدار واقعی به یک پراپرتی سفارشی CSS، بصورت هش شده تبدیل خواهد شد، بنابراین CSS همچنان استاتیک است. این پراپرتی سفارشی به عنصر ریشه کامپوننت از طریق استایل‌های درون‌خطی اعمال می‌شود و اگر مقدار منبع تغییر کند، به صورت reactive بروزرسانی می‌شود.