sass چیست و چه کاربردی دارد ؟

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

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

اگر شما به عنوان یک فرانت اند کار در شرکتی مشغول به کار شوید ، نمیتوانید حدس بزنید که کارفرما و یا مدیر شرکت ، یا مدیر بخش فرانت اند ، چه پروژه هایی را از شما درخواست خواهد کرد و به همین دلیل باید برای دیزاین هرنوع سیستمی آماده باشید . زبان css خود به تنهایی ، قدرت پیاده سازی هر نوع وب سایت و هر نوع دیزاینی را دارد اما در این بین عاقلانه نیست که به تنهایی از تمامی css استفاده کرده و پوسته طراحی کرد .

برای مثال در بخش واکنشگرایی سایت ، زبان css دستورات media را در بخش screen ارائه کرده است و شما میتوانید به راحتی و با شناخت نحوه کار این دستورات ، واکنشگرایی سایت خود را اجرا کنید ! اما حقیقتا دور از منطق است که خودمان دست به کد شده و برای تمامی قسمت های سایت ، دستورات مدیا بنویسیم ! در این شرایط به سراغ فریمورک ها خواهیم رفت . برای مثال فریمورک بوت استرپ !

فریمورک چیست ؟

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

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

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

اما موضوع این مقاله در رابطه با sass می باشد . اینکه sass چیست و در بخش فرانت اند چه استفاده هایی دارد . بعد از مفهوم فریمورک ، مفهوم دیگری تحت عنوان پیش پردازنده یا Preprocessor وجود دارد . پیش پردازنده ها ابزارهایی هستند که در کنار فریمورک ها ، برای سهولت در کدنویسی توسط زبان سی اس اس ارائه شده است اما دقیقا کار این پیش پردازنده ها چیست ؟

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

پیش پردازنده ، ابزاری است که قبل از تولید نسخه نهایی کد ، اجرا شده و بستری متفاوت را برای کدنویسی ارائه می کند . اما این مفهوم شاید برای شما کمی پیچیده باشد پس بهتر است آن را ساده تر کنیم . دو پیش پردازنده معروف به نام های sass و less وجود دارد که میتوان از هردو برای سهولت در کدنویسی سی اس اس استفاده کرد . اولین نکته که لازم است بدانید این است که برای تمامی پروژه های طراحی ، استفاده از پیش پردازنده لازم نیست و بهتر است برای پروژه هایی که حجم کد استایل آنها بسیار زیاد است از sass یا less استفاده کنید .

ماهیت ارائه پیش پردازنده اصولا بر این پایه است که با حجم کمتری از کدها ، کدهای بیشتری تولید شود . به عبارتی اگر شما چندین دستور مشابه برای یک المان دارید ، بخش های مشابه موجود در دستورات را یکپارچه کنید و تعداد خط کدهای پروژه شما کاهش پیدا کند ، سپس این کدها توسط پیش پردازنده ، به کدهای اصلی در زبان css کامپایل شوند . اگر یک نمونه از مقایسه بین css و sass را داشه باشیم میتوان به شکل زیر یک مثال ارائه نمود . یک دستور را در سی اس اس به شکل زیر تعریف می‌کنیم :

ul {
    list-style: none;
}

ul li {
    padding: 20px 5px;
    display: inline-block;
}

ul li a {
    text-decoration: none;
    font-size: 1rem;
    color: #faf4f4;
}

اکنون همین دستور را با خاصیت نستینگ (Nesting) در sass بررسی میکنیم :

ul {
  list-style: none;
 
  li {
    padding: 20px 5px;
    display: inline-block;
 
    a {
      text-decoration: none;
      font-size: 1rem;
      color: #faf4f4;
    }
  }
}

زمانی که از sass استفاده می شود ، لزومی به کدنویسی به شکل مستقیم داخل فایل style.css نیست و شما تمامی کدها را طبق اصول کدنویسی sass که تفاوت چندانی با اصول کدنویسی css ندارد ، داخل فایل هایی با فرمت scss نگارش می‌کنید و نهایتا با دستورات خاصی که در خط فرمان اجرا خواهید کرد ، این کدها به فایلهای با فرمت css تبدیل می شوند . در آینده برای هرنوع تغییر نیز لازم است تا این تغییرات داخل فایل های فرمت scss انجام شده و نهایتا بر روی فایل استایل اعمال شود .

