SASS در طراحی سایت

SASS برگرفته از عبارت Syntactically Awesome Style Sheets است که یک زبان پیش پردازنده CSS بوده و به نوعی موجب کوتاه نویسی در CSS خواهد شد. اگر در زمینه طراحی سایت تا حدودی کار کرده باشید حتماً با CSS و کد نویسی های طولانی و تکراری آن آشنایی دارید. با این حال در این مطلب یک تعریف جزئی از CSS خواهیم داشت و سپس لزوم استفاده SASS در طراحی سایت را بررسی خواهیم کرد. با شرکت طراحی و ساخت سایت اینتن همراه باشید.

مقدمه ای بر CSS

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

SASS در طراحی سایت چه فوایدی دارد ؟

اما SASS چیست و چرا SASS در طراحی سایت می تواند مفید باشد؟ باید بگوییم SASS یک زبان Script نویسی است که نقاط ضعف زبان نشانه گذاری CSS را تا حدود زیادی بر طرف کرده است. در واقع SASS این قابلیت را فراهم آورده است تا بتوانیم در نوشتن کد های CSS از متغیر ها، توابع و انجام محاسبات بهره گیریم. با وجود همچین قابلیتی باعث خواهد شد کد های CSS بسیار کوتاه تر شوند. به طور مثال با تعریف یک افزونه که خود حاوی چند خط کد است، از تکرار این تعداد کد در کد نویسی پرهیز کرده و در صورت نیاز از یک خط کد (فراخوانی افزونه) به جای چند خط استفاده می کنیم. امکان ایجاد متغیر در SASS در طراحی سایت باعث می شود کار کد نویسی سریع تر و راحت تر پیش برود. به طور مثال شما می توانید کد یک رنگ یا در یک متغیر ذخیره کرده و به جای تکرار استفاده از این کد از یک متغیر ساده استفاده نمایید.

انواع SASS در طراحی سایت

SASS در طراحی سایت از نظر دستوری و سینتکس به دو دسته تقسیم می شود. دسته اول همین SASS است که علاوه بر ویژگی های اضافه شده به CSS دارای خواص دیگری در جهت کوتاه نویسی است. مانند حذف آکولاد ها و استفاده از تو رفتگی ها به جای آن به منظور تعیین بلاک دستورات و همچنین حذف “;” که نقش جدا کننده دستورات را داشت و استفاده از کلید Enter به جای آن و… . دسته دوم که با عنوان SCSS شناخته می شود این خواص کوتاه نویسی را به کار نگرفته و از همان آکولاد و سمیکالن در دستورات استفاده می کند.

نحوه بکارگیری کد های SASS در طراحی سایت

طبق آن چه گفتیم شاید این طرز فکر برایتان به وجود آمده باشد که باید کد های SASS را همانند کد های CSS در سرور آپلود کرد و مورد استفاده قرار داد. اما این طور نیست و برای بهره گیری از این کد های SASS در طراحی سایت باید آن ها را کامپایل و به کد های CSS تبدیل کرد و از فایل CSS بدست آمده استفاده کرد. برای کامپایل SASS ها ابزار هایی موجود هستند که یکی از مهم ترین آن ها کامپایلر Koala است. با استفاده از این نرم افزار شما می توانید کد های SASS را وارد نرم افزار کرده و فایل CSS خروجی را مورد استفاده قرار دهید.

برای ساخت یک فایل SASS و نوشتن کد های مورد نیاز کافیست یک فایل تکست ایجاد کرده و پسوند آن را به sass. و یا scss. بسته به نحوه کد نویسی خود تغییر دهید.

نکته آخری که میبایست به آن اشاره ای داشته باشیم این است کد های SASS در طراحی سایت به هیچ وجه نمی توانند جایگزین CSS شوند و نمی توان به طور مستقیم از این فایل ها در طراحی سایت استفاده کرد. بلکه SASS به شما کمک می کند راحت تر کد نویسی کرده و در نهایت کد شما را به فرم استاندارد CSS تبدیل خواهد کرد.

شرکت اینتن قصد دارد در روز های آتی آموزش هایی در زمینه SASS در طراحی سایت و نحوه کد نویسی SASS را در سایت قرار دهد. شما می توانید مطالب سایت ما را پیگیری کرده و آموزش های مرتبط با SASS در طراحی سایت را مطالعه نمایید.

با اینتن بروز باشید…