آموزش پیش پردازنده SASS – قسمت سوم

متغیر ها در SASS

شاید برای شما هم بعنوان یه طراح وب پیش اومده باشه که از یه مقدار ( Value ) مشخص، بارها و بارها توی کدتون استفاده کرده باشید.

مثلا، فرض کنید تیم مارکتینگ شرکتتون، یه رنگ آبی با کد #۰۸۳B91 رو بعنوان رنگ برند شرکت انتخاب کرده باشن و شما مجبور باشید اون رو توی جاهای مختلف سایت استفاده کنید: توی هدر، سایدبار، فوتر، تیترها و …

حالا فرض کنید که تیم مارکتینگ تصمیم بگیره یه کوچولو رنگ رو تغییر بده و مثلا بشه : #۰۸۳B92 ! اینجا، شما ممکنه بتونید توی ادیتورتون با استفاده از گزینه Find & Replace این قضیه رو حل کنید و رنگ ها رو تغییر بدید.

اما بهتر نیست که بتونید فقط و فقط یه متغیر رو تغییر بدید و بعد، تمام کدتون عوض بشه و رنگ ها جایگزین بشن ؟!

 اینکار رو به راحتی میشه با استفاده از متغیر های SASS (Variables) انجام داد. متغیر، چیزیه که یه مقدار خاص رو توی خودش جا میده و این مقدار ممکنه تغییر کنه، مثل همون رنگ برند!

شما این مقدار رنگ رو توی یه متغیر میذارید، و بعد اون متغیر رو توی جاهای مختلف کدتون استفاده میکنید و برای تغییر، فقط کافیه که مقدار اون متغیر رو عوض کنید تا همه جا تغییر کنه، به همین سادگی!

استفاده از متغیرها

برای استفاده از متغیرها در SASS باید دو قدم رو بردارید.

قدم اول، تعریف متغیره. اسم متغیرها در SASS با علامت دلار ($) شروع میشن.  بین اسم و مقدار متغیرها هم دو نقطه ( : ) قرار میدیم و درنهایت، با یک نقطه ویرگول ( ; همون Semicolon معروف!) قضیه رو تموم میکنیم!

برای مثال، اگه بخوایم یه متغیر برای رنگ برند تعریف کنیم، اینطوری کد رو مینویسیم:

$logo_color : #083B91;

مشخصه که به جز اون علامت دلار، بقیه کد دقیقا مثل CSS عادی عمل میکنه و تفاوت زیادی نداره.
اما توجه داشته باشید که این کد بخاطر همون علامت دلار، توی CSS کار نمیکنه و اول باید توسط کامپایلر SASS پردازش بشه.
زمانی هم که SASS کارش رو انجام داد، مقدار تمامی متغیرها توی کد CSS به صورت خودکار قرار میگیره.

اما قدم دوم برای استفاده از متغیرها، اینه که اون رو توی یه دستور CSS استفاده کنید. برای مثال، برای استفاده از متغیر رنگ برای تگ h1 باید به این شیوه عمل کنیم:

h1 {

color: $logo_color;

}

وقتی که کار تبدیل فایل ها توسط SASS انجام شد، خروجی کد بالا به شکل زیره:

h1 {

color: #083B91;

}

دسته بندی و مدیریت متغیرها

اوایل که از SASS استفاده میکنید، ممکنه فقط برای مواردی محدودی مثل رنگ های پرکاربرد قالب از متغیرها استفاده کنید، اما به مرور که توی استفاده از این ابزار حرفه ای میشید، بیشتر هم سراغ متغیرها میرید.

بخاطر همین، خیلی خوبه که از همون اول، متغیرهاتون رو توی یه فایل جدا تعریف کنید و مثلا اسم اون فایل رو بذارید :

_variables.scss

(اگه قوانین نامگذاری فایل ها رو یادتون نیست، حتما یه سر به قسمت دوم آموزش SASS بزنید!)

فایده متغیرها اینه که بهتون اجازه میده یه تیکه از کد رو فقط یکبار بنویسید و بارها و بارها ازشون استفاده کنید.

اما نکته مهم اینه که وقتی خواستید فایل متغیرها رو در در فایل SASS اصلی وارد کنید (Import) باید توجه داشته باشید که اونو در ابتدای فایل قرار بدید، چون قراره بخشای دیگه استایل از این متغیرها استفاده کنن.

مثال پایین، میتونه نحوه وارد کردن این فایل ها رو مشخص کنه:

@import ‘helpers/variables’;

@import ‘base/reset’;

@import ‘base/grid’;

@import ‘base/layout’;

طبیعیه که اسم این فایل ها و فولدرها کاملا فرضیه و برای اینه که ذهنتون با نحوه کاربرد اونها آشنا بشه، وگرنه شما میتونید هر اسمی که خواستید رو اونها بذارید. اما همیشه اسمایی رو انتخاب کنید که بعدا، خودتون و بقیه بتونید بفهمید توش چه خبره

