خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه استایل دادن به برنامه های Svelte

ارشیا یوسفی ادیب ۳۰ مرداد, ۱۴۰۲ 4 min read

نحوه شروع کار با یک برنامه شیک Svelte را بیاموزید.

چارچوب های وب می آیند و می روند، اما یکی از امیدوارکننده ترین آنها Svelte است. Svelte یک جایگزین عالی برای React است و اگرچه در حال حاضر جامعه بزرگی دارد، اما قطعاً چارچوبی است که باید مراقب آن بود. Svelte با چندین رویکرد در دسترس استایل دادن به برنامه های شما را آسان می کند.

برنامه های Styling Svelte

هر کتابخانه یا چارچوب رابط کاربری به روشی برای استایل دادن به اجزای خود نیاز دارد. اکثر چارچوب‌های مبتنی بر مؤلفه از روش سنتی استایل‌سازی مؤلفه‌ها پشتیبانی می‌کنند: به سادگی فایل CSS را وارد کنید و کارتان تمام شد. Svelte نیز از این قاعده مستثنی نیست. در Svelte، سه راه اصلی برای استایل دادن به برنامه های شما وجود دارد که هر کدام مزایا و معایب خاص خود را دارند.

راه اندازی پروژه Svelte شما

برای نصب Svelte می‌توانید از ابزار ViteJS front-end build استفاده کنید. برای تنظیم موارد، مطمئن شوید که زمان اجرا Node.js و Node Package Manager (NPM) به درستی روی رایانه شما نصب شده باشند. با اجرای دستور زیر می توانید در دسترس بودن Node.js و NPM را تأیید کنید:

node -v

پس از اطمینان از اجرای Node، ترمینال را باز کرده و موارد زیر را اجرا کنید:

npm create vite

یا:

yarn create vite

این باید یک پروژه جدید Vite را تشکیل دهد. نام پروژه را روی هر چیزی که می خواهید تنظیم کنید، چارچوب باید “Svelte” و نوع آن جاوا اسکریپت باشد (اما اگر با آن راحت هستید می توانید از TypeScript استفاده کنید). حالا با دستور cd به دایرکتوری پروژه بروید و دستور زیر را اجرا کنید تا وابستگی های لازم را نصب کنید:

npm install

یا:

yarn

پس از نصب وابستگی ها، می توانید سرور توسعه را با اجرای زیر راه اندازی کنید:

npm run dev

یا:

yarn dev

تعریف نشانه گذاری پروژه

پروژه را در هر ویرایشگر کد دلخواه باز کنید و دارایی ها و پوشه lib را حذف کنید. همچنین، مطمئن شوید که محتویات فایل app.css و فایل App.svelte را پاک کرده اید. فایل main.js را باز کنید و محتوای زیر را جایگزین کنید:

import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

در مرحله بعد، فایل App.svelte و در تگ اسکریپت را باز کنید و آرایه ای ایجاد کنید که پیوندهای مختلف را نگه می دارد، مانند این:

<script>
  let imageLinks = [
    "https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
    "https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
    "https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
    "https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
    "https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
    "https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
  ];
</script>

در زیر برچسب اسکریپت، یک عنصر اصلی با یک div “container” فرزند ایجاد کنید که همه تصاویر را در خود نگه می دارد. سپس، از طریق هر عنصر در imageLinks تکرار کنید و برای هر تکرار یک عنصر تصویر را ارائه دهید.

