menu

۱- آشنایی با SCSS و SASS

همانطور که میدانید برای تغییر ظاهر صفحهات Html از CSS استفاده میکنیم. CSS به راحتی میتواند نیاز ما را برآورده کند، اما برای پروژه های بزرگ و جاهایی که نیاز به کد های CSS بسیاری داریم، یک Preprocessor میتواند کمک بسیاری به ما بکند. Preprocessor ها گسترش یافته ی Css هستند که علاوه بر دارابودن تمامی ویژگی های CSS ویژگی های دیگری هم مانند قابلیت تعریف متغیر، ایمپورت کد کلاس های دیگر و… دارند که به ما کمک میکنند راحت تر و سریع تر کد نویسی کنیم. همچنین قابلیت کد نویسی به شیوه ای کمی متفاوت تر را نیز دارند تا راحتی کار را بیشتر بکنند.

معروف ترین Preprocessor ها برای سی اس اس SCSS و SASS هستند که تفاوت های بسیار کمی با هم دارند. برای آشنا شدن با این دو به کد های زیر نگاهی بیندازید:

نمونه کد SCSS:

نمونه کد SASS:

که خروجی این کد ها کد زیر است:

از صفحات html نمیتوان به صورت مستقیم به کد های SCSS و SASS لینک داد و از آنها استفاده کرد و برای استفاده از آنها ابتدا باید آنها را به کد CSS تبدیل ، و سپس از آنها استفاده کرد.

برای تبدیل کد های SASS و SCSS نرم افزار های مختلفی وجود دارد (برای مثال کد ادیتور هایی مثل adobe dreamviewer این قابلیت را در خود دارد). همچنین شما میتوانید از سایت هایی که در این زمینه وجود دارند استفاده کنید.

سایت تبدیل SASS به CSS:

سایت تبدیل SCSS به CSS:

همچنین اگر میخواهید آفلاین کد ها را تبدیل کنید، میتوانید از ادیتور های موجود برای این کار استفاده کنید.

رفتن به نوارابزار