Sass چیست؟

Sass مخفف کلمات Syntactically Awesome Stylesheets است. Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند. به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند. Sass مدیریت و نگهداری استایل های css را ساده‌تر می‌کند. به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.

این کار باعث می شود کار خود را سریعتر پیش ببریم. به خاطر داشته باشید زمانی که در Sass کدهای خود را مینویسیم، مرورگر ها نمی توانند این کدها را درک کنند و دلیل این عدم درک هم این است که کدهای نوشته شده به زبان css نیستند.

 پس ما به یک کامپایلر نیاز داریم تا کد های نوشته شده در Sass را به css تبدیل کنیم. نرم افزار های زیادی برای این کار وجود دارند که بعضی از آنها عبارتند از :

• Hammer
• CodeKit
• Compass
• Koala

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

پیش‌پردازنده CSS در حقیقت یک زبان اسکریپتی است که با اجازه دادن به توسعه‌دهندگان جهت نوشتن کدها در یک زبان و کامپایل آن به صورت CSS باعث توسعه CSS می‌شود. به احتمال بسیار زیاد Sass محبوب‌ترین پیش‌پردازنده موجود باشد اما موارد دیگری نیز مانند Less و Stylus وجود دارند.

اگر در دنیای CSS تازه‌کار هستید پیشنهاد می‌شود که فعلا به سراغ پیش‌پردازنده‌ها نروید. چنین موضوعی برای پلاگین‌ها و فریمورک‌ها نیز صادق است. با این وجود که آن ها باعث می‌شوند تا سرعت و کارایی بالایی داشته باشید اما مهمتر از آن این است که درک بسیار خوبی از موارد پایه‌ای و کلی CSS پیدا نمایید. همواره سعی کنید که قبل از میانبر زدن اصل قضیه را به خوبی درک کنید.

چرا بهتر است از Sass استفاده کنیم؟

اگر شما با دوستان خود که در زمینه front-end کار می‌کنند، صحبت کرده باشید ممکن است آنها به شما گفته باشند html و css زبان هایی با نقطه ضعف های بزرگی هستند. دلیل آن هم این است که کدهای آنها از پیش تعریف شده است و بارها تکرار می‌شود و شما مجبورید کد های تکراری بنویسید.

اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.

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

نحوه ی استفاده از Sass

Sass با تمام نسخه های CSS هماهنگ میباشد و تنها چیزی که برای استفاده از CSS نیاز میباشد نصب زبان Ruby  است چرا که Sass با Ruby توسعه داده شده است

قواعد دستوری Sass: 

SCSS یا Sassy CSS که با فرمت فایلی .scss ایجاد میشود و مشابه قواعد دستوری خود CSS است .

Indented یا simply called Sass که با فرمت .sass ایجاد میشود و شاید مشابه با قواعد دستوری CSS نباشد ولی کدنویسی سریعتری را به ارمغان می آورد

این دو نوع فایل با استفاده از دستور sass-convert قابل تبدیل به یکدیگر هستند .

متغیر ها در Sass : 

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

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

برای مثال کد زیر را ببینید :

نتیجه ی کدهای بالا در CSS بصورت زیر است ( بعد از کامپایل ) :

کدهای تو در تو در Sass :

Nesting یا کدنویسی تو در تو مثل شمشیر دو لبه است . کدهای تو در تو در Sass نه تنها باعث کاهش کدهای نوشته شده میشود بلکه باعث مرتب شدن ، خوانایی بالا و جلوگیری از خطاهای احتمالی میشود .

برای درک بیشتر به مثال زیر دقت کنید

کد نوشته شده با Sass: 

و نتیجه ی کامپایل شده کد بالا به CSS: 

ایمپورت کردن قطعه کد دیگر در فایلSass: 

partials یا قطعه کد ها ، فایل هایی با قطعه کدهای کوچک هستند که قابل ایمپورت به دیگر فایل های Sass میباشد . حال با این قابلیت CSS میتوانید ماژولار باشد یعنی قطعه کدی را شخص دیگری بنویسد و به شما بدهد یا از اینترنت دانلود کنید و به راحتی در کدهای خود وارد کنید !

یک partial فایلی هست که به این شکل نام گذاری میشود . ابتدا نام partial و سپس _ و سپس  partial.scss  :  بصورت کاملتر partial.scss_

دستور @import به شما اجازه میدهد فایل های partial خود را وارد کنید 

مثال :

نحوه ی ایمپورت کردن فایل بالا در Sass: 

و نتیجه ی کامپایل شده بهCSS:

توجه : زمانی که شما فایل partial را وارد میکنید تنها نام فایل را بنویسید نیازی به نوشتن _ و کلمه ی partial و .scss نیست

گروه بندی یا Mixin در Sass :

فرض کنید یک دسته کد دارید که میخواهید آنها را چند جای مختلف استفاده کنید و همچنین پارامتری هم برای آن ارسال کنید یک چیز شبیه توابع در زبان های برنامه نویسی دیگر 

مثال زیر دقت کنید :

در کد بالا میبینید که border-radius با کدهای زیادی یکبار نوشته شده است ولی بعدا میتوانید هر جا استفاده کنید و مقدار متغیر $radius را هم عوض کنید

نتیجه ی کدهای بالا در CSS کامپایل شده به شکل زیرا ست :

ارث بری و گسترش یا Extend/Inheritance درSass : 

دستور @extend در Sass یکی از دستورات کاربردی در Sass هست که باعث جلوگیری از کدنویسی مجدد میشود و مبحث DRY یا Dont Repeat Your Self مطرح میشود .

برای اینکه شما کلاس های متعددی در المان های HTML خود وارد نکنید بهتر است با استفاده از این دستور از class های دیگر ارث بری کنید و ویژگی های جدید اضافه کنید .

عملگرها درSass: 

وجود عملگرها در CSS به شما این امکان را میدهد که کارهای بیشتری را انجام دهید مثلا px را به درصد تبدیل کنید و بالعکس .

شما به عملیات حسابی ساده مثل جمع ، تفریق ، ضرب و تقسیم دسترسی دارید و میتوانید اعداد و مقادیر را محاسبه کنید.

مقایسه Sass و Scss

رایج ترین سینتکس مورد استفاده به عنوان “SCSS” شناخته می‌شود (برای “Sassy CSS”). Scss، سینتکس CSS ای که به طور معمولی نوشته می‌شود را می‌گیرد و ویژگی‌های فوق العاده‌ای را که همراه Sass است به آن می‌دهد. این بدان معناست که هر شیوه‌نامه CSS3 (CSS Stylesheet) معتبر، به اندازه‌ی SCSS معتبر است. فایل‌های SCSS دارای پسوند .scss هستند. این سینتکس برای توسعه‌دهندگان بسیار کاربردی است. زیرا تبدیل استایل‌های CSS معمولی به Scss را بسیار آسان‌تر می‌کند

سینتکس دوم (که سینتکس قدیمی‌تری است) Sass نام دارد. Sass برای جذاب‌تر شدن CSS ایجاد شده است. همچنین با حذف آکولادها (curly-braces) و سمی‌کالن‎ها (semi-colons) کدهای CSS را کارآمدتر کرده است. Sass از تورفتگی خطوط برای تعیین بلوک‌ها استفاده می‌کند. فایل‌های موجود در این سینتکس، از پسوند .sass استفاده می‌کنند.