زمانی که شما مشغول به کدنویسی هستید ، فایل های با فرمت scss داخل پروژه شما آدرس دهی نخواهند شد و در حقیقت این فایل ها فقط وظیفه دارند تا کدنویسی شما را کاهش داده و طبق اصول کامپایل خود ، فایل های css با دستورات css تولید کنند . خب اما چرا باید از این روش استفاده کرد ؟

چرا باید از sass استفاده کنیم !

با توجه به اینکه sass دایره کاربرد بیشتری داشته و دستورات آن ساده تر است ، ما این پیش پردازنده را به عنوان پیش پردازنده هدف در این مقاله بررسی میکنیم . sass مخفف Syntactically Awesome Stylesheets است . خروجی کدهای sass نهایتا فایل های css و همان دستورات css هستند . مرورگرها نمیتوانند دستورات sass را خوانده و اجرا کنند ، و لازم است تا توسط یک کامپایلر این دستورات به کدهای سی اس اس تبدیل شوند . پس چه دلیلی وجود دارد که از sass برای تولید فایل استایل استفاده کنیم و مستقیما داخل فایل sryle.css کد ننویسم ؟

پیشنهادی :

هدف اصلی استفاده از sass کاهش میزان کدنویسی و انعطاف در کنترل پروژه است . به عنوان یک مثال تصور کنید که فایل استایل شما 20.000 خط کد داشته باشد ، اگر این دستورات را به شکل مستقیم نگارش نکرده و از روش sass استفاده کنید ، شاید کدهای شما در داخل فایل sass به 5000 خط کد کاهش پیدا کند . درست است که نهایتا خروجی این 5000 خط نیز همان 20.000 خط کد سی اس اس خواهد بود ، اما هرزمان که نیاز به تغییر یا افزودن و کاستن کد بود ، شما با 5000 خط کد داخل فایل sass سروکار دارید نه با 20.000 خط کد داخل فایل سی اس اس ! این پیش پردازنده خاصیت هایی همچون mixin ها و nesting ها دارد که کدنویسی را مختصر و مفید و قابل فهم تر می کنند . یک نمونه از nesting را در کد ابتدای پروژه مشاهده کردید .

شما فایل سی اس اس خود با 20.000 خط کد را نهایتا داخل پروژه خواهید داشت اما یک ابزار خوب برای هندلینگ آن در دست دارید . اگر نیازمند تغییرات کلی در پروژه خود باشید ، لازم نیست تا خط به خط تمام 20.000 دستور را بررسی کرده و این تغییرات را اعمال کنید ، کافیست تا یک قسمت از فایل sass را تغییر دهید تا این تغییرات در تمام قسمت های پروژه و محل های مرتبط اعمال شود . این یک ویژگی بسیار اساسی در sass می باشد که انعطاف ایجاد تغییر در پروژه را افزایش خواهد داد .

در داخل sass شما میتوانید به کمک متغیر ها ، شرط ها ، ماکرو ها و ابزارهایی دیگر ، با css همانند یک زبان برنامه نویسی ( اما در سطوح پایین تر ) از نظر منعطف بودن برخورد کنید . اگر تمامی رنگ های به کار رفته در داخل پروژه شما ، در داخل متغیر های مشخصی قرار گیرند ، میتوانید صرفا با تغییر مقدار هر متغیر ، رنگ های جدید را در تمامی سطح پروژه اعمال کنید و این کوچکترین مزیت استفاده از پیش پردازند است . یک نمونه تعریف متغیر در sass :

$blue: #3498db;
$red: #e74c3c;
$white: #fff;
 
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 1rem;
  text-align: center;
  border-radius: 4px;
  color: $white;
}
 
.btn-primary {
  @extend .btn;
  background-color: $blue;
}
 
.btn-secondary {
  @extend .btn;
  background-color: $red;
}

این کد زمانی که به دستورات سی اس اس تبدیل شود ، خروجی زیر را ارائه خواهد کرد :

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}
 
.btn-primary {
  background-color: #3498db;
}
 
.btn-secondary {
  background-color: #e74c3c;
}

