اگر به تازگی وارد دنیای طراحی وب شده‌اید مطمئنا نام Sass یا پیش‌پردازنده‌ها را شنیده‌اید. اگر مطمئن نیستید که Sass چیست و نمی‌دانید که باید از آن استفاده کنید یا خیر، ما امروز قصد داریم به شما کمک کنیم.
به صورت کوتاه Sass یک پیش‌پردازنده CSS است، پیش‌پردازنده Sass کمک می‌کند تا ما از ویژگی‌های منحصر به فردی در داخل CSS استفاده کنیم. ویژگی‌هایی مانند متغیرها، قواعد تو در تو و موارد مختلف دیگر. هدف استفاده از این موارد این است که بتوانیم روند کدنویسی را ساده‌تر و مؤثرتر کنیم. بیایید با جزئیات بیشتر به آن نگاه کنیم.
پیش‌پردازنده CSS چیست؟
پیش‌پردازنده CSS در حقیقت یک زبان اسکریپتی است که با اجازه دادن به توسعه‌دهندگان جهت نوشتن کدها در یک زبان و کامپایل آن به صورت CSS باعث توسعه CSS میشود. به احتمال بسیار زیاد Sass محبوب‌ترین پیش‌پردازنده موجود باشد اما موارد دیگری نیز مانند Less و Stylus وجود دارند.
اگر در دنیای CSS تازه‌کار هستید پیشنهاد میشود که فعلا به سراغ پیش‌پردازنده‌ها نروید. چنین موضوعی برای پلاگین‌ها و فریمورک‌ها نیز صادق است. با این وجود که آن ها باعث می‌شوند تا سرعت و کارایی بالایی داشته باشید اما مهمتر از آن این است که درک بسیار خوبی از موارد پایه‌ای و کلی CSS پیدا نمایید. همواره سعی کنید که قبل از میانبر زدن اصل قضیه را به خوبی درک کنید.
Sass چیست؟
Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده است که CSS را قادر می‌سازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند. در حقیقت Sass مانند یک اکستنشن برای CSS عمل می‌کند. Sass کمک می‌کند که همه چیز را سازماندهی شده نگه داریم و فایل‌های استایل‌شیت را با سرعت بیشتری ایجاد کنیم.
Sass با تمام نسخه‌های CSS سازگاری دارد. برای نصب Sass راه‌های مختلفی وجود دارد که در قسمت مستندات خود وبسایت بیان شده است.
چرا بهتر است از Sass استفاده کنیم؟
اگر شما با دوستان خود که در زمینه front-end کار می‌کنند، صحبت کرده باشید ممکن است آنها به شما گفته باشند html و css زبان هایی با نقطه ضعف های بزرگی هستند. دلیل آن هم این است که کدهای آنها از پیش تعریف شده است و بارها تکرار میشود و شما مجبورید کد های تکراری بنویسید.
اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.
در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.
Sass دارای دو گزینه سینتکس است:
- SCSS (Sassy CSS): استفاده از فایل با فرمت .scss که سازگاری بالایی با سینتکس CSS دارد.
- دندانه‌دار (همان Sass): از فرمت .sass استفاده می‌کند و به صورت دندانه‌ای است -برخلاف حالت }{-. این مورد نیز به با CSS سازگاری دارد و نوشتن آن سریع‌تر است.
نکته اینجاست که میشود هر دو سینتکس را با استفاده از دستور sass-convert به همدیگر تبدیل کرد.
درست مانند دیگر زبان‌های برنامه‌نویسی Sass نیز به شما اجازه می‌دهد که بتوانید متغیرهایی را تعریف کرده و اطلاعاتی را در آنها قرار دهید. برای مثال می‌توانید مقدار یک رنگ را در یک متغیر قرار داده و در برنامه چندین بار از آن استفاده کنید. این موضوع کمک می‌کند که بتوانید به سرعت تنها با تغییر یک قسمت (متغیر) رنگ المان‌های مختلف را تغییر دهید.
ویژگی های sass:
وراثت یکی از مفیدترین ویژگی های Sass است. با استفاده از گسترش پذیری می توانیم مجموعه ای از مشخصه های css را از یکی به دیگری منتقل کنیم. گسترش پذیری زمانی استفاده میشود که چندین عنصر دارای اشتراکاتی در مشخصه های css باشند. استفاده از گسترش پذیری به شدت در نوشتن کد های تکراری صرفه‌جویی می‌کند.
نتیجه گیری
Sass یک ابزار قدرتمند است که به ما اجازه می دهد کارهای فوق العاده ای را انجام دهیم. پس اگر هنوز کار با آن را شروع نکرده اید اکنون زمان آن فرا رسیده است که از این ابزار قدرتمند استفاده کنید.
بیشتر بدانیم : آموزش sass