<main>
  <h1>Cute Cat Gallery</h1>
  <h3>See the cutest images of cats from the internet</h3>
  <div class="container">
    {#each imageLinks as url}
      <div class="image-container">
        <img src={url} />
      </div>
    {/each}
  </div>
</main>

پس از تعریف نشانه گذاری، اکنون می توانید به استایل دادن به برنامه با روش اول ادامه دهید – وارد کردن مستقیم CSS.

مطلب مرتبط:   راهنمای مبتدیان برای Z-Index در CSS

استایل دادن به اجزای شیک با واردات مستقیم CSS

یکی از روش های رایج برای استایل دادن به کامپوننت Svelte، نوشتن یک فایل CSS خارجی و وارد کردن مستقیم آن به کامپوننت است. در سطح بالای تگ اسکریپت، فایل app.css را به این صورت وارد کنید:

import "./app.css";

اکنون فایل app.css را باز کنید و ویژگی display در کلاس “container” را روی “grid” تنظیم کنید و padding را در کلاس “image-container” روی 10px قرار دهید:

.container {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.image-container {
  padding:10px;
}

تصاویر را انتخاب کنید و آنها را پاسخگو کنید، سپس استایل مناسب را برای تصاویر شناور شده اضافه کنید:

img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  transition: 250ms;
}

img:hover {
  scale: 1.03;
  transition: 250ms;
}

وقتی کد را در مرورگر اجرا می کنید، این چیزی است که باید ببینید:

اسکرین شات از برنامه Svelte

مزایای واردات مستقیم CSS

  • قابلیت استفاده مجدد: تعریف CSS خود در یک فایل خارجی، استفاده مجدد از سبک های مشابه را در چندین مؤلفه آسان می کند. این می تواند در مواردی مفید باشد که می خواهید اجزای مختلف استایل یکسانی داشته باشند.
  • انعطاف پذیری: اگر تصمیم به طراحی مجدد وب سایت خود دارید، می توانید بدون نیاز به تغییر ساختار HTML استایل را در فایل CSS خارجی به روز کنید. این تفکیک نگرانی ها به انعطاف پذیری بیشتری در تطبیق طراحی سایت شما اجازه می دهد.

معایب واردات مستقیم CSS

  • پیچیدگی آبشاری: در حالی که تعریف CSS شما در یک فایل خارجی قدرتمند است، همچنین می‌تواند منجر به درگیری‌های غیرمنتظره و لغو زمانی که سبک‌های خارجی با یکدیگر تعامل دارند، شود. این می تواند منجر به عیب یابی و عیب یابی زمان بر شود. می‌توانید با استفاده از تگ‌های سبک مستقیماً در فایل Svelte از تضادهای سبک غیرمنتظره در Svelte جلوگیری کنید.
  • افزایش زمان بارگذاری: زمانی که کاربر از وب سایت شما بازدید می کند، علاوه بر HTML و به صورت اختیاری، فایل های جاوا اسکریپت باید فایل CSS خارجی را نیز دانلود کند. این می‌تواند چند میلی‌ثانیه به زمان بارگذاری اضافه کند، که ممکن است زیاد به نظر نرسد، اما اگر فایل‌های CSS خارجی زیادی داشته باشید، می‌تواند افزایش یابد.
مطلب مرتبط:   5 راه برای یادگیری HTML و CSS با چالش های واقعی UI

یک ظاهر طراحی با استفاده از تگ های Svelte Style

روش دوم استایل کردن اجزای Svelte استفاده از تگ های سبک ارائه شده توسط Svelte است. سینتکس چیزی شبیه به این است:

<script>
  <!-- Your logic goes here -->
</script>

<!-- Markup goes here -->

<style>
  <!-- styling goes here -->
</style>

یکی از مزیت‌های این روش این است که سبک‌ها را به کامپوننت محدود می‌کند، به این معنی که سبک‌های یک جزء نمی‌توانند بر سبک‌های جزء دیگر تأثیر بگذارند. توجه به این نکته مهم است که تگ‌های سبک در Svelte بالاترین اولویت را دارند و هر گونه استایل CSS خارجی را برای یک عنصر معین لغو می‌کنند. برای نشان دادن آن، موارد زیر را به انتهای فایل App.svelte اضافه کنید

<style>
h1 {
  background-color: red;
}
</style>

سپس موارد زیر را به انتهای فایل App.css اضافه کنید:

h1 {
  background-color: yellow;
}

هنگامی که کد را در مرورگر اجرا می کنید، متوجه خواهید شد که عنصر h1 یک رنگ پس زمینه قرمز دارد—که بر رنگ پس زمینه زرد که در فایل App.css تنظیم شده بود، غلبه می کند.

Scoped Styling CSS در Svelte

یک ظاهر طراحی با پیش پردازنده های CSS

سومین روش محبوب برای استایل دادن به کامپوننت Svelte استفاده از پیش پردازنده CSS در تگ style است. پیش پردازنده های CSS دارای مزایای زیادی هستند، آنها به شما اجازه می دهند از توابع پیشرفته، میکس ها و حتی پشتیبانی از استایل تو در تو که یک ویژگی جدید برای CSS بومی است، استفاده کنید.

پیش پردازنده های زیادی برای انتخاب وجود دارد که شامل LessCSS، Sass، Stylus و غیره می شود. برای استفاده از پیش پردازنده مورد علاقه خود، باید آن را به عنوان یک وابستگی توسعه نصب کنید، با اجرای:

npm install -D <css-preprocessor>

یا:

yarn add -D <css-preprocessor>

مطمئن شوید که نام پیش پردازنده واقعی را جایگزین کرده اید. به عنوان مثال، اگر می خواهید Less را نصب کنید و از آن در پروژه خود استفاده کنید، موارد زیر را اجرا کنید:

npm install -D less

یا:

yarn add -D less

پس از انجام این کار، می توانید ویژگی lang را به تگ style اضافه کنید و آن را روی “کمتر” قرار دهید.

<style lang="less">
</style>

و با آن، اکنون می‌توانید از تمام ویژگی‌های شگفت‌انگیز Less CSS در طراحی کامپوننت شیک خود استفاده کنید.

مطلب مرتبط:   چگونه یک انتخابگر تاریخ را به برنامه React.js اضافه کنیم

چه چیزی Svelte را شگفت انگیز می کند؟

هر فایل Svelte با پسوند “.svelte” به پایان می رسد. کامپایلر Svelte کد نوشته شده در فایل .svelte را تجزیه می کند و جاوا اسکریپت و CSS مناسب را برای ارسال به مرورگر تولید می کند. این فرآیند صفحات وب سریع‌تری را ایجاد می‌کند که منجر به تجربه کاربری بهتر می‌شود.

اگر می خواهید از یک کتابخانه جاوا اسکریپت خارجی در پروژه خود استفاده کنید، می توانید آن را مستقیماً در فایل .svelte خود وارد کرده و بدون نیاز به پوشش (بر خلاف React) از آن استفاده کنید.

Tags: