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

در طول این دوره، شما درباره‌ی CSS یاد گرفته‌اید،
و حدس می‌زنم که در مقطعی از این دوره، این فکر در ذهن‌تان شکل گرفته باشد:
ببین CSS، من عاشقت هستم چون اجازه می‌دهی محتوا را هر طور که بخواهم استایل‌ بدهم.
اما CSS، من ازت متنفرم.
چرا مجبورم این‌قدر خودم را تکرار کنم؟
چرا نمی‌توانی رنگ‌هایی که می‌خواهم استفاده کنم را به خاطر بسپاری؟
چرا هیچ‌چیز را به خاطر نمی‌سپاری؟
چرا به عنوان یک زبان کامپیوتری، ابزارهایی برای انعطاف‌پذیری و پویایی در اختیارم نمی‌گذاری؟

خب، شما تنها نیستید.
همه‌ی ما این فکر را در ذهن‌مان داشته‌ایم.
و Sass نتیجه‌ی تلاش برخی از درخشان‌ترین ذهن‌های دنیای وب است
که گرد هم آمدند و یک زبان افزونه برای CSS ساختند
تا تمام آن مشکلات و محدودیت‌هایی که همین الان ازشان شکایت کردم را حل کند.

پس سؤال این است:
Sass دقیقاً چیست؟
زبان افزونه یعنی چه؟
برای پاسخ دادن به این سؤال‌ها، بیایید نگاهی به چند تصویر بیندازیم.

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

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

اینجاست که Sass وارد میدان می‌شود.
ذهن‌های درخشان پشت Sass، سینتکس استایل‌برگ مخصوص خودشان را اختراع کردند.
حالا اگر از این سینتکس جدید استفاده کنیم و آن را مستقیماً به مرورگر وب بدهیم،
مرورگر آن را نمی‌فهمد و هیچ محتوایی استایل نخواهد گرفت.
پس دوباره، ما خوشحالیم چون نوشتن کد لذت‌بخش‌تر شده،
اما مرورگر هنوز هم ناراحت است.

اما ذهن‌های خلاق پشت Sass به همین‌جا بسنده نکردند.
آن‌ها یک سینتکس اختراع کردند و سپس کامپایلری ساختند
که کد Sass، یعنی همان سینتکس Sass را
به CSS معمولی تبدیل می‌کند تا بتوان آن را به مرورگر وب داد.
پس مرورگر خوشحال است و ما هم خوشحالیم،
چون نوشتن کد بسیار لذت‌بخش‌تر شده.

🎯 هدف ما در این درس این است که با سینتکس Sass آشنا شویم
و حس کلی از ویژگی‌های پایه‌ی زبان‌های افزونه پیدا کنیم.

حالا، برای اینکه بتوانید در طول درس یا بلافاصله بعد از آن همراهی کنید،
نیاز دارید که به «واسطه» دسترسی داشته باشید،
یعنی همان کامپایلر Sass، ابزاری که سینتکس Sass را به CSS معمولی تبدیل می‌کند.

راه‌های زیادی برای دسترسی به کامپایلر Sass وجود دارد،
اما به نظر من، دو روش واقعاً منطقی‌تر هستند:
۱. روش آسان
۲. روش حرفه‌ای

بیایید با روش اول، یعنی روش آسان شروع کنیم،
و آن به سادگی بازدید از وب‌سایت CodePen است، درست است؟
وب‌سایت CodePen در حال حاضر codepen.io است.
بروید و یک «pen» جدید بسازید.

سپس در ستون CSS، روی آیکون چرخ‌دنده‌ی تنظیمات کلیک کنید.
در اینجا گزینه‌ای به نام CSS Preprocessor می‌بینید،
و می‌توانید انتخاب کنید که به جای «none» از چه چیزی استفاده شود.
آن را روی SCSS تنظیم کنید.

