آیا میدانید؟

اخرین مطالب

خدمات ما

لینک های اجتماعی

Instagram
WhatsApp
Telegram
sass چیست؟

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 شامل دو گزینه است:
SCSS : از پسوند فایل .scss استفاده می میشود .
Indented (تورفتگی) (به سادگی “Sass” نامیده می شود): از پسوند فایل .sass و تورفتگی به جای براکت استفاده می کند. به طور کامل با نحو CSS سازگار نیست، اما نوشتن آن سریعتر است.

 

دلالیل استفاده از sass چیست؟

Variables

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

برای مثال

sass

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

Nesting

nesting (لانه سازی) یک شمشیر دو لبه است. در حالی که روشی عالی برای کاهش مقدار کدی که باید بنویسید ارائه می‌کند، اما اگر با دقت اجرا نشود، می‌تواند منجر به بیش از حد واجد شرایط بودن CSS شود.

شکل زیر یک سبک ناوبری اساسی را نشان می دهد که از nesting استفاده می کند:

nesting in sass
خروجی CSS به صورت زیر است:
css output

Partials

partials ها فایل های Sass کوچکتری هستند که می توانند به سایر فایل های Sass وارد شوند . partials را به عنوان قطعه کد در نظر بگیرید. با استفاده از این قطعه کد، CSS شما اکنون می تواند ماژولار باشد و نگهداری آن آسان تر . یک partials با عنوان _partial.scss طراحی میشود.

import

دستورالعمل import@ که با Partals استفاده می شود ، به شما این امکان را می دهد فایل های partials خود را به فایل فعلی وارد کنید تا یک فایل CSS بسازید.

partials

import@

و خروجی CSS مربوطه:
css output
توجه: هنگام وارد کردن partials ، نیازی به اضافه کردن پسوند فایل یا underscore ندارید.

Mixins

یکی از مزایای استفاده از پیش پردازنده ها، توانایی آنها در تبدیل کدهای پیچیده و طولانی به ساده است. اینجاست که mixinها به کار می آیند!

به عنوان مثال، اگر شما نیاز به اضافه کردن پیشوندهای فروشنده دارید، می توانید به جای آن از یک mixin استفاده کنید.مثلا:

mixin in sass
به دستور mixin@ در بالا توجه کنید. به آن نام border-radius داده شده است و از متغیر radius$ به عنوان پارامتر خود استفاده می کند. این متغیر برای تعیین مقدار شعاع برای هر عنصر استفاده می شود. بعداً دستور include@ به همراه نام mixin (border-radius) و یک پارامتر (10px) فراخوانی می شود. بنابراین box { @include border-radius(10px); }. CSS. زیر تولید می شود:

box in sass

Extend/Inheritance

دستورالعمل extend@ یکی از قدرتمندترین ویژگی های Sass نامیده می شود.

دلیلش این است که با این دستورالعمل شما مجبور نخواهید بود نام چندین کلاس را در عناصر HTML خود قرار دهید و می توانید کد خود را DRY نگه دارید (خودتان را تکرار نکنید). انتخابگرهای شما می‌توانند سبک‌های انتخابگرهای دیگر را به ارث ببرند، و سپس در صورت لزوم به راحتی قابل گسترش باشند.

Operators

داشتن توانایی انجام محاسبات در CSS به شما این امکان را می دهد که کارهای بیشتری انجام دهید، مانند تبدیل مقادیر پیکسل به درصد. شما به توابع ریاضی استاندارد مانند جمع، تفریق، ضرب و تقسیم دسترسی خواهید داشت. البته، این توابع را می توان برای ایجاد محاسبات پیچیده ترکیب کرد.

علاوه بر این، Sass شامل چند توابع داخلی برای کمک به دستکاری اعداد است. توابعی مانند %()، floor() و round() .

به طور خلاصه به این سوال که sass چیست؟ در کل این مقاله پاسخ دادیم. امیدوارم براتون مفید بوده باشه.

مقاله های مرتبط که میتواند مفید باشد:

cssHtml5sassبرنامه نویسیفرانت اند
0 0 اراء
امتیاز مقاله
اشتراک در
اطلاع دهید
guest

0 دیدگاه ها
بازخوردهای درون خطی
مشاهده همه نظرات

این مقالات هم مطالعه کنید

سوالی دارید؟ از ما بپرسید.

این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
این فیلد را پر کنید
keyboard_arrow_up
0
از نظردهی شما ممنونم !x