در این درس، یادگیری ویژگیهای Sass رو ادامه میدیم.
و میتونیم بگیم بهترین بخش رو برای آخر نگه داشتیم.
در این قسمت، با دو ویژگی مهم آشنا میشیم: mixinها و عملگرها (operators).
بیایید با mixinها شروع کنیم.
Mixinها فوقالعاده قدرتمند هستن.
در واقع، میتونم بگم که این ویژگی مورد علاقهی من در Sass هست.
اما قبل از اینکه وارد کدنویسی بشیم، بیایید یک هدف برای خودمون تعریف کنیم.
فرض کنیم میخوایم دکمهی جایگزین (alternate button) یک پسزمینهی گرادیانی داشته باشه—یعنی رنگش بهتدریج از یک رنگ به رنگ دیگه تغییر کنه.
قبلاً در دوره یاد گرفتیم که اگر بخوایم با CSS یک گرادیان بسازیم که در اکثر مرورگرها و دستگاهها کار کنه،
باید چندین بار خودمون رو تکرار کنیم:
نسخهی قدیمی WebKit، نسخهی جدید WebKit، نسخهی Mozilla، نسخهی Microsoft، نسخهی Opera،
نسخهی مدرن پیشفرض، و حتی نسخهی عجیبوغریب قدیمی Microsoft.
یعنی کلی کد باید بنویسیم.
و در نهایت، همهی این خطوط کد فقط یک کار انجام میدن:
تغییر تدریجی رنگ از یک رنگ به رنگ دیگه.
پس، آیا بهتر نبود ابزاری وجود داشت که فقط دو رنگ رو دریافت کنه
و خودش تمام اون خطوط تکراری رو تولید کنه؟
خب، با استفاده از mixinهای Sass میتونیم دقیقاً چنین ابزاری بسازیم.
اینجا داخل ویرایشگر متن هستیم و داریم فایل Sass خودمون رو ویرایش میکنیم.
بیایید اولین mixin خودمون رو بسازیم.
شروع میکنیم با نوشتن علامت @ و بعد کلمهی mixin.
بعد میتونیم برای mixinمون یک اسم انتخاب کنیم.
من اسمش رو میذارم vertical-gradient.
اگر قبلاً با زبانهای برنامهنویسی کار کرده باشید، این ساختار خیلی آشناست.
بعد از اسم، پرانتز باز و بسته مینویسیم، و بعد آکولاد باز و بسته.
چون میخوایم گرادیان بسازیم، داخل آکولادها مینویسیم:
background-image: linear-gradient(to bottom, white, black);
اما احتمالاً نمیخوایم رنگها رو بهصورت ثابت (hard-code) داخل mixin بنویسیم،
چون میخوایم mixinمون انعطافپذیر باشه.
پس بهجای white و black، از پارامترهایی به نام from-color و to-color استفاده میکنیم.
و در خط تعریف mixin، داخل پرانتزها هم این پارامترها رو اضافه میکنیم:
@mixin vertical-gradient($from-color, $to-color) {
background-image: linear-gradient(to bottom, $from-color, $to-color);
}
حالا mixin ما آمادهی تست اولیهست.
بیایید ببینیم آیا میتونیم از این mixin در قانون مربوط به دکمهی B استفاده کنیم.
پس رنگ پسزمینهی قبلی رو حذف میکنیم
و سعی میکنیم با استفاده از mixin جدیدمون یک گرادیان اعمال کنیم.
برای استفاده از mixin، مینویسیم:
@include vertical-gradient(blue, red);
وقتی ذخیره کنیم و صفحه رو در مرورگر رفرش کنیم،
میبینیم که یک اشتباه کوچیک داشتیم—بهجای top باید to bottom بنویسیم.
این مثال عالیه برای اینکه بفهمیم چرا استفاده از mixin برای گرادیانها مفیده.
سینتکس گرادیان در CSS طی سالها تغییر کرده
و نسخههای مختلفی برای مرورگرهای مختلف وجود داره.
پس هدف اینه که نخوایم هر بار این کدها رو بنویسیم.
فقط یک بار mixin بسازیم و بعد هر وقت خواستیم گرادیان داشته باشیم، اون رو فراخوانی کنیم.
با اصلاح سینتکس، حالا کد باید در نسخهی جدید Firefox بهدرستی کار کنه.
اگر رفرش کنیم، گرادیان رو میبینیم.
بیایید نگاهی بندازیم به CSS خروجی کامپایلر Sass.
در فایل خروجی، قانون مربوط به دکمهی B رو میبینیم
که کامپایلر، فراخوانی mixin و آرگومانها رو گرفته و کد نهایی رو تولید کرده.
اما mixin ما هنوز کامل نیست.
فقط یک خط کد تولید کرده که خیلی چشمگیر نیست—خودمون هم میتونستیم بنویسیم.
پس بیایید mixin رو کامل کنیم.
نمیخوایم فقط یک خط تولید بشه،
میخوایم تمام اون خطوط تکراری و خستهکنندهی مربوط به سازگاری مرورگرها رو تولید کنه.
بهجای اینکه همهی اون خطوط رو دستی بنویسیم،
من یک بلوک کد آماده رو paste میکنم.
در این کد، تمام نسخههای مختلف سینتکس گرادیان لحاظ شدن:
WebKit قدیمی، WebKit جدید، Mozilla، Microsoft، Opera، نسخهی مدرن، و حتی نسخهی عجیب Microsoft.
و بهجای نوشتن رنگها بهصورت ثابت،
از پارامترهای $from-color و $to-color در تمام خطوط استفاده کردیم.
حالا اگر ذخیره کنیم و خروجی CSS رو ببینیم،
خیلی چشمگیرتر شده.
همهی این خطوط فقط با یک خط فراخوانی mixin تولید شدن:
@include vertical-gradient(blue, red);
و کامپایلر Sass همهی کارها رو برامون انجام داده.
حالا اگر تصمیم بگیریم که بهجای آبی و قرمز،
دکمه گرادیانی از سفید به نارنجی داشته باشه،
فقط کافیه اون خط رو تغییر بدیم:
@include vertical-gradient(white, orange);
و وقتی ذخیره کنیم، کامپایلر دوباره همهی خطوط رو تولید میکنه
و همهی مرورگرها خوشحال میشن.
و از همه مهمتر، ما بهعنوان توسعهدهنده خوشحالیم
چون فقط یک خط کد نوشتیم.
نیازی نیست دوباره به کد mixin نگاه کنیم،
مگر اینکه سینتکس گرادیان در مرورگرها تغییر کنه.
ما میتونیم این کد mixin رو در تمام پروژههای وبمون استفاده کنیم
و حتی اون رو داخل یک فایل جداگانه قرار بدیم و import کنیم.
پس کد رو cut میکنم،
یک فایل جدید داخل پوشهی CSS میسازم،
کد رو paste میکنم،
و اسم فایل رو میذارم: _mixins.scss
بعد در فایل اصلی Sass، جایی که قبلاً اون کد بود، فقط مینویسیم:
@import ‘mixins’;
و تمام—کد از دید پنهان شده، ذهنمون آزاد شده.
حالا دیگه لازم نیست نگران اون کدهای تکراری و زشت باشیم.
فقط فایل mixin رو import میکنیم
و میتونیم وانمود کنیم که این mixin بخشی از زبان Sass هست.
خیلی سریع، میخوام قدرت ترکیب mixinها با متغیرها رو نشونتون بدم.
فرض کنیم تصمیم گرفتیم که دکمه بهجای گرادیان سفید به نارنجی،
گرادیانی از سفید به یک طیف روشنتر از رنگ پایهی آبی داشته باشه.
ما میدونیم که رنگ پایهی آبی داخل متغیری به نام $beautiful-hue ذخیره شده.
و اگر اون رنگ خیلی تیره باشه،
میتونیم از تابع lighten استفاده کنیم
و بگیم که رنگ رو ۳۰٪ روشنتر کنه:
@include vertical-gradient(white, lighten($beautiful-hue, 30%));
وقتی ذخیره کنیم و صفحه رو رفرش کنیم،
میبینیم که فقط با یک خط کد،
یک گرادیان CSS سازگار با تمام مرورگرها ساختیم
که از رنگ متغیر استفاده میکنه و اون رو بهصورت داینامیک روشنتر کرده.
این قدرت ترکیب متغیرها، توابع رنگی، و از همه مهمتر، mixinهاست.
دموی گرادیان فقط یک نمونه بود از اینکه چطور mixinها میتونن زندگی ما رو راحتتر کنن.
حالا میخوام یک مثال دوم هم نشونتون بدم.
بیایید یک هدف جدید تعریف کنیم.
فرض کنیم میخوایم layout صفحه واکنشگرا باشه.
و وقتی به اندازهی صفحهی گوشیهای هوشمند برسیم،
میخوایم لینکهای ناوبریمون بهصورت یکی در هر خط نمایش داده بشن.
ما قبلاً در یک درس دیگه دربارهی طراحی واکنشگرا (Responsive Web Design) و media queryها یاد گرفتیم.
پس از نظر فنی، دقیقاً میدونیم باید چی کار کنیم.
میریم سراغ فایل استایل مربوط به هدر—جایی که تمام استایلهای مرتبط با هدر قرار دارن.
و خیلی ساده یک media query جدید مینویسیم:
@media only screen and (max-width: 480px) {
.site-header nav li {
float: none;
margin-right: 0;
width: 100%;
}
}
در این حالت، آیتمهای لیست ناوبری رو هدف قرار میدیم
و بهشون میگیم که دیگه float نداشته باشن، margin-right حذف بشه، و عرضشون کامل باشه.
از نظر فنی، این دقیقاً همون کاریه که مرورگر انتظار داره.
اما آیا این همون چیزیه که ما بهعنوان توسعهدهنده دوست داریم بنویسیم؟
آیا این سینتکس از نظر مفهومی برای ما منطقیه؟
یا میتونیم با استفاده از mixinها تجربهی بهتری در کدنویسی داشته باشیم؟
پاسخ قطعاً مثبته—mixinها میتونن تجربهی ما در نوشتن media queryها رو خیلی بهتر کنن.
پس من قراره این کد رو حذف کنم
و برم سراغ فایل partial مربوط به mixinها.
اینجا کد گرادیانی هست که قبلاً ساختیم.
میرم پایین فایل و یک کامنت اضافه میکنم:
// Media Query Mixins
و حالا شروع میکنیم به ساخت اولین media query mixin.
مینویسیم:
@mixin breakpoint-baby-bear {
@media only screen and (max-width: 480px) {
@content;
}
}
دوباره تأکید میکنم:
ما میخوایم mixinها انعطافپذیر باشن.
یعنی مثل یک ظرف خالی باشن که بعداً محتوا داخلش قرار بدیم.
پس داخل این media query، هیچ عنصری رو هدف قرار نمیدیم و هیچ ویژگیای نمینویسیم.
فقط مینویسیم:
@content;
در حالی که هنوز داخل فایل mixinها هستم،
همین کدی که نوشتیم رو copy و paste میکنم
تا یک mixin دوم بسازم.
اسم این یکی رو میذارم:
@mixin breakpoint-papa-bear {
@media only screen and (min-width: 100px) {
@content;
}
}
پس حالا دو mixin داریم:
یکی برای صفحههای کوچک (Baby Bear)،
و یکی برای صفحههای بزرگتر (Papa Bear).
خب، حالا که این دو mixin مربوط به media query رو ساختیم،
برمیگردم به فایل CSS مربوط به هدرمون.
یادمون باشه هدفمون این بود که لینکهای ناوبری در صفحههای کوچک،
هر کدوم در یک خط جداگانه قرار بگیرن.
پس داخل قانون اصلی مربوط به آیتمهای لیست در ناوبری،
کافیه بنویسیم:
@include breakpoint-baby-bear {
float: none;
margin-right: 0;
margin-bottom: 2px;
}
فایل partial مربوط به هدر رو ذخیره میکنم،
و در فایل اصلی Sass به نام screen.scss،
مطمئن میشم که import مربوط به فایل mixins در بالای فایل قرار گرفته
تا mixinها قبل از استفاده در دسترس باشن.
وقتی ذخیره کنیم و صفحه رو رفرش کنیم،
میبینیم که استایلهای موبایلی اعمال شدن.
بیایید نگاهی بندازیم به آزادی جدیدی که mixinها بهمون دادن.
داخل قانون مربوط به آیتمهای لیست،
ما mixin مربوط به Baby Bear رو فقط با نوشتن یک include داخل همون قانون فراخوانی کردیم،
و کامپایلر Sass خودش بقیهی کارها رو انجام داد.
میبینید که داخل این media query،
نیازی نبود مشخص کنیم کدوم عنصر رو میخوایم استایل بدیم—
چون nesting خودش این کار رو انجام میده.
از نظر مفهومی، این خیلی سادهتره.
خیلی طبیعیتر حس میشه.
ما داریم آیتمهای لیست رو استایل میدیم:
اینجا استایلهای پایهمون هستن،
و اینجا استایلهای Baby Bear.
حالا فرض کنیم برای صفحههای بزرگتر یا عرض بیشتر از ۱۰۰ پیکسل،
میخوایم فاصلهی بین لینکها بیشتر بشه.
چون قبلاً mixin مربوط به Papa Bear رو ساختیم،
کافیه داخل همین قانون آیتم لیست بنویسیم:
@include breakpoint-papa-bear {
margin-right: 50px;
}
وقتی اینجا ذخیره کنیم و همچنین فایل اصلی Sass رو ذخیره کنیم تا کامپایل Sass اجرا بشه،
و بعد صفحه رو رفرش کنیم،
اگر اندازهی پنجره رو بزرگتر از ۱۰۰ پیکسل کنیم،
میبینیم که margin افزایش پیدا کرده.
این روش استفاده از mixin برای مدیریت media queryها دو مزیت اصلی داره:
۱. تمام شرایط media queryها رو متمرکز میکنه.
یعنی از نظر مفهومی، میتونیم breakpointهای مختلفی تعریف کنیم:
Baby Bear این اندازهست،
Papa Bear اون اندازهست،
اگر بخوایم Mama Bear یا Goldilocks رو بهعنوان اندازههای بینابینی تعریف کنیم،
کاملاً دست خودمونه.
میتونیم هر تعداد breakpoint که بخوایم داشته باشیم،
اما نکتهی مهم اینه که فقط یک بار مقدار اونها رو داخل mixin تعریف میکنیم،
و بعد موقع نوشتن استایلها،
نیازی نیست مثل ربات عددهای دقیق مثل max-width: 480px یا min-width: 100px رو حفظ کنیم.
در عوض، فقط کافیه اسمهایی مثل Baby Bear، Papa Bear، Mama Bear، Goldilocks رو به خاطر بسپاریم
و هر جا خواستیم ازشون استفاده کنیم.
مثلاً فرض کنیم میخوایم برای صفحههای بزرگتر، فونت بزرگتری داشته باشیم
و برای صفحههای کوچکتر، فونت کوچکتر.
خیلی راحت داخل قانون مربوط به HTML در فایل اصلی Sass مینویسیم:
@include breakpoint-baby-bear {
font-size: 0.8em;
}
@include breakpoint-papa-bear {
font-size: 1.4em;
}
وقتی ذخیره کنیم و صفحه رو رفرش کنیم،
میبینیم که برای Papa Bear (صفحههای بزرگ)، فونت بزرگتره،
برای Baby Bear (صفحههای کوچک)، فونت کوچکتره،
و استایلهای پایه هم سر جای خودشون هستن.
پس دوباره تأکید میکنم:
مزیت اصلی استفاده از mixin برای media query اینه که
نیازی نیست breakpointها رو حفظ کنیم.
فقط یک بار تعریفشون میکنیم و بعد با اسمهایی که خودمون انتخاب کردیم،
هر جا خواستیم ازشون استفاده میکنیم.
مزیت دوم اینه که میتونیم تمام استایلهای مربوط به یک عنصر رو داخل یک قانون متمرکز کنیم.
نیازی نیست media queryهای جداگانه بسازیم و دوباره عناصر رو انتخاب کنیم.
میتونیم از نظر مفهومی روی یک بخش از محتوا تمرکز کنیم
و اون رو در breakpointهای مختلف استایل بدیم.
خب، این بخش مربوط به mixinها تموم شد.
امیدوارم تونسته باشم نشون بدم که چقدر مفید هستن
و شما هم مشتاق شده باشید که ازشون در پروژههای خودتون استفاده کنید.
تا اینجا دربارهی mixinها صحبت کردیم.
حالا بیایید مسیرمون رو عوض کنیم و دربارهی عملگرها (Operators) صحبت کنیم.
بهطور خاص، بیایید نگاهی بندازیم به عملگرهای ریاضی تا باهاشون آشنا بشیم.
اگه تا حالا فکر کردید که «کاش میشد توی فایلهای استایل عملیات ریاضی انجام داد»،
خبر خوب اینه که با Sass میتونید!
اینجا یک قانون داریم برای عنصری با کلاس box
که در صفحهی وب، مربوط به این باکس خاکستریه.
در حال حاضر، عرضش ۱۵۰ پیکسل هست.
در ریاضی ابتدایی، همیشه بهمون میگفتن «راهحل رو نشون بده»،
و همین اصل در طراحی وب هم صدق میکنه.
گاهی وقتها داریم عرض یا درصد دقیق یک عنصر رو محاسبه میکنیم،
و نمیخوایم به مقداری برسیم که بعداً یادمون نیاد چطور به اون عدد رسیدیم.
پس میتونیم عملیات ریاضی رو مستقیم داخل فایلهای استایل بنویسیم.
مثلاً:
width: 100px + 200px;
وقتی ذخیره کنیم و خروجی CSS رو ببینیم،
عرض ۳۰۰ پیکسل رو میبینیم.
جمع و تفریق خیلی راحتن.
میتونیم تقسیم هم انجام بدیم:
width: (500px / 2);
وقتی از تقسیم استفاده میکنید، بهتره داخل پرانتز بنویسید.
خروجی کامپایلر Sass میشه ۲۵۰ پیکسل.
علامت ضرب هم ستاره (*) هست:
width: 300px * 2;
و خروجی میشه ۶۰۰ پیکسل.
حالا دیگه میتونید تصور کنید که چطور میشه از ریاضی در فایلهای استایل استفاده کرد.
هدف از این بخش فقط آموزش ریاضی نبود،
بلکه این بود که یادآوری کنیم Sass یک زبان برنامهنویسی کامل هست.
یعنی شامل عملگرهای عددی، عملگرهای منطقی، دستورات کنترلی و عبارات شرطی میشه.
خیلی چیزها هست که میتونید با Sass تجربه کنید،
و اگر پیشزمینهی برنامهنویسی دارید یا دوست دارید بیشتر یاد بگیرید،
Sass واقعاً هیجانانگیزه.
اما لازم نیست تا زمانی که استاد Sass بشید صبر کنید تا ازش استفاده کنید.
من همه رو تشویق میکنم که با چیزهایی که در این درسها یاد گرفتیم،
شروع به آزمایش و استفاده در پروژههای واقعی کنن.
و اگر زمانی خواستید بیشتر یاد بگیرید،
حتماً به وبسایت رسمی Sass سر بزنید.
از یادگیری لذت ببرید—Sass یک زبان توسعهی فوقالعادهست! 💻✨