می‌دانم که در اینجا گزینه‌ای به نام Sass هم می‌بینید،
و می‌دانم که موضوع این درس هم Sass است،
اما در واقع ما می‌خواهیم از SCSS استفاده کنیم،
که مخفف Sassy CSS است.

اگر از گزینه‌ای استفاده کنید که واقعاً نامش Sass است،
باید نقطه‌ویرگول‌ها را از انتهای هر خط حذف کنید
و چند تغییر دیگر در سینتکس اعمال کنید.
اما اگر از SCSS یا Sass CSS استفاده کنیم،
در بیشتر موارد سینتکس ما دقیقاً مثل CSS معمولی باقی می‌ماند،
فقط ویژگی‌های جدید و جذابی به آن اضافه می‌شود.

پس آن را روی SCSS تنظیم کنید، سپس روی Done یا Close کلیک کنید.
و تمام!
حالا می‌توانید Sass-y CSS را مستقیماً در این ستون بنویسید،
و پشت صحنه، CodePen آن را به CSS معمولی تبدیل می‌کند.

مثلاً در ستون HTML، تصور کنید یک div با کلاس box داریم
و داخل آن یک پاراگراف داریم که می‌گوید Hello World.
خب، در ستون CSS می‌توانیم یک قانون بنویسیم که کلاس box را هدف قرار دهد
و بگوییم border: 3px solid orange.
و سپس داخل همین قانون، یک قانون تو در تو بنویسیم
که عنصر p را هدف قرار دهد و بگوییم color: blue.
و می‌بینید که این تغییر اعمال شده.

در CSS معمولی، نمی‌توانید یک قانون را داخل قانون دیگر بنویسید.
اما در Sass یا SCSS، کاملاً می‌توانید این کار را انجام دهید
و کلی ویژگی دیگر هم دارید.

اگر بخواهید CSS تولیدشده را ببینید،
می‌توانید روی فلش کوچک کلیک کنید و گزینه‌ی View Compiled CSS را انتخاب کنید.
وقتی روی آن کلیک می‌کنم، می‌بینید که Sass پشت صحنه آن قانون تو در تو را برایم تولید کرده.
چون قانون p داخل کلاس box بود.
خب، این برای ما منطقی است، اما برای مرورگر منطقی نیست،
پس Sass این انتخاب‌گر جدید را برایمان تولید می‌کند.

و برای برگشتن به کد Sass، دوباره روی فلش کلیک کنید و گزینه‌ی View Uncompiled CSS را انتخاب کنید.
عالیه!

این روش جواب می‌دهد،
اما تصور کنید که نمی‌خواهید یک وب‌سایت واقعی و پیچیده را با CodePen بسازید، درست است؟
برای پروژه‌های واقعی و پیچیده،
می‌خواهید از ویرایشگر متن خودتان استفاده کنید، احتمالاً VS Code.

پس تا اینجا روش آسان برای دسترسی به کامپایلر Sass را دیدیم،
یعنی استفاده از CodePen.
اما حالا بیایید درباره‌ی روش حرفه‌ای یاد بگیریم.

برای اینکه بتوانید کد Sass را مستقیماً روی کامپیوترتان کامپایل کنید،
یا در واقع برای انجام هر نوع وظیفه‌ی خودکار در توسعه‌ی مدرن وب،
باید چیزی به نام Node.js را روی کامپیوترتان نصب کنید.

نگران نباشید، Node کاملاً رایگان است
و میلیون‌ها نفر و شرکت‌های بزرگ از آن استفاده می‌کنند.

پس همین حالا در یک تب جدید مرورگر، عبارت Node.js را جستجو کنید،
یا به وب‌سایت رسمی آن بروید: nodejs.org
از این سایت، نسخه‌ی LTS را از گوشه‌ی پایین سمت چپ دانلود

