sass چیست؟
این سوالی است که ما در اینجا به آن پاسخ می دهیم. اگر در طراحی وب تازه کار هستید، احتمالاً اصطلاح floating را شنیده اید، اما ممکن است در مورد اینکه Sass دقیقاً چیست، چه کاری انجام می دهد و اینکه آیا باید از آن استفاده کنید یا نه، کاملاً مطلع نباشید. به طور خلاصه، Sass یک پیش پردازشگر CSS است که ویژگی‌های خاصی مانند متغیرها، قوانین تودرتو و میکس‌ها را به CSS معمولی اضافه می‌کند. هدف این است که فرآیند کدگذاری ساده تر و کارآمدتر شود. بیایید با جزئیات بیشتر بررسی کنیم.
پیش پردازنده CSS چیست؟
پیش پردازنده CSS یک زبان برنامه نویسی است که توانایی css را با اجازه دادن به توسعه دهندگان برای نوشتن کد به یک زبان و سپس کامپایل آن در CSS گسترش می دهد. Sass شاید محبوب ترین پیش پردازنده در حال حاضر باشد، اما نمونه های شناخته شده دیگر شامل Less و Stylus هستند.
قبل از اینکه جلوتر برویم، دانستن این موضوع ضروری است که : اکثر طراحان وب می گویند که اگر در CSS تازه کار هستید، بهتر است از Sass (یا هر پیش پردازشگر، برنامه افزودنی یا فریمورک) خودداری کنید. در حالی که درست است که آنها مزایای زیادی در سرعت و کارایی ارائه می دهند، مهم است که شما واقعاً با اصول CSS آشنا شوید. قبل از شروع کاوش میانبرها و چیزهای گیج کننده، مطمئن شوید که مفاهیم اصلی را یاد گرفته اید.
Sass (که مخفف عبارت ‘Syntactically Awesome style sheets) است، یک برنامه افزودنی از CSS است که به شما امکان می دهد از چیزهایی مانند متغیرها، قوانین تودرتو، واردات درون خطی و موارد دیگر استفاده کنید. همچنین به سازماندهی چیزها کمک می کند و به شما امکان می دهد سریعتر شیت های سبک ایجاد کنید.
Sass با تمام نسخه های CSS سازگار است. تنها شرط لازم برای استفاده از آن این است که باید Ruby را نصب کرده باشید. همچنین از کاربران خواسته می شود دستورالعمل های انجمن Sass را دنبال کنند.
نحوه استفاده از Sass
دلالیل استفاده از sass چیست؟
Variables
درست مانند سایر زبان های برنامه نویسی، Sass اجازه استفاده از متغیرهایی را می دهد که می توانند اطلاعاتی را که می توانید در سرتاسر شیوه نامه خود استفاده کنید، ذخیره کنید. به عنوان مثال، می توانید یک مقدار رنگ را در یک متغیر در بالای فایل ذخیره کنید و سپس هنگام تنظیم رنگ عناصر خود از این متغیر استفاده کنید. این به شما امکان می دهد بدون نیاز به تغییر هر خط به طور جداگانه، رنگ های خود را به سرعت تغییر دهید.
برای مثال
Nesting
nesting (لانه سازی) یک شمشیر دو لبه است. در حالی که روشی عالی برای کاهش مقدار کدی که باید بنویسید ارائه می‌کند، اما اگر با دقت اجرا نشود، میتواند منجر به بیش از حد واجد شرایط بودن CSS شود.
شکل زیر یک سبک ناوبری اساسی را نشان می دهد که از nesting استفاده می کند:
Partials
partials ها فایل های Sass کوچکتری هستند که می توانند به سایر فایل های Sass وارد شوند . partials را به عنوان قطعه کد در نظر بگیرید. با استفاده از این قطعه کد، CSS شما اکنون می تواند ماژولار باشد و نگهداری آن آسان تر . یک partials با عنوان _partial.scss طراحی میشود.
import
دستورالعمل import@ که با Partals استفاده می شود ، به شما این امکان را می دهد فایل های partials خود را به فایل فعلی وارد کنید تا یک فایل CSS بسازید.
Mixins
یکی از مزایای استفاده از پیش پردازنده ها، توانایی آنها در تبدیل کدهای پیچیده و طولانی به ساده است. اینجاست که mixinها به کار می آیند!
به عنوان مثال، اگر شما نیاز به اضافه کردن پیشوندهای فروشنده دارید، می توانید به جای آن از یک mixin استفاده کنید.مثلا:
Extend/Inheritance
دستورالعمل extend@ یکی از قدرتمندترین ویژگی های Sass نامیده می شود.
دلیلش این است که با این دستورالعمل شما مجبور نخواهید بود نام چندین کلاس را در عناصر HTML خود قرار دهید و می توانید کد خود را DRY نگه دارید (خودتان را تکرار نکنید). انتخابگرهای شما می‌توانند سبک‌های انتخابگرهای دیگر را به ارث ببرند، و سپس در صورت لزوم به راحتی قابل گسترش باشند.
Operators
داشتن توانایی انجام محاسبات در CSS به شما این امکان را می دهد که کارهای بیشتری انجام دهید، مانند تبدیل مقادیر پیکسل به درصد. شما به توابع ریاضی استاندارد مانند جمع، تفریق، ضرب و تقسیم دسترسی خواهید داشت. البته، این توابع را می توان برای ایجاد محاسبات پیچیده ترکیب کرد.
علاوه بر این، Sass شامل چند توابع داخلی برای کمک به دستکاری اعداد است. توابعی مانند %()، floor() و round() .
به طور خلاصه به این سوال که sass چیست؟ در کل این مقاله پاسخ دادیم. امیدوارم براتون مفید بوده باشه.
مقاله های مرتبط که میتواند مفید باشد:
