خب، حالا که مقدمات رو پشت سر گذاشتیم، بیایید مستقیم بریم سر اصل مطلب.
اینجا داخل مرورگر وب هستیم.
این صفحهای که میبینید یک صفحهی نمونه است و هنوز هیچ استایل CSS روی اون اعمال نشده.
در این مرحله، فقط HTML خام داریم.
اگر به کد این صفحه نگاه کنیم، میبینیم که درست مثل تمام درسهای دیگهی این دوره،
ما به یک فایل CSS لینک دادیم که داخل پوشهای به نام CSS قرار داره و اسم فایل هست screen.css.
اینجا پوشهایه که فایل HTML داخلش قرار داره.
اینجا پوشهی CSS هست.
و این هم فایل screen.css.
در حال حاضر، این فایل کاملاً خالیه.
حتی یک خط کد CSS هم داخلش نیست.
حالا میبینیم که داخل این پوشه، یک فایل دیگه هم هست به نام screen.scss.
این پسوند فایل مخفف Sassy CSS هست.
پس در این درس، قراره کدهای Sass رو داخل همین فایل بنویسیم.
و هر بار که تغییراتمون رو ذخیره کنیم، کامپایلر Sass که در پسزمینه روی کامپیوتر من اجرا میشه،
ذخیرهسازی رو تشخیص میده، یک اسنپشات ذهنی از کد Sass ما میگیره،
اون رو به CSS معمولی تبدیل میکنه و خروجی رو داخل فایل screen.css قرار میده.
به این ترتیب، همچنان یک فایل CSS سنتی داریم که میتونیم به مرورگر وب ارائه بدیم.
خب، حالا وارد ویرایشگر متن شدیم.
سمت چپ صفحه، فایل Sassy CSS قرار داره.
فعلاً خالیه.
میخوام با این نکته شروع کنم که Sass کاملاً با CSS معمولی سازگاره.
یعنی میتونیم کدهای معمولی مثل این بنویسیم:
body {
font-family: Helvetica, sans-serif;
}
و وقتی ذخیره کنیم، سمت راست صفحه میبینیم که فایل CSS معمولی بهطور خودکار
یک نسخه از هر چیزی که داخل فایل Sass نوشتیم دریافت میکنه.
این همون کامپایلر Sass در پسزمینهست که داره وظیفهش رو انجام میده.
اگر بریم داخل مرورگر و صفحه رو رفرش کنیم، میبینیم که فونت Helvetica اعمال شده.
اما خب، این تغییر خیلی هیجانانگیز نبود چون فقط CSS استاندارد بود.
بیایید اولین مزهی سینتکس Sass رو امتحان کنیم.
فرض کنیم میخوایم یک پالت رنگ برای این صفحه تعریف کنیم.
و این طیف نارنجی رو به عنوان رنگ اصلی انتخاب کردیم.
بیایید با اعمال این رنگ نارنجی به تمام لینکهای صفحه شروع کنیم.
اگر از Sass استفاده نمیکردیم، فقط مینوشتیم:
a {
color: #f90a0a;
}
اما میدونیم که قراره این مقدار رنگ رو چند جای دیگه هم استفاده کنیم،
و منطقی نیست که بخوایم هر بار دنبالش بگردیم یا حفظش کنیم.
پس به جای اون، مقدار رنگ رو حذف میکنم
و در بالای فایل استایل، با علامت دلار یک متغیر تعریف میکنم:
$primary-color: #f90a0a;
ما در CSS معمولی نمیتونیم متغیر تعریف کنیم، اما در Sass میتونیم.
برای کسانی که قبلاً با زبانهای برنامهنویسی کار نکردن،
متغیر در اینجا فقط یک اسم مستعار برای یک مقدار خاصه.
حالا میتونیم به جای نوشتن کد رنگ، فقط بنویسیم:
a {
color: $primary-color;
}
وقتی ذخیره کنیم، کامپایلر Sass این کد رو به CSS معمولی تبدیل میکنه.
اگر صفحه رو رفرش کنیم، میبینیم که تمام لینکها نارنجی شدن.
نکتهی کلیدی اینه که نیازی نیست خودمون رو تکرار کنیم.
اگر میدونیم قراره یک مقدار رو چند بار استفاده کنیم، بهتره اون رو به صورت متغیر تعریف کنیم.
قبل از اینکه ادامه بدیم، میخوام اشاره کنم که عبارت “primary-color” هیچ معنای خاصی نداره.
من این اسم رو خودم انتخاب کردم.
شما میتونید هر اسمی که دوست دارید برای متغیرتون انتخاب کنید.
مثلاً به جای “primary-color”، میتونید بنویسید:
$beautiful-hue: #f90a0a;
و بعد در استایل لینکها بنویسید:
a {
color: $beautiful-hue;
}
پس اسم متغیر مهم نیست، مهم اینه که مقدار رو فقط یک بار تعریف کنیم
و بعد در کل فایل از اسم متغیر استفاده کنیم.
این اولین ویژگی Sass بود: تعریف و استفاده از متغیرها.
حالا بریم سراغ ویژگی بعدی: Nesting یا تودرتونویسی.
برای اینکه این ویژگی رو بهتر ببینیم، بیایید یک هدف مشخص داشته باشیم.
فرض کنیم میخوایم منوی ناوبری داخل هدر رو به شکل افقی و سنتی استایل بدیم.
در کد HTML میبینیم که منو فقط یک عنصر <nav> هست
که داخلش یک لیست نامرتب (<ul>) قرار داره
و هر آیتم لیست (<li>) شامل یک لینک (<a>) هست.
و این عنصر <nav> داخل یک هدر قرار داره که کلاسش هست site-header.
پس در CSS، اول کلاس site-header رو هدف قرار میدیم
و بعد عنصر nav رو داخلش.
اولین کاری که میکنیم اینه که padding و margin لیست نامرتب رو حذف میکنیم.
بعد میریم سراغ آیتمهای لیست و بولتهاشون رو حذف میکنیم:
list-style: none;
و آیتمها رو float میدیم به چپ تا همهشون در یک خط افقی قرار بگیرن.
حالا قبل از اینکه ادامه بدیم، باید بگم که بدون Sass، این نوع کدنویسی کاملاً اشتباهه.
در CSS معمولی نمیتونید یک قانون رو داخل قانون دیگه بنویسید.
اما در Sass میتونید.
این نوع Nesting دو مزیت اصلی داره:
۱. کمک میکنه کدها مرتبتر و سازمانیافتهتر باشن.
۲. باعث میشه کمتر تایپ کنیم.
وقتی ذخیره کنیم، کامپایلر Sass خودش selectorهای مناسب رو تولید میکنه.
مثلاً برای استایل دادن به لینکها، فقط مینویسیم:
a {
display: block;
padding: 10px;
background-color: $beautiful-hue;
color: white;
text-decoration: none;
}
و چون این کد داخل site-header nav نوشته شده،
کامپایلر خودش میدونه که باید selector کامل رو بسازه.
اگر صفحه رو رفرش کنیم، میبینیم که منوی ناوبری خیلی بهتر شده.
اما یک مشکلی هست: محتوا بالا زده چون floatها رو پاک نکردیم.
یادتونه که آیتمها رو float دادیم به چپ؟
پس باید floatها رو پاک کنیم تا layout درست بشه.
در انتهای فایل استایل، کد معروف clearfix رو قرار میدم
و بعد به لیست نامرتب کلاس group میدم.
حالا layout درست شده.
تا اینجا با دو ویژگی Sass آشنا شدیم:
متغیرها و Nesting.
حالا میریم سراغ ویژگی سوم: Inheritance یا وراثت.
برای دیدن این ویژگی، بیایید یک هدف ساده داشته باشیم.
در صفحهی نمونه، دو لینک داریم با متن “Learn More” و “Alternate Button”.
در HTML میبینیم که اینها فقط لینکهایی هستن با کلاسهای button-a و button-b.
پس بیایید CSS بنویسیم تا اینها شبیه دکمه بشن.
اول با کلاس button-a شروع میکنیم.
در فایل استایل، یک قانون جدید مینویسیم و button-a رو هدف قرار میدیم.
برای صرفهجویی در زمان، کدهای استایل دکمه رو paste میکنم.
تنها نکتهی جالب اینه که از متغیر $beautiful-hue برای رنگ border استفاده کردم.
اگر ذخیره کنیم و صفحه رو رفرش کنیم، میبینیم که لینک اول شبیه دکمه شده.
حالا میریم سراغ دکمهی دوم یا همون button-b.
فرض کنیم میخوایم دقیقاً مثل button-a باشه، فقط
خب، برای اینکه از تمام این استایلها استفاده کنیم،
کافیه داخل قانون مربوط به دکمهی B بنویسیم:
@extend button-a;
background-color: black;
و وقتی ذخیره کنیم و صفحه رو در مرورگر رفرش کنیم،
میبینیم که دکمهی B حالا استایل گرفته.
حالا بیایید ببینیم دقیقاً چه اتفاقی افتاده.
ما تونستیم فقط با دو خط کد، یک استایل جدید برای دکمه بسازیم.
در CSS معمولی، چنین قابلیتی وجود نداره.
پس این یکی از ویژگیهای خاص Sass هست.
Sass به ما اجازه میده که بنویسیم @extend و بعد اسم قانونی که میخوایم ویژگیهاش رو به ارث ببریم.
بیایید یه نگاه سریع بندازیم به کاری که کامپایلر Sass در پشتصحنه انجام میده.
قانون مربوط به دکمهی B خیلی سادهست،
اما اگر به قانون اصلی دکمهی A نگاه کنیم،
میبینیم که کامپایلر Sass یک کاما اضافه کرده
و بعد selector مربوط به دکمهی B رو هم بهش چسبونده.
این کار پیچیدهای نیست،
ما خودمون هم میتونستیم دستی این کار رو انجام بدیم،
اما از نظر سبک کدنویسی، خیلی طبیعیتر و لذتبخشتره
که قوانینمون رو بهصورت ماژولار و خودکفا بنویسیم.
بهجای اینکه بخوایم selectorها رو دستی مدیریت کنیم،
میتونیم قوانین مرتب، منظم و مستقل برای کلاسهای خاص بنویسیم.
ما حتی میتونیم از قابلیت وراثت یا extend برای تمیز نگهداشتن HTML استفاده کنیم.
یادتونه که برای اعمال ویژگی clearfix به منوی ناوبری بالا،
کلاسی به نام group به لیست نامرتب دادیم؟
اما اگر نخوایم کلاسهای نمایشی به HTML اضافه کنیم چی؟
اگر بخوایم HTMLمون کاملاً تمیز و بدون تزئینات باشه چی؟
خب، اگر کلاس group رو از لیست نامرتب حذف کنیم،
میبینیم که floatها پاک نمیشن و layout بههم میریزه.
اما میتونیم از extend یا وراثت روی همون لیست استفاده کنیم.
کافیه بنویسیم:
@extend .group;
ما میدونیم که ویژگیهای clearfix داخل کلاس group قرار دارن،
پس وقتی ذخیره کنیم و صفحه رو رفرش کنیم،
میبینیم که floatها پاک شدن و layout دوباره درست شده.
از نظر مفهومی، وقتی میخوایم به محتوای لیست نامرتبمون نگاه کنیم،
تنها کاری که باید انجام بدیم اینه که بگیم:
«ویژگیهای clearfix کلاس group رو به ارث ببر».
و بعد، در پشتصحنه، کامپایلر Sass خودش میاد و selectorهای مربوط به کلاس group clearfix رو تنظیم میکنه
و اونها رو در مکانهای مناسب مثل site-header nav ul اضافه میکنه.
خب، از نظر مفهومی، وقتی میخوایم به محتوای لیست نامرتبمون نگاه کنیم،
تنها کاری که باید انجام بدیم اینه که بگیم:
«ویژگیهای clearfix کلاس group رو به ارث ببر» یا «extend کن».
و بعد، در پشتصحنه، کامپایلر Sass خودش میاد و selectorهای مربوط به کلاس group clearfix رو تنظیم میکنه
و اونها رو در مکانهای مناسب مثل site-header nav ul اضافه میکنه.
بیایید یه مکث کوتاه داشته باشیم و مرور کنیم که تا اینجا چی یاد گرفتیم.
ما با متغیرهای Sass آشنا شدیم،
ویژگی Nesting یا تودرتونویسی رو بررسی کردیم،
و وراثت در Sass رو هم در عمل دیدیم.
حالا میخوام دربارهی توانایی Sass برای تقسیم کدها به فایلهای کوچکتر و مرتب صحبت کنم.
فرض کنید میخوایم فایل استایلمون خیلی منظم باشه.
مثلاً چی میشه اگر بخوایم تمام کدهای CSS مربوط به هدر، داخل یک فایل جداگانه قرار بگیرن؟
Sass این کار رو خیلی راحت میکنه.
من قراره تمام کدهای مربوط به هدر رو cut کنم
و یک فایل جدید داخل پوشهی CSS بسازم.
کدها رو داخل اون فایل paste میکنم
و اسم فایل جدید رو میذارم: _header.scss
حالا برمیگردیم به فایل اصلی استایل، جایی که قبلاً اون کدها بودن،
و فقط مینویسیم:
@import ‘header’;
و وقتی ذخیره میکنیم، هیچ تغییری در خروجی CSS کامپایلر نمیبینیم.
کامپایلر فقط میره، کدهای داخل فایل header رو برمیداره
و دقیقاً همونجایی که گفتیم، وارد فایل اصلی میکنه.
این ویژگی خیلی مفیده چون به عنوان توسعهدهنده، کمک میکنه کدها مرتب و سازمانیافته باشن،
اما مرورگر وب همچنان فقط یک فایل CSS دریافت میکنه،
پس سرعت بارگذاری صفحه همچنان بالا باقی میمونه.
خب، این درس تقریباً به پایان رسیده.
در درس بعدی، موضوعات پیشرفتهتری مثل عملگرها (operators) و mixinها رو بررسی میکنیم.
اما قبل از اینکه این درس رو تموم کنیم،
میخوام یک مثال نهایی از اینکه چرا Sass فوقالعادهست رو نشونتون بدم.
فرض کنید تصمیم گرفتیم که دکمهی B دیگه از پسزمینهی مشکی استفاده نکنه،
و بهجاش از یک طیف نارنجی خیلی روشنتر نسبت به رنگ پایهمون استفاده کنه.
حالا، بهجای استفاده از نرمافزار انتخاب رنگ،
میخوام یک قابلیت شگفتانگیز Sass رو نشونتون بدم.
میخوام از تابعی به نام lighten استفاده کنم
و دو مقدار بهش بدم.
اولین مقدار، رنگ پایهی نارنجی هست که داخل متغیر beautiful-hue ذخیره کردیم.
و دومین مقدار، درصدی هست که میخوایم رنگ روشنتر بشه.
بیایید اول ۳۰٪ رو امتحان کنیم.
اگر صفحه رو رفرش کنیم، میبینیم که هنوز به اندازهی کافی روشن نشده.
بیایید ۴۵٪ رو امتحان کنیم.
عالیه! دقیقاً همون چیزی که میخواستیم.
در پشتصحنه، کامپایلر Sass خودش محاسبه کرد
که کد رنگ hexadecimal دقیقاً چه مقداری باید باشه
تا ۴۵٪ روشنتر از رنگ نارنجی پایه باشه.
Sass کلی تابع جادویی مثل این داره.
و حالا که فایل استایلمون از رنگهای داینامیک استفاده میکنه
که از یک رنگ پایه مشتق شدن،
اگر روزی تصمیم بگیریم که رنگ اصلی صفحهمون دیگه نارنجی نباشه و بهجاش آبی باشه،
خیلی راحت فقط کافیه بریم سراغ color picker،
رنگ آبی دلخواهمون رو انتخاب کنیم،
و مقدار متغیر beautiful-hue رو در بالای فایل استایل با اون رنگ جدید جایگزین کنیم.
و وقتی ذخیره و رفرش کنیم،
میبینیم که همهچیز بهصورت یکجا آپدیت شده
و حتی اون دکمه هم یک طیف آبی خوشرنگ داره که ۴۵٪ روشنتر از رنگ پایهی آبیه.
و با این مثال، این درس به پایان میرسه.
در درس بعدی، به سراغ موضوعات پیشرفتهتر Sass میریم.
از یادگیری لذت ببرید و بهزودی دوباره میبینمتون! 😊