آموزش Sass به همراه مثال (قسمت اول)

شاید اسمشو شنیده باشید ولی ندونید برای چی استفاده میشه، برا همین میخوام تو این مقاله بهش بپردازم. Sass یه پیش پردازنده برای Css هست، در واقع Sass یسری امکانات اضافی و پرفورمنس بهتری رو برای ما به ارمغان میاره و میشه گفت Sass محبوب ترین و پر کاربردترین پیش پردازنده برای Css هست.

برای اضافه کردن Sass به پروژه کافیه افزونه کامپایل کدهای Sass به Css رو توی کد ادیتورمون نصب کنیم و به جای پسوند css. برای استایل هامون از پسوند scss. یا sass. استفاده کنیم.تفاوت بین پسوندهای scss. و sass. تو سینتکسشونه و در عمل هیچ تفاوتی با هم ندارن، توی sass از {} و... استفاده نمیشه ولی توی scss از مواردی که در Css خام استفاده میکنیم استفاده میشه و خوانایی راحت تری داره، برای مثال های این مقاله هم از سینتکس scss استفاده میکنیم.

حالا بریم نحوه نصب scss روی کد ادیتور vscode و همچنین نحوه کامپایل کردن کدهای scss به css رو بهتون توضیح بدم.

اول افزونه های sass و live sass compiler رو بر روی vscode خودمون نصب میکنیم و توی vscode مون یه قسمتی فعال میشه به اسم watch sass سپس باید بریم توی setting کد ادیتورمون و برگه setting.json رو باز میکنیم و سپس در آخر این تنظیمات کد زیر رو در انتها قرار میدیم:

&quotliveSassCompile.settings.formats&quot: [{
&quotformat&quot: &quotexpanded&quot,
&quotextensionName&quot: &quot.css&quot,
&quotsavePath&quot: &quot./css&quot
}]

معنی این کد این میشه که فرمتی که قراره css هامون ذخیره بشه شبیه همون فایلای css خودمونه و بصورت css. ذخیره میشه و محل ذخیره هم در قسمت savePath مشخص کردیم که قابل تغییره، سپس برای اینکه بتونیم کدهای scss خودمون رو به css تبدیل کنیم، کدهایی که تو scss رو زدیم بعدش روی watch sass میزنیم و بصورت اتوماتیک کدهای scss مون در فایل css ای که محل ذخیره شو مشخص کردیم کامپایل میشه و ما توی html مون ادرس اون فایل css رو link میکنیم و تغییرات روی استیال سایتمون اعمال میش شوند.

در قسمت بعدی نحوه کد زدن با sass رو بهتون آموزش میدم.