نصب و راه اندازی sass

نصب sass به کمک npm ٬ yarn

برای اینکه بتونیم از sass در پروژه هامون استفاده کنیم باید به کمک بسته مدیریت پکیج در سیستمون نصب کنیم‌‍. ابتدا باید node.js رو نصب کنید و متناسب با نسخه ای که نصب کردید ٬ نسخه مناسب sass رو نصب کنید.

بعد از نصب node.js ٬ میتونین آخرین نسخه از npm که با node نصب شده را به کمک دستور زیر ببینین:

npm -v

حالا به کمک npm یا yarn میتونین sass روی سیستمتون نصب کنید(yarn یک بسته مدیریت پکیج دیگر همچون npm هست که بعضی از برنامه نویسان از آن استفاده میکنند٬ با این لینک نحوه نصب و استفاده از اون میتونین یاد بگیرین)

npm install -g sass
//or can add package with yarn
yarn add sass 

راه اندازی و کامپایل sass در vs code

برای استفاده راحت و بهینه از sass من از افزونه Live Sass Compiler استفاده میکنم و قرار نصب و تنظیمات اولیه اون در ادامه میگم. این افزونه از طریق تب extensions, در vscode میشه نصب کرد.

قدم دوم کامپایل sass/scss

قدم دوم ما کامپایل استایلی که نوشتید هست٬ بعد از ذخیره فایلتون در قسمت تب های پایین vscode عبارت watch sass به همراه یک آیکون چشم در کنارش می بینین که با کلیک کردن اون کد های sass شما کامپایل شده و به css تبدیل شده و کافیه که فقط آدرس فایل css ساخته شده رو به برنامه تون اضافه کنین در نهایت استایل های شما اعمال میشه.

تنظیم مسیر فایل کامپایل شده (stylesheet)

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

در vscode از تب های بالای صفحه طبق زیر پیش برین

file > preferences > setting

از پنل باز شده تب extensions انتخاب کنید و از افزونه های نصب شده live sass compiler پیدا کنین و "edit_in_setting.json" انتخاب کنید.

حالا به کدهای فایل تنظیمات دسترسی دارید. میتوانید با کپی کردن کد زیر در فایل json خود تنظیمات مورد نظر اعمال کنید.

&quotliveSassCompile.settings.formats&quot: [
       // This is Default.
        // {
        //     &quotformat&quot: &quotexpanded&quot,
        //     &quotextensionName&quot: &quot.css&quot,
        //     &quotsavePath&quot: &quot~/../css/&quot
        // },
        //Or you can compress your css
        {
            &quotformat&quot: &quotcompressed&quot,
            &quotextensionName&quot: &quot.min.css&quot,
            &quotsavePath&quot: &quot~/../css/&quot
        }
    ],

حالا کد های شما در پوشه css و با پسوند (yourstyle.min.css) ذخیره میشود:

توضیح کدهای json داخل setting.json :

داخل این کد آبجکت های داریم که در اینجا به توضیح ۳ مورد از آنها میپردازم.

۱-بخش format : فرمت فایل هایی که ذخیره میشود بصورت فشرده compressed باشد یا در حالت توسعه expanded

۲- بخش extensionName : اگر فرمت فایل بصورت فشرده باشد باید مقدار "min.css" نوشته شود و اگر فایل در حال توسعه ذخیره شده باید ".css" نوشته شود.

۳- بخش savePath : مسیر خروجی فایل های کامپایل شده و نام پوشه خروجی فایل های stylesheet یا css است.

امیدوارم که این مقاله به دردتون بخوره و در استفاده از sass لذت ببرید ??