انواع داده در SASS

در این بخش انواع داده در SASS شامل اعداد، رشته ها، رنگ ها، Booleans، Null، لیست ها و Maps توضیح داده می شود.

انواع داده در SASS

انواع داده در Sass

SassScript شامل هفت نوع داده مختلف است: اعداد، رشته ها، رنگ ها، Booleans، null، لیست ها و maps. در ادامه به جزئیات و ویژگی های هر یک می پردازیم.

عددی (Number)

SassScript یک نوع داده عددی منفرد را تشخیص می دهد، بنابراین لازم نیست نگران این باشید که آیا عملیات داده شده یک integer یا یک real را نتیجه می دهد. همچنین، SassScript واحدهای استاندارد مانند em یا px را تشخیص می دهد و هنگام انجام عملیات روی مقادیر عددی، واحد باید یکسان یا سازگار باشد.

به عنوان مثال، عملیات زیر معتبر و درست هستند:

نوع داده عددی در Sass

اما تست عملیات (;10px + 2em) منجر به خطا می شود زیرا پیکسل ها و ems سازگار نیستند.

با فرض معتبر بودن عملیات (مثلاً پیکسل ها و پیکسل ها)، SassScript واحد را در خروجی خود حفظ می کند. برای مثال کد زیر را ببینید:

نوع داده عددی در Sass

کد بالا منجر به CSS زیر می شود:

نوع داده عددی در Sass

همانطور که می بینید واحد "em" حفظ شده است.

رشته (String)

می توانید رشته هایی را در SassScript با نقل قول های دوگانه "string"، نقل قول های تکی 'string' یا اصلاً بدون نقل قول string ایجاد کنید. به طور کلی، از هر فرمی که استفاده می کنید مستقیماً به CSS منتقل می شود. بدین ترتیب :

نوع داده رشته در Sass

خروجی بالا به صورت زیر می باشد.

نوع داده رشته در Sass

تنها استثنای این قانون زمانی است که از الحاق یا درج (interpolation) برای ارسال یک متغیر به یک selector استفاده می کنید. interpolation از یک سینتکس خاص،{<var>}# برای "باز کردن" محتویات متغیر استفاده می کند و به عنوان بخشی از آن، هرگونه علامت نقل قول را حذف می کند. بیایید به یک مثال نگاه کنیم:

نوع داده رشته در Sass

که نتیجه زیر را می دهد:

نوع داده رشته در Sass

اگر این هنوز خیلی منطقی نیست نگران نباشید. درج یا interpolation اصولاً با میکسین ها (mixins) استفاده می شود و ما در فصل میکسین ها کل فرآیند را با جزئیات بیشتری بررسی خواهیم کرد.

رنگ (Color)

SassScript از همان عبارات رنگی پشتیبانی شده توسط CSS پشتیبانی می کند: مقادیر هگزا مانند #0000، مقادیر نامگذاری شده مانند قرمز (red)، عبارات rgb مانند rgb(100, 39, 153)، عبارات rgba مانند rgba(100, 39, 153, 75) عبارات hsl مانند hsl(0, 30%, 100%) و عبارات hsla مانند hsla(0, 30%, 100%, 0.3).

به عبارت دیگر، دقیقاً به همان روشی که برای CSS انجام می دهید، رنگ ها را برای SassScript مشخص می کنید. (اما شما چند توابع رنگی بسیار کاربردی دارید که در فصل توابع رنگ بررسی خواهیم کرد.)

لیست (List)

یک لیست SassScript مجموعه ای از مقادیر است که با فاصله یا کاما از هم جدا شده اند. محتویات هر دو متغیر زیر توسط SassScript به عنوان لیست در نظر گرفته می شود:

نوع داده لیست در Sass

لیست ها حتماً نباید حاوی مقادیر ساده باشند. آنها می توانند شامل لیست های دیگری باشند:

نوع داده لیست در Sass

این حالت، شامل سه آیتم است، نه چهار آیتم که ممکن است انتظار داشته باشید. آیتم دوم یک لیست دوم است، SassScript عبارت 10 0 را به عنوان یک آیتم لیست تودرتو در نظر می گیرد زیرا با یک فاصله (space) از هم جدا می شود، در حالی که مقادیر در لیست اصلی، random-list$، با کاما از هم جدا می شوند.

این مقداری گیج کننده است، اینطور نیست؟ اشتباه گرفتن آسان است. به همین دلیل بهترین روش قرار دادن لیست های تو در تو در پرانتز است:

نوع داده لیست در Sass

این سینتکس مشخص می کند که آیتم دوم یک لیست تودرتو است. همچنین می توانید از پرانتز به عنوان مکان نما برای کل فهرست یا برای عناصر جداگانه استفاده کنید:

نوع داده لیست در Sass

از آنجایی که CSS آنها را درک نمی کند، ترانسپایلر Sass پرانتزها را از CSS خروجی آن حذف می کند. اگر مراقب نباشید این می تواند منجر به عوارض جانبی غیرمنتظره شود. برای مثال، missing-list$ در مثال بالا به صورت 10px 30px 0 خروجی می شود، که احتمالاً آن چیزی نیست که می خواهید.

نقشه (Map)

در SassScript، نقشه ها جفت های کلید-مقدار هستند. سینتکس آنها کمی با لیست متفاوت است: آنها باید با کاما از هم جدا شوند و کل نقشه باید در پرانتز قرار داده شود:

نوع داده map در Sass

نقشه ها یا maps هرگز مستقیماً به CSS خروجی نمی شوند، نمی داند با آنها چه کند. در عوض، از توابع نقشه (map functions) برای بازیابی مقادیر استفاده خواهید کرد. ما توابع نقشه را به طور مفصل در فصل توابع Sass بررسی خواهیم کرد، اما در اینجا یک مثال سریع آورده شده است:

نوع داده map در Sass

تابع ()map-get یک map و یک کلید (key) می گیرد و مقدار آن کلید را برمی گرداند. در این مورد، CSS به صورت زیر خواهد بود:

نوع داده map در Sass

Booleans و Nulls

SassScript از دو مقدار Boolean پشتیبانی می کند : true و false و همچنین از مقدار null پشتیبانی می کند. اینها هیچ معنای مستقیمی در CSS ندارند، اما در ترکیب با دستورالعمل های کنترلی که در فصل بعد مورد بحث قرار گرفته اند، مفید هستند.

انواع داده در SASS عددی (Number) رشته (String) رنگ (Color) لیست (List) نقشه (Map) Booleans و Nulls