کاربرد متغیرها در SASS

یکی از اصلی ترین کابردهای متغیر، ذخیره کردن و تعیین رنگ هاست (همونطور که قبلا مثال زدیم) یه روش ساده برای استفاده از SASS توی این موارد، اینه که متغیر رنگی بخش های مختلف سایت مثل متن، تیتر، حاشیه ها و پس زمینه رو تعیین کنیم:

$text-color: #33333;

$headline-color: #ff0000;

$border-color: #0032ff;

$background-color: #FFEE99;

بعدش هم این متغیرها رو توی یه فایل ( با هر اسمی که دوست دارید، فقط باید اولش با _ شروع بشه ) ذخیره و بعدش توی بخش های مختلف ( partials ) ازشون استفاده میکنید.

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

برای توضیح دقیقتر، یه مثال میزنم.
فرض کنید شرکتی که باهاش کار میکنید، از ۵ تا رنگ استفاده میکنه. شما میتونید اول همه، برای این ۵ تا رنگ متغیر تعریف کنید. بعد همین متغیرها رو بعنوان مقدار (Value) برای متغیرهای رنگی بخش های مختلف سایت به کار ببرید،یه چیزی شبیه این:

/* پالت رنگی شرکت */

$primary-dark: #06888A;

$primary-light: #FFEED5;

$primary-mid: #DC664A;

$secondary-dark: #5A3928;

$secondary-light: #FDC149;

/* متغیرهای کاربردی برای بخش های مختلف سایت */

$page-background: $primary-light;

$headline-color: $primary-dark;

$text-color: $primary-dark;

$border-light: $secondary-light;

$border-dark: $primary-dark;

این راه، کمک میکنه که خیلی راحت تر، یه رنگ رو برای بخش های مختلف سایت به کار ببرید. مثلا توی کد بالا، رنگ متون و تیترها یکی بود (#۰۶۸۸۸A) اما به جای استفاده از کد پایین:

$headline-color: #06888A;

$text-color: #06888A;

این کد رنگی رو فقط یه بار برای متغیر primary-dark استفاده میکنیم. اگرم یه روز بخواین پالت رنگی شرکتتون رو عوض کنید، فقط کافیه کد رنگهای موجود در متغیرهای اولیه (پالت) رو تغییر بدید و بقیه مسائل رو به SASS بسپارید!

کاربرد متغیرها در تایپوگرافی

متغیرهای SASS توی تایپوگرافی سایت و تعیین فونت ها هم خیلی میتونن بهمون کمک کنن. مثلا شما میتونید فونت بخش های مختلف سایتتون رو اینجوری تعیین کنید:

$headline-font: ‘Varela Round’, Helvetica, Arial, sans-serif;

$body-font: ‘Palatino Linotype’, Baskerville, serif;

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

البته تکنیکی که برای استفاده از متغیرها توی پالت رنگی به کار بردیم، اینجا هم قابل انجامه و میشه که اول از همه فونت ها رو توی یه متغیر ریخت، و بعد از اون متغیرها بعنوان مقدار (Value) برای باقی متغیرها استفاده کرد.

همزمان که از متغیرها بیشتر استفاده میکنید، کاربردهای بیشتری رو هم براش پیدا میکنید. یکی از کاربردهای دیگه این ویژگی، اینه که اگه مثلا دوست دارید از گوشه های گرد توی سایتتون زیاد استفاده کنید، میتونید یه متغیر این شکلی تعریف کنید:

$border-radius: 6px;

بعد همین متغیر رو توی بخش های مختلف استفاده میکنید و خیلی راحت هم میتونید مقدارش رو تغییر بدید تا همه بخش ها با هم تغییر کنن.

استفاده از ریاضیات در SASS

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

برای مثال، فرض کنیم که شما یه margin ثابت برای تیترهاتون دارید و مارجین پایینی، همیشه نصف مارجین بالاییه. شما میتونید بعد از تعیین یه متغیر برای مارجین بالایی، مارجین پایینی رو اینطوری تعریف کنید:

$margin-bottom: $margin-top / 2;

اینطوری هر مقداری که به مارجین بالایی بدید، همیشه مارجین پایینی نصف اون خواهد بود.

نکته مهم توی استفاده از این عملیات های ریاضی، اینه که باید از یکاها و واحدهای اندازه گیری یکسانی برای متغیرها استفاده کنید. برای مثال، اگه مارجین بالایی رو ۲۰px تعیین کردید، نمیتونید در ادامه این کد رو بنویسید:

$margin-bottom: $margin-top + 1em;

اما این یکی کد، درست و قابل استفاده است، چون از یه واحد استفاده شده:

$margin-bottom: $margin-top – ۵px;

ادامه بحث آموزش SASS رو میتونید توی مقالات بعدی پیگیری کنید.