آموزش Sass و Scss در طراحی وب

• Nikdad.net
• برنامه نویسی, برنامه نویسی اختصاصی, طراحی و توسعه وب سایت, طراحی وب

آموزش Sass و Scss در طراحی وب

ساس چیست؟ اگر در طراحی وب سایت تازه کار هستید، احتمالاً واژه شناور را شنیده اید، اما ممکن است بخواهید بدانید دقیقا منظور از Sass چیست، چه کارهایی انجام می دهد و اینکه آیا باید از آن استفاده نمود یا خیر، که باید از همه این جزئیات مطلع باشید. به طور خلاصه، Sass یک پیش پردازشگر CSS است که ویژگی‌های خاصی مانند متغیرها، قوانین تودرتو و میکس‌ها را به CSS معمولی اضافه می‌کند. هدف آن در واقع عملیات کدگذاری را ساده تر و کارآمدتر می کند.

پیش پردازنده CSS چیست؟

در واقع یک زبان برنامه نویسی است که به توسعه دهندگان این قابلیت را می دهد تا بتوانند نوشتن کد به یک زبان و سپس کامپایل آن را در سی اس اس گسترش دهند. Sass شاید محبوب ترین پیش پردازنده حال حاضر باشد، اما نمونه های معروف دیگری نظیر Less و Stylus نیز وجود دارد.

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

ساس Sass چیست؟

Sass (که مخفف عبارت ‘Syntactically Awesome style sheets) بوده و در واقع یک برنامه افزودنی CSS است که به شما امکان می دهد از چیزهایی مانند متغیرها، قوانین تودرتو، واردات درون خطی و موارد دیگر استفاده کنید. همچنین به سازماندهی همه چیزها کمک می کند و به شما امکان می دهد سریعتر شیت های سبک را ایجاد کنید.

Sass با تمامی نسخه های سی اس اس سازگاری دارد و تنها شرط لازم آن برای استفاده، نصب Ruby روی سیستم است. همچنین از کاربران خواسته می شود که از قبل ساس را به خوبی یاد بگیرند.

Sass شامل دو گزینه نحوی است:

SCSS (Sassy CSS): از پسوند فایل .scss استفاده می کند و کاملاً با نحو CSS سازگار است.
تورفتگی (به سادگی “Sass” نامیده می شود): از پسوند فایل .sass و تورفتگی به جای براکت استفاده می کند. به طور کامل با نحو CSS سازگار نیست، اما نوشتن آن سریعتر است
توجه داشته باشید که فایل ها را می توان با استفاده از دستور sass-convert از یک سینتکس به دیگری تبدیل کرد.

برای مثال:

CSS زیر تولید خواهد شد:

چرا به SASS نیاز دارید؟

در ابتدا شاید به نظر نرسد که دلیل ضروری برای استفاده از Sass وجود داشته باشد. از این گذشته، سی اس اس برای چند دهه امکان توسعه صفحات با طراحی های جذاب و فنی را فراهم نموده است. حتی اگر بخواهید از اینجا به بعد با Sass کار کنید، نمی توانید از سی اس اس دوری کنید. زبان شیوه نامه قدیمی به عنوان پایه و اساس ارائه در آینده است. ساس و سایر زبان ها به سادگی بر روی بدنه اصلی css ساخته شده اند.

البته، با SASS گزینه هایی دارید که به تنهایی توسط CSS ارائه نمی شوند:

متغیرها: با ساس می توانید اطلاعات را در متغییرها ذخیره نموده تا بعدا دوباره استفاده نمایید. به عنوان مثال می توان یک مقدار رنگ را به صورت متمرکز در زیر یک متغیر Catcher ذخیره کرد.

توابع ریاضی: در ساس می توانید از عملیات های ریاضی نظیر +، -، *، / یا % نیز استفاده کنید. به عنوان مثال، این به شما امکان می دهد بر مشخصات اندازه تأثیر بگذارید.

توابع: سایر عملکردها نیز کار را برای طراحی آسانتر می کند. به شما امکان می دهند مقادیر رنگ ها را تغییر دهید یا لیست ها را تجزیه و تحلیل نمایید.

حلقه ها: یکی از مزیت های SASS قابلیت راه اندازی حلقه ها است. در واقع آنها تا زمانی که به وضیعتی که شما تعریف کرده اید برسید، تکرار می شوند.

تمایز موارد: عملکردی مشابه دستورات شرطی if و other دارند. دستورات داده شده تنها در صورت رعایت شرایط خاص اجرا می شوند.

Mixins : در واقع قالب ها هستند که می توانید خودتان آنها را بسازید و در هنگام استفاده از یک فریم ورک به سادگی آنها را در کدهای خود ادغام نمایید.

تو رفتگی ها: SASS بر خلاف SCSS با تو رفتگی ها و خطوط شکسته برای ساختار کد همراه هستند. برای نمایش تودرتو یا نقطه ویرگول در علامت گذاری ها انتهای خطوط نیازی به پرانتز ندارید.