sass قدرت بسیاری در زمینه دستورات مدیا و بخش واکنشگرایی ( screen ) دارد . معمولا کدهای بخش مدیا کوئری کمی سخت به نطر می رسند و اگر از فریمورک هایی همچون بوت استرپ استفاده نشود ، تحلیل سیستم و طراحی کدها مشکل خواهد بود . اما sass در این قسمت نیز نهایت سهولت در کدنویسی را ارائه نموده که میتوانید با حداقل میزان کدنویسی در فایل های sass ، تمامی کدهای لازم را داخل فایل استایل هدف تولید کنید .

چگونه از sass استفاده کنیم ؟

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

استفاده از sass دشوار نیست اما همانند سایر زبان های طراحی هم نیست و برای شروع به کار با آن نیازمند نصب برخی ابزارها هستید ! چون sass بر پایه زبان Ruby توسعه داده شده است ، لذا قبل از هرچیزی باید از Ruby Installer استفاده کنید و این نرم افزار را بر روی سیستم خود نصب کنید . سپس توسط این نرم افزار ، پیش پردازنده sass را بر روی پروژه خود سوار کنید . پس از انجام این دو مرحله باید توسط خط فرمان ویندوز ( اگر از نرم افزارهایی همچون ویژوال استودیو کد استفاده می کنید ، داخل این نرم افزار ها نیز خط فرمان وجود دارد ) به داخل پروژه خود مسیردهی نموده ، و دستورات شروع کار با sass را توسط خط فرمان اجرا کنید .

هر تغییری که در داخل برنامه لازم به اجرا باشد ، برای مثال خروجی گرفتن داخل فایل css ، یا بازگشت کد ها به حالت قبلی و … همه این فرمان ها توسط خط فرمان اجرا خواهند شد و هیچ بخش ویژوالی برای تبدیل کدهای sass به css وجود ندارد . کار کردن با این پیش پردازنده بسیار لذت بخش است و اگر در دوره جامع sass که داخل سایت ارائه شده است شرکت کرده باشید ، خواهید دید که کدنویسی در بستر این ابزار بسیار لذت بخش است چرا که طراحی را به سمت و سوی دیگری سوق داده و شما شاید برای اولین بار از ابزارهایی همچون خط فرمان استفاده خواهید کرد . در دوره آموزشی sass ریز به ریز این موارد خدمت علاقمندان تدریس شده است .

بخش های اصلی موجود در sass

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

• بخش متغیر ها : در بخش هایی که حجم زیادی از مقادیر مشابه به هم وجود دارد ( مثلا برای رنگ های سازمانی یا مقادیر ثابت ) میتوان متغیر ها را به شکل نامحدود تعریف کرد
• بخش mixin ها : امکان خلاصه نویسی کد هارا ارائه می کند و بجای نوشتن چندین خط کد تکراری میتوان تمام آن را داخل یک میکسین قرار داده و در مواقع لزوم آن را فراخوانی کرد
• بخش توابع : توابع به شما اجازه خواهند داد تا یک ماشین تعریف کنید و توسط ورودی های متفاوت ، خروجی های متفاوت بگیرید
• بخش import ها : این امکان را به شما خواهد داد تا چندین فایل با فرمت sass داشته و کدهای خود را تقسیم کنید و نهایتا تمامی آنها را داخل یک فایل فراخوانی کنید
• بخش nesting : این امکان را به شما خواهد داد تا به شکل تودرتو کدنویسی کنید و هربار دستورات یک بخش را تکرار نکنید ( مثال در بالای همین صفحه )
• بخش extend : امکان ارث بری ویژگی ها از کلاس های دیگر را به شما خواهد داد تا حجم کدها کاهش پیدا کند

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

مدت زمان یادگیری Sass چقدر است ؟

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

اگر با میزان مهارت مناسبی شروع به یادگیری این پیش پردازنده نموده ، در چارچوب یک دوره آموزشی مناسب پیشروی کنید ، میتوانید در کمتر از 2 روز تمامی دستورات کار با این پیش پردازنده را یادبگیرید اما همیشه یادگیری کافی نیست و تثبیت کننده آموزش های شما ، تمرین و تکرار است و لازم است تا نمونه های مختلفی را از نصب Sass بر روی پروژه گرفته تا انجام تغییرات و … انجام دهید تا بخوبی این پییش پردازنده را ملکه ذهن خود کنید .