حتماً Bahram عزیز! در ادامه ترجمه‌ی کامل، کلمه‌به‌کلمه و با لحن آموزشی و دوستانه‌ی بخش دوم متن شما را می‌خوانید. این ترجمه دقیقاً مناسب اسکریپت ویدیویی آموزشی است و هیچ بخشی از آن حذف یا خلاصه نشده:

---

🎬 «خب حالا در سمت چپ صفحه، بخش File Explorer را داریم.
بیایید روی آن راست‌کلیک کنیم و گزینه‌ی New File را انتخاب کنیم.
نام فایل را بگذاریم main و به‌جای پسوند .css، آن را با پسوند .scss ذخیره کنیم،
درست است؟ برای Sass-y CSS.

حالا در این فایل جدید main.scss بیایید کمی کد بنویسیم.
چرا همان مثال Sass از CodePen را امتحان نکنیم؟
مثلاً یک قانون که کلاس box را انتخاب کند و بگوییم padding: 10px؛
و سپس داخل همین قانون، یک قانون تو در تو بنویسیم
برای هر عنصر پاراگرافی که داخل یک عنصر با کلاس box قرار دارد.
پس براکت باز و بسته، و بنویسیم color: orange؛
و فایل را ذخیره کنیم.

این از دیدگاه Sass CSS منطقی است،
اما این کد، CSS معمولی و معتبر نیست.
پس در این مرحله، می‌خواهیم این فایل را به یک فایل CSS سنتی تبدیل کنیم.
اینجاست که Node وارد عمل می‌شود.

حالا می‌خواهم دوباره Command Line را باز کنید.
دوباره از مسیر View و سپس Terminal، یا با میان‌بر Ctrl+J در ویندوز یا Cmd+J در مک.

حالا در Command Line، می‌خواهم دقیقاً این دستور را با من تایپ کنید:

npx sass –watch main.scss output.css

وقتی این دستور را تایپ کردید، Enter بزنید.
چند ثانیه طول می‌کشد، Sass Compiler دانلود می‌شود
و حالا می‌بینید که آماده است.
می‌گوید Sass در حال مشاهده‌ی تغییرات است
و تا زمانی که به آن نگویید متوقف شود، در پس‌زمینه اجرا خواهد شد.

بیایید امتحانش کنیم.
در فایل sass ما، داخل همان قانون تو در تو، یک دستور جدید اضافه کنیم:
مثلاً margin: 10px؛
فایل را ذخیره کنید، و حالا در Command Line می‌بینید که نوشته:
Compiled main.scss to output.css

و حالا یک فایل جدید در پوشه‌مان داریم.
اگر آن را باز کنید، فایل output.css را می‌بینید. عالیه!
می‌بینید که در حال کامپایل و تولید CSS سنتی است.

ایده این است که فایل output.css همان فایلی است
که در بخش head صفحه‌ی وب‌تان لینک می‌کنید.
مرورگر وب این فایل را می‌فهمد.
اما ما، به عنوان انسان، می‌توانیم کد را در فایل sass بنویسیم.

پس این task را در حال اجرا نگه می‌دارید،
و وقتی کارتان تمام شد و خواستید Sass دیگر شما را دنبال نکند،
فقط کافی‌ست Ctrl+C را در Command Line فشار دهید.
می‌بینید که متوقف می‌شود.

این عالی است.
ما حالا یک محیط Sass فعال روی کامپیوترمان داریم.
و فقط کافی‌ست این دستور را جایی یادداشت کنید تا مجبور نباشید حفظش کنید.
چون هر بار که پروژه‌تان را در VS Code باز می‌کنید،
باید این دستور را اجرا کنید تا Sass شروع به مشاهده‌ی تغییرات کند.

البته، اگر مثل من باشید، احتمالاً نمی‌خواهید هر بار یک دستور خاص را به خاطر بسپارید.
پس حالا می‌خواهم یک روش جایگزین به شما نشان دهم
که با استفاده از Node، Sass را برایمان کامپایل کند.