تودرتو: سی اس اس به شما اجازه نمی دهد تا با کدهای تودرتو کار کنید. با این حال ساس به کاربران این قابلیت را می دهد تا وابستگی های بصری را برای ساده کردن فرآیند نوشتن ارائه نماید.

ارث بری: قابلیت ارث بردن خواص یک انتخابگر است. باعث صرفه جویی در نوشتن و باریکتر و کم کردن کدها نیز می شود.

فایل های جزئی: برای ادغام عناصر کد در یک فایل Sass می توانید از جزئیات استفاده کنید. در واقع آنها فایل هایی هستند که فقط باید حاوی چند خط کد سی اس اس باشد یا دستور برای یک فایل sass وارد شود.

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

 

حقیقت

SASS تحت مجوز MIT در دسترس است و به صورت منبع باز ارائه شده است. اما پیاده‌سازی‌های دیگری از این زبان نیز وجود دارد که تحت مجوزهای اختصاصی در دسترس هستند که گاهی اوقات کار با آن‌ها آسان‌تر است.

از SASS تا CSS

برای اینکه کد ساس ایجاد شده اثر مورد نظر خودش را داشته باشد، ابتدا باید آن را به سی اس اس معمولی تبدیل کنید. کامپایل به راحتی در خط فرمان انجام می شود.

sass example.sass:example.css

این یک دستور کد منبع که از فایل example.sass ایجاد شده در یک فایل CSS جدید کامپایل می کند. با انجام این کار، نحوه SASS به طور خودکار تغییر می کند تا با قوانین CSS مطابقت داشته باشند.

کار بر روی یک وب سایت به ندرت تمام می شود و شما به طور بالقوه می توانید تغییرات منظمی را در طراحی های خود ایجاد نمایید. به همین خاطر SASS از پارامتر “–watch” استفاده می کند تا به شما امکان نظارت بر پوشه ها یا فایل ها را بدهد. اگر تغییراتی در آنها ایجاد کنید، سیستم به طور خودکار آنها را مجدداً کامپایل می کند.

SCSS در مقابل SASS: چه تفاوت هایی دارند؟

در واقع دو نوع SASS وجود دارد که یکی شکل اصلی خودش را دارد که به «سینتکس تورفتگی» یا به‌طور خلاصه «SASS» معروف است. اما نوع جدید آن به شدت به استانداردهای CSS گرایش داشته و به همین دلیل به آن CSS (SCSS) – so, SASS-style CSS می گویند. بنابراین نسخه 3 SASS دارای SCSS به عنوان یک نحو رسمی است. بزرگترین تفاوت: استفاده از پرانتز و نقطه ویرگول.

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

SCSS چگونه عمل می کند؟

SCSS مجموعه ای از CSS ها است که تضمین می کند که کد CSS اساساً در SCSS نیز کار می کند، اما نه برعکس. با این حال، عملکردهای SASS هنوز به طور کامل وجود دارد. این همزمان کار را با هر دو زبان آسان تر می کند. علاوه بر این، افرادی که قبلاً با CSS کار می‌کنند و با سنتکس ها راحت‌تر هستند، همچنین زمان بسیار آسان‌تری برای جابجایی دارند. فایل ها را با «.sass» یا «.scss» پایان بدهید.

مزایا و معایب SASS

زبان SASS دارای مزایای زیادی برای جدول ها ارائه می دهد، مزیت هایی که در واقع زبان پیش پردازنده به کاربران در زمان ساخت کد قابلیت ها و امکانات بیشتری ارائه می دهد. مثلا بسیاری از طراحان وب، تابعی را دوست دارند که قابلیت دهد تا رنگ ها را به صورت متغیر ذخیره نماید، به جای اینکه همیشه مقدار رنگ را به عنوان یک عدد هگزادسیمال وارد کنید. آموزش Sass و Scss در طراحی وب از اهمیت زیادی برخوردار است و باید به آن مسلط باشید.

همچنین ساس ترکیب ها، متغییرها و موارد تودرتو را نسبت به CSS سنتی با عملکرد بهتری ارائه می نمایند. حتی به شما در تکرار کدها و کمتر شدن منابع کدنویسی کمک می کند. تلاش ها و وقت و زمان شما را کاهش داده و به جای اینکه مجبور باشید در چندین مکان مختلف تغییرات را ایجاد کنید، فقط می توانید یک تغییر را در یک موقعیت مرکزی انجام دهید.

عیب های sass

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

نکات پایانی آموزش Sass و Scss در طراحی وب:

امروزه طراحی سایت جزو مشاغل پردرآمد و کاملا تخصصی دسته بندی می شود، شما اگر یک طراح سایت حرفه ای هستید باید به زبان و کدنویسی و برنامه نویسی مسلط باشید. در این مقاله آموزش Sass و Scss در طراحی وب ما به شما یاد داده ایم که چقدر استفاده از روش های جدید سی اس اس ضروری است.

Nikdad.net وب‌سایت

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