Sass چیست؟ ( آموزش کامل و کاربردی )
اختلاف قدیمی و جالبی بین توسعه دهندگان وب درباره ماهیت زبان‌های Html و CSS وجود دارد! برخی این دو را «زبان‌های نشانه گذاری» می‌دانند که از قواعد و ویژگی‌های عمومی زبان‌های برنامه نویسی مانند متغیر، ارث‌بری و دستورات شرطی هستند؛ اما با ظهور ابزارها و تکنولوژی‌های جدید در زمینه توسعه وب، این نظریه ممکن است دستخوش تغییراتی شود. پیش‌پردازنده‌های CSS آمده‌اند تا به این زبان جذاب و دوست داشتنی، قابلیت‌های جدیدی اضافه کرده و استفاده از آن در پروژه‌های بزرگ را تسهیل کنند.
در این مطلب از وبلاگ سبزلرن، درباره یکی از پیش‌پردازنده‌های مشهور CSS صحبت می‌کنیم. اگر با آموزش CSS آشنایی داشته باشید، راحت‌تر می‌توانید مفاهیم Sass را درک کنید. اینکه Sass چیست؟ چه ویژگی‌هایی دارد و در چه مواردی بهتر است از آن استفاده کنیم؟ سوالاتی است که در ادامه به آنها پاسخ خواهیم داد.
پیش‌پردازنده CSS چیست؟
تصور کنید در حال طراحی یک صفحه عادی با استفاده از Html و Css در سایت خود هستید. بخش‌های هدر، فوتر و بدنه اصلی صفحه را با استفاده از Html ایجاد کرده و اکنون، زمان تعریف استایل‌ها رسیده است. در این حالت، برای هرکدام از بخش‌های سایت باید استایل‌هایی تکراری تعریف کنید. برای مثال، رنگ اصلی سایت شما ممکن است در 20 کلاس مختلف مورد استفاده قرار بگیرد؛ این یعنی 20 بار نوشتن یک خط کد تکراری در یک فایل CSS! در ضمن این نکته را فراموش نکنید که در صورت نیاز به اعمال تغییرات در سایت، باید مجددا 20 بار این تغییرات را تکرار کنید!
در اینجا، نقش پیش‌پردازنده‌ها پررنگ می‌شود. پیش‌پردازنده‌های CSS ابزارهایی برای نوشتن ساده‌تر و سریع‌تر استایل‌ها هستند. به جای اینکه یک رنگ یا استایل خاص را چندین‌بار تکرار کنید، فقط یک‌بار آن را به عنوان یک متغیر تعریف کرده و در زمان نیاز، آن را فراخوانی می‌کنید. حتی می‌توانید استایل‌های تکراری مثل طراحی دکمه‌ها را به‌صورت قالب آماده بسازید و بارها فراخوانی کنید. نتیجه‌اش؟ کدهای مرتب، قابل‌مدیریت و توسعه‌پذیرتر. در نهایت همه چیز به CSS عادی کامپایل شده و بدون مشکل در مرورگر اجرا می‌شود.
این تمام چیزی است که لازم است درباره ماهیت پیش‌پردازنده‌ها بدانیم؛ البته که استفاده از این ابزارها تنها محدود به زبان CSS نیست و زبان‌های برنامه نویسی مختلف، دارای پیش‌پردازنده‌های متعددی هستند. حالا زمان آن رسیده که این سوال را مطرح کنیم: Sass چیست و چه کاربردی دارد؟
پیش‌پردازنده Sass چیست؟
پیش‌پردازنده Sass یا سَس (مخفف Syntactically Awesome Style Sheets) یک پیش‌پردازنده قدرتمند برای CSS است که در سال 2006 منتشر شده و قابلیت‌های زیادی برای توسعه و نگهداری بهتر از کدهای استایل سایت‌ها ارائه می‌دهد. با استفاده از این پیش‌پردازنده، امکان مدیریت استایل‌ها و توسعه آنها در پروژه‌های بزرگ بدون چالش‌های قدیمی ممکن خواهد بود و توسعه دهندگان می‌توانند تغییرات مورد نیاز خود را در مدت زمان کم و سرعت بالا ایجاد کنند.
با معرفی Sass، توسعه دهندگان وب می‌توانستند از CSS مشابه یک زبان برنامه نویسی استفاده کنند. آنها می‌توانستند متغیرهای زیادی تعریف کنند؛ کدهای تودرتو بنویسند و از قابلیت‌هایی نظیر ارث‌بری، Mixinها و عملیات‌های ریاضی برای تبدیل مقادیر استفاده کنند. به این ترتیب، سایت‌های بزرگ نیز بدون نیاز به صرف هزینه و زمان زیاد، امکان ایجاد تغییرات و توسعه بیشتر را بدست می‌آوردند.
از نظر کاربرد، Sass دقیقا همان کاربردهایی را دارد که CSS دارد؛ این یعنی بدون وجود این زبان، اصلا پیش‌پردازنده‌ای به نام Sass وجود نداشت! از Sass برای نوشتن استایل‌های سایت‌های بزرگ استفاده می‌شود و استفاده از آنها برای سایت‌های مختلف در هر مقیاسی، امکان‌پذیر است!
اصلی‌ترین ویژگی‌های Sass چیست؟
بیایید کمی درباره ویژگی‌های SASS صحبت کنیم و مثال‌هایی از هرکدام را در فرآیند کدنویسی ببینیم. تصویر زیر، خلاصه‌ای از مهمترین ویژگی‌های Sass را نشان می‌دهد.
استفاده از متغیرها
با استفاده از این پیش‌پردازنده، امکان تعریف متغیرها در زبان CSS فراهم شد. به این ترتیب، می‌توانستید دستورات پراستفاده را به صورت یک متغیر تعریف کرده و در زمان نیاز، متغیر را فراخوانی کنید. برای مثال، می‌توانید رنگ اصلی سایت را در متغیر «Primary-color» تعریف کرده و در زمان مناسب، از آن استفاده کنید. حتی اگر نیاز به اعمال تغییرات در سایت داشته باشید، کافیست مقدار مربوط به متغیر را تغییر دهید تا به صورت خودکار، تغییرات در تمام محل‌های فراخوانی متغیر اعمال شود. برای درک بهتر، تکه کد زیر را ببینید.
کد CSS عادی (بدون متغیر):
header {
background-color: #3498db;
color: white;
}
footer {
background-color: #3498db;
color: white;
}
.button {
background-color: #3498db;
color: white;
}
کد CSS با استفاده از متغیر
$primary-color: #3498db;
$text-color: white;
header {
background-color: $primary-color;
color: $text-color;
}
footer {
background-color: $primary-color;
color: $text-color;
}
.button {
background-color: $primary-color;
color: $text-color;
}
در کد بالا، رنگ متن سفید تعریف شده و این مقدار در متغیری به نام text-color ذخیره شد. همچنین برای عنصر Background-color نیز متغیر primary-color رنگ #3498db را درون خود قرار داده است. علامت “$” برای اشاره به متغیر لازم است و کامپایلر با دیدن این علامت، متوجه می‌شود باید یک متغیر را فراخوانی کند.
نوشتن کدهای تو در تو
نوشتن کدهای CSS به صورت تودرتو، هم می‌تواند به کاهش حجم کدها کمک کند و هم در صورت استفاده نامناسب، در عملکرد کدهای CSS تاثیر منفی بگذارد. در این حالت، از ساختار سلسله مراتبی مشابه Html استفاده شده و می‌توانید برای عناصر در صورتی که در یک عنصر خاص قرار گرفته باشند، استایل‌های خاصی تعریف کنید. به قطعه کد زیر که با CSS عادی نوشته شده دقت کنید:
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: white;
text-decoration: none;
}
حالا به قطعه کد زیر که با استفاده از Sass نوشته شده و دقیقا مشابه کد بالا کار می‌کند، دقت کنید:
nav {
background-color: #333;
ul {
list-style-type: none;
li {
display: inline-block;
a {
color: white;
text-decoration: none;
}
}
}
}
در این حالت، تنها نیاز است طبق ساختار سلسله مراتبی، استایل‌های تودرتو را تعریف کنید. نوشتن و مدیریت کدها به شکل تو در تو با استفاده از Sass کنترل بیشتری برای مدیریت کدها به توسعه دهنده می‌دهد.
میکسین
میکسین‌ها، تا حدودی شبیه به توابعی هستند که برای فراخوانی استایل‌های پرتکرار در Sass کاربرد دارند. هر میکسین می‌تواند تعدادی استایل پراستفاده را درون خود جای داده و در زمان نیاز، فراخوانی شود. برای مثال، اگر تمام دکمه‌های موجود در سایت شما نیاز به فاصله داخلی (ویژگی Padding) به مقدار 10 پیکسل دارند، می‌توانید این کد را در یک میکسین قرار داده و در زمان نوشتن استایل دکمه‌ها، آن را فراخوانی کنید.
برای درک بهتر این قابلیت، قطعه کد زیر را بررسی کنید.
@mixin button-style {
padding: 10px;
background-color: #3498db;
color: white;
}
.btn {
@include button-style;
}
در این کد، 3 ویژگی در یک میکسین به نام button-style تعریف شده که به ترتیب فاصله داخلی به اندازه 10 پیکسل، کد رنگ #3498db و رنگ متن White را به عنصر موردنظر اضافه می‌کنند. در ادامه با استفاده از دستور @include این میکسین برای همه عناصر با کلاس btn فراخوانی شده است.
ارث‌بری یا Inheritance
اما منظور از ارث‌بری در Sass چیست؟ ارث‌بری یا Inheritance، روشی برای استفاده مجدد از کدهای مشترک بین قسمت‌های متفاوت است. این قابلیت در SASS و CSS با تعریف یک کلاس پایه و ارث‌بری توسط کلاس‌های دیگر، باعث کاهش تکرار کد و بهبود نظم در پروژه می‌شود. ارث‌بری در توسعه ماژولار سایت، به‌ویژه برای عناصری با ظاهر مشابه ولی کلاس‌های متفاوت، بسیار کاربردی است و امکان مدیریت سریع‌تر و بهتر تغییرات را فراهم می‌کند.
برنامه نویسی ماژولار
قابلیتی به نام Partial در پیش‌پردازنده Sass وجود دارد که امکان کدنویسی به صورت ماژولار را فراهم می‌کند. در این قابلیت، فایل‌های Partial بخش‌هایی از کدهای CSS یا Sass را در خود جای داده و به‌صورت مستقل کامپایل نمی‌شوند. هدف از استفاده از این قابلیت، تقسیم ساختار استایل‌ها به فایل‌های کوچکتر و قابل مدیریت است. برای تعریف یک Partial، کافی است نام فایل Sass را با یک علامت زیرخط (_) آغاز کنید و سپس نام آن فایل را تعریف کنید.
این فایل‌ها معمولاً شامل متغیرها، میکسین‌ها یا بخش‌هایی از استایل هستند که در چند فایل دیگر مورد استفاده قرار می‌گیرند. برای استفاده از آنها در فایل اصلی، از دستور @use (یا @import در نسخه‌های قدیمی‌تر) استفاده می‌شود؛ همانطور که برای استفاده از میکسین‌ها از دستور @include استفاده می‌شد. استفاده از این روش می‌تواند مدیریت فایل‌ها را راحت‌تر کرده و با تقسیم استایل‌ها به چندین فایل، به افزایش سرعت سایت نیز کمک کند!
آموزش نصب Sass در ویندوز، لینوکس و مک
برای استفاده از پیش‌پردازنده Sass، ابتدا باید آن را در سیستم خود نصب کنید. رایج‌ترین روش برای این کار، استفاده از Node.js و npm است. این روش روی همه سیستم‌عامل‌ها (ویندوز، لینوکس و مک) قابل استفاده است و سریعترین روش محسوب می‌شود.
برای این کار کافیست:
- وارد سایت رسمی فریمورک Nodejs.org شده و آن را دانلود کنید.
- فایل را از حالت فشرده خارج کرده و باز کنید.
- در زمان نصب، مطمئن شوید تیک گزینه Node Package Manager فعال است.
- آن را نصب کنید.
- با فشرده دکمه‌های Win+R و تایپ عبارت CMD وارد Command Prompt شوید. همچنین می‌توانید از ترمینال ویندوز استفاده کنید.
- برای نصب Sass از NPM، دستور زیر را در ترمینال وارد کنید:
npm install -g sass
تفاوت Sass و SCSS چیست؟
Sass و SCSS در واقع دو سینتکس مختلف از یک پیش‌پردازنده واحد هستند و از نظر عملکرد، امکانات و خروجی نهایی کاملاً یکسان‌اند. تفاوت آنها فقط در نحوه نگارش کدها است.
Sass که گاهی با عنوان “Sass original” شناخته می‌شود، اولین نسخه از این زبان است و نگارشی مشابه زبان‌های بدون آکولاد دارد. SCSS نسخه‌ای جدیدتر و پرکاربردتر است که از نگارشی شبیه به CSS استفاده می‌کند و یادگیری و استفاده از آن برای طراحان ساده‌تر است. در تصویر زیر، مهمترین تفاوت‌های Sass و SCSS را مشاهده می‌کنید.
به دلیل شباهت بالای SCSS به CSS، اکثر توسعه‌دهندگان از این روش استفاده می‌کنند. این مورد مخصوصا در پروژه‌هایی که قبلاً با CSS نوشته شده‌اند، دیده می‌شود. با این حال، انتخاب بین آنها بیشتر به سلیقه و سبک کاری شما بستگی دارد و تفاوتی از نظر عملکرد بین آنها وجود ندارد.
بهترین زمان استفاده از Sass چیست؟
Sass یک پیش‌پردازنده قدرتمند برای CSS است که به توسعه‌دهندگان کمک می‌کند تا کدهای استایل خود را سازمان‌دهی کرده، زمان نوشتن کد را کاهش دهند و پروژه‌های بزرگ را با دردسر کمتری مدیریت کنند. در پروژه‌هایی که ساختار پیچیده دارند یا نیاز به مدیریت تنظیمات مرکزی (مانند رنگ‌ها و فونت‌ها) دارند، استفاده از Sass بسیار مفید است. علاوه بر این در پروژه‌هایی با تیم‌های بزرگ، امکان همکاری و نگهداری بالای کد وجود دارد و می‌توان روی Sass حساب کرد.
جالب است بدانید شرکت‌های بزرگی مانند Airbnb، Shopify، Github، Atlassian و Zapier از پیش‌پردازنده Sass در پروژه‌های خود استفاده کرده‌اند.
در چه مواردی بهتر است از Sass استفاده نکنیم؟
با وجود مزایای زیاد Sass، استفاده از آن در برخی شرایط منطقی نیست. در پروژه‌های کوچک یا موقت که ساختار ساده‌ای دارند، استفاده از Sass چندان به‌صرفه و سریع نیست. در این حالت، استفاده از CSS ساده انتخاب بهتری محسوب می‌شود.
همچنین، اگر پروژه شما به زمان‌بندی سریع نیاز دارد یا تیم شما تجربه کافی در استفاده از Sass ندارد، استفاده از آن ممکن است نتایج عکس داشته باشد.
از سوی دیگر، اگر از ابزارهایی مانند Tailwind CSS استفاده می‌کنید که استایل‌ها به‌صورت آماده و درون کلاس‌ها نوشته می‌شوند، استفاده از Sass ابدا ضروری نیست؛ بلکه ممکن است به دلیل تفاوت در ساختارهای مدیریت استایل، دچارت داخل و مشکل شوند!
در نتیجه، بهتر است تنها با توجه به نیاز واقعی پروژه، تصمیم بگیرید از Sass استفاده کنید یا نه؟
نتیجه‌گیری
پیش‌پردازنده Sass ابزاری قدرتمند برای توسعه‌دهندگان وب است که کدهای CSS را سریع‌تر نوشته و توسعه‌پذیرتر می‌کند. Sass قابلیت‌هایی نظیر استفاده از متغیرها، کدهای تودرتو، میکسین‌ها، ارث‌بری و کدنویسی ماژولار را در CSS به شما ارائه می‌دهد این زبان، مانند یک زبان برنامه نویسی استفاده کنید! Sass در دو نسخه Sass و SCSS ارائه شده که SCSS شباهت بیشتری به CSS دارد و رایج‌تر است و بهتر است در صورتی که با پروژه‌های بزرگ و تیمی سروکار دارید،از پیش‌پردازنده Sass استفاده کنید.
در نهایت، اگر تجربه‌ای در استفاده از Sass یا سایر پیش‌پردازنده‌های CSS دارید، می‌توانید تجربه و نظر خود را در بخش نظرات ارسال کنید!
نظری برای این مقاله ثبت نشده است