CSS isolation در Blazor این امکان را فراهم می کند که Style هایی در محدوده (Scope) یک کامپوننت ایجاد کنیم. این امکان از ۸ امین نسخه از دمو دات نت ۵ در دسترس است. در این قسمت از مجموعه ی آموزش Blazor به بررسی این امکان می پردازیم.

نصب آخرین نسخه از Net 5.

برای استفاده از CSS isolation باید جدید ترین نسخه SDK از Net 5. را از آدرس https://dotnet.microsoft.com/download/dotnet/5.0 دانلود و نصب کنید. در زمان نگارش این مقاله : SDK 5.0.100-preview.8

همچنین بهتر است از آخرین نسخه Visual Studio 2019 (v16.8, Preview 2) استفاده کنید.

ساخت فایل CSS برای کامپوننت Counter

برای استفاده از CSS isolation در هر کامپوننت کافی است فایل CSS جدید همنام با همان کامپوننت ولی با پسوند razor.css. ایجاد کنیم. برای مثال برای کامپوننت Counter فایلی با عنوان Counter.razor.css ایجاد می کنیم:

CSS isolation Blazor

سپس کد زیر را درون آن قرار می دهیم:

h1 {
    color: red
}

p {
    font-size: 95px
}

پس از اجرای برنامه خواهیم دید Style مورد نظر اعمال شده است:

CSS isolation Blazor Wasmهمچنین توجه داشته باشید این Style فقط بر روی این کامپوننت اعمال شده است. برای مثال به تصویر زیر دقیت کنید که همچین استایلی ندارد:

Blazor

به علاوه نیازی به رفرنس دادن به فایل CSS وجود ندارد و موارد لازم از طریق همنام بودن این فایل و کامپوننت مد نظر به صورت خودکار انجام می شود. بنابراین بجای داشتن یک فایل بزرگ CSS می توانیم Style ها را در فایل های جداگانه قرار دهیم. البته این کار باعث می شود نتوانیم از Style ها در چندین کامپوننت استفاده کنیم. (Re Use)

همچنین به دلیل جدا بودن فایل CSS هر کامپوننت، استفاده کمتری از Class Selector خواهیم داشت (و حتی سایر Selector ها).

اگر به سورس صفحه پس از اجرا دقت کنید، خواهید دید، Style به صورت یک Attribute برای تگ مورد نظر ایجاد شده است.

اما یکی از جذاب ترین کاربرد های CSS isolation این است که می توانید از آنها در Razor Class Library هم استفاده کنید. در این صورت، هنگام استفاده از آن نیازی به رفرنس دادن فایل های CSS نیست! 😍

اگر تمایل به استفاده از فایل های SCSS دارید، نگران نباشید! طبق نام گذاری فوق برای مثال Counter.razor.scss می توانید از این نوع فایل هم استفاده کنید. البته باید از Nuget هایی مثل Delegate.SassBuilder استفاده کنید. به این دلیل که در حال حاظر (SDK 5.0.100-preview.8) ابزار پیشفرضی برای این کار وجود ندارد.

 

منابع:

سورس کد در گیت هاب سافت آموز : https://github.com/softamoz/CssIsolationDemoNet5