در منابع این درس، یک فایل قابل دانلود به نام package.json وجود دارد.
پس همین حالا در Udemy، این فایل را دانلود کنید
و آن را از پوشه‌ی Downloads به پوشه‌ی learning-sass که ساختیم منتقل کنید.

خب، من همین الان این کار را انجام دادم.
و حالا در VS Code می‌بینید که در نوار کناری، فایل package.json ظاهر شده.

قبل از ادامه، باید روشن کنم که اگر با اجرای دستی دستور مشکلی ندارید،
لزومی ندارد از روش package.json استفاده کنید.
هدف این روش این است که دیگر مجبور نباشید دستور خاصی را حفظ کنید.

وقتی فایل package.json را به پوشه‌ی پروژه منتقل کردید،
در Command Line فقط کافی‌ست یک بار این دستور را اجرا کنید:

npm install

Enter بزنید. عالیه!
و حالا این تنها دستوری است که باید حفظ کنید.
هر زمان که خواستید Sass پروژه‌تان را مشاهده کند، فقط کافی‌ست بنویسید:

npm run sass

همین!
و به نظر من، این خیلی راحت‌تر از دستور قبلی است.

حالا Enter بزنید، و این دقیقاً همان کار را انجام می‌دهد.
شروع به مشاهده‌ی فایل‌ها می‌کند.

در فایل main.scss اگر رنگ را به blue تغییر دهید و ذخیره کنید—
اوه!
در Command Line یک خطا ظاهر شد.
در واقع خوشحالم که این اتفاق افتاد،
چون می‌توانم برایتان توضیح دهم چه شده.

حالا بروید داخل فایل package.json
و حدوداً در خط ششم، می‌بینید که نوشته شده:

“sass”: “sass src.scss compiled.css”

این همان دستوری است که قبلاً دستی اجرا می‌کردیم.
و خطا فقط به این دلیل است که داریم به فایلی اشاره می‌کنیم که وجود ندارد.
این دستور دنبال فایلی به نام src.scss می‌گردد.
پس فقط آن را تغییر دهید به نام فایلی که خودتان ساختید،
یعنی main.scss

فایل package.json را ذخیره کنید.
و حالا در Command Line، Ctrl+C بزنید تا task فعلی متوقف شود
و دوباره اجرا کنید:

npm run sass

Enter بزنید،
مثلاً رنگ را به green تغییر دهید و ذخیره کنید.
و حالا می‌بینید که فایل جدیدی به نام compiled.css تولید شده.

می‌دانم کمی گیج‌کننده است چون قبلاً نام فایل را output.css گذاشته بودیم،
اما واقعاً فقط داریم نام فایل ورودی و خروجی را مشخص می‌کنیم.
می‌توانید هر اسمی که خواستید انتخاب کنید.

وقتی این تنظیمات را با نام فایل‌های دلخواه‌تان انجام دادید،
دیگر لازم نیست به آن فکر کنید یا تغییرش دهید.
هر روز که کارتان را شروع می‌کنید، فقط کافی‌ست بنویسید:

npm run sass

و وقتی خواستید متوقفش کنید، Ctrl+C بزنید.

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

تنها چیزی که در این درس دیدیم این بود که می‌توانیم یک قانون را داخل قانون دیگر بنویسیم.
اما در ویدیوی بعدی، قرار است همه چیز را درباره‌ی Sass و ویژگی‌های مختلفش یاد بگیرید.

در ویدیوی بعدی، زیاد نگران نام فایل‌ها و ساختار پوشه‌های من نباشید،
چون در این ویدیو یاد گرفتید چطور واقعاً با Sass کار را شروع کنید.
پس در ویدیوی بعدی، فقط روی مفاهیم Sass تمرکز کنید،
مثل nesting، variables، mixins و غیره. بیایید این انرژی را حفظ کنیم
و من شما را در ویدیوی بعدی درباره‌ی Sass خواهم دید.»