مرجع تخصصی مقالات طراحی سایت

Sass یک پیش‌پردازنده (Preproccesor) برای گویش CSS میباشد. طراحی سایت در مشهد در واقع Sass آمده میباشد تا محدودیت‌ها و ضعف‌های لهجه CSS را جبران نماید و با افزودن خصوصیت‌های جالبی به آن، تایپ کردن کد‌های CSS را شل‌خیس و سریع‌خیس سازد.

می‌قدرت اظهار کرد که Sass دوست داستنی‌ترین و پر استفاده ترین پیش‌پردازنده برای CSS میباشد. برای افزودن ساس به پروژه خویش فقط کافیست تا اپلیکیشن کامپایل کدهای Sass به CSS را نصب فرمایید و بعد به مکان پسوند .css از پسوند‌های .sass و .scss برای پوشه‌های استایل به کار گیری نمایید.

در شرایطی که با معنا پیش‌پردازنده یا این که به عبارتی Preproccesor شناخت ندارید توصیه می کنم مسلما نوشته‌ی‌علمی پایین را بخوانید:

پیش پردازنده یا این که preprocessor چیست؟ و چه کاربردی در طراحی سایت داراست؟

Sass دو Syntax متفاوت با اسم‌های sass و scss برای تایپ کردن کدها به‌این گویش در حیث گرفته میباشد که به کارگیری از آن‌ها تنها و تنها به راحتی و ذوق و سلیقه شما بر می شود. بصورت کلی می‌اقتدار ذکر کرد کدها در sass خلاصه‌خیس و ریلکس‌خیس از scss نوشته میشوند.

بایستی توجه داشته باشید که Syntax موردنظر خویش را در اولِ فعالیت معین فرمائید. در شرایطی‌که با sass ریلکس‌خیس می‌باشید بایستی پسوند فولدر‌ها هم .sass باشند. البته در صورتیکه با scss راحتید بایستی پسوند فولدر‌ها را .scss قرار دهید.

نکته: ما درین نوشته‌علمی از Syntax و پسوند sass به کارگیری می کنیم.

نصب Sass
برنامه‌هایی برای کامپایل کدهای Sass به CSS وجود دارا‌هستند. میتوانید لیست این اپلیکیشن‌ها را از این لینک و پیوند ببینید. یکی نرم افزار‌های دوستداشتنی و اما بدون‌پول برای اینکار، Scout-App میباشد. این اپلیکیشن متن گشوده (Open Source) برای سیستم‌دلیل‌های Mac، Windows و Linux در دسترس میباشد.

برای دانلود و نصب این برنامه می توانید به تارنما قانونی آن یعنی scout-app.io رجوع نمایید.

عمل با نرم‌افزار Scout-App
پس از مفتوح کردن نرم‌افزار Scout-App با تصویر پایین مواجه میشوید.

در‌این نصیب بایستی یک پروژه نو ساخت‌و‌ساز کرده یا این که یک پروژه کهن را به نرم‌افزار اضافه نمایید. برای به کارگیری از پروژه‌های کهن تنها کافیست فولدر پروژه موردنظر را به بخش معلوم گردیده در اپ بکشید (Drag and Drop).

برای ساخت پروژه تازه می توانید روی دکمه Add a Project کلیک نمائید و در پنجره گشوده گردیده روی دکمه Make New Folder کلیک فرمائید تا یک فایل نو ساخت‌و‌ساز گردد. آن‌گاه روی دکمه OK کلیک نمائید تا پروژه نو به اپ اضافه خواهد شد.

در مرحله بعد از آن بایستی فایل مرتبط با پوشه‌های Sass و فولدر مرتبط با پوشه‌های CSS را به نرم‌افزار معرفی نمائید تا بتواند این پوشه‌ها را کامپایل نماید و در فایل مقصد قرار دهد.

مانند تصویر ذیل، در بخش Input Folder فایل مرتبط با پوشه‌های Sass و در بخش Output Folder فایل مرتبط با پوشه‌های CSS را گزینش نمایید.

در بخش Environment میتوانید نوع کامپایل را گزینش نمایید. مثلا با گزینش Production و آیتم Compressed بعداز کامپایل، کدها را فشرده کرده و در فولدر CSS مقصد ذخیره می‌نماید.

این مورد بیشتر برای پروژه‌هایی که بعدا قصد بازنویسی کدهای CSS آن را ندارید کاربرد داراست. در شرایطی که می خواهید کدها خوانایی خویش را محافظت نمایند تا ابعاد شل‌خیس قابل پیشرفت باشند می توانید از آیتم Development به کارگیری فرمایید.

برای کامپایل فولدر‌های Sass به CSS کافیست بعداز تایپ کردن کدها، در نرم‌افزار Scout-App روی دکمه‌ای که در تصویر پایین معلوم گردیده کلیک فرمایید.