توابع Map و Selector و Introspection

23 فروردین 1399
درسنامه درس 5 از سری آموزش Sass
sass-05

در این قسمت از سری آموزش فارسی Sass به 3 دسته دیگر از توابع موجود در Sass به همراه ذکر مثال می پردازیم. با ما در این قسمت از آموزش فارسی Sass همراه بمانید.

توابع Map در Sass

در Sass نوع داده ای Map به صورت یک (یا بیشتر) جفت key/value ارائه می گردد.

نکته: می توان همراه با map ها از توابع لیست که در قسمت قبلی شرح داده شد، استفاده کرد. در این صورت با map مانند یک لیست برخورد می شود. لیستی که شامل دو عنصر می شود.

map ها در Sass تغییرناپذیرند. بنابراین توابع map، یک map جدید برمی گردانند و map اصلی تغییری نمی کند. جدول زیر، لیست توابع map در Sass را نشان می دهد:

تابع شرح و مثال
(map-get(mapkey کلید خاصی را از map برمی گرداند.

مثال:

(font-sizes: ("small": 12px, "normal": 18px, "large": 24px$
("map-get($font-sizes, "small
Result: 12px

(map-has-key(mapkey بررسی می کند که map کلید خاصی را دارد یا خیر. مقدار true یا false برمی گرداند.

مثال:

(font-sizes: ("small": 12px, "normal": 18px, "large": 24px$
("map-has-key($font-sizes, "big
Result: false

(map-keys(map لیستی از همه کلید های داخل map را برمی گرداند.

مثال:

(font-sizes: ("small": 12px, "normal": 18px, "large": 24px$
(map-keys($font-sizes
"Result: "small", "normal, "large

(map-merge(map1map2 map2 را به انتهای map1 الحاق می کند (می چسباند).

مثال:

(font-sizes: ("small": 12px, "normal": 18px, "large": 24px$
(font-sizes2: ("x-large": 30px, "xx-large": 36px$
(map-merge($font-sizes, $font-sizes2
Result: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px

(...map-remove(mapkeys کلید های تعیین شده را از map حذف می کند.

مثال:

(font-sizes: ("small": 12px, "normal": 18px, "large": 24px$
("map-remove($font-sizes, "small
(Result: ("normal": 18px, "large": 24px
("map-remove($font-sizes, "small", "large
(Result: ("normal": 18px

(map-values(map در لیستی، همه مقادیر داخل map را برمی گرداند.

مثال:

(font-sizes: ("small": 12px, "normal": 18px, "large": 24px$
(map-values($font-sizes
Result: 12px, 18px, 24px

توابع مربوط به Selector ها در Sass

توابع Selector جهت بررسی و نگهداری selector ها استفاده می شوند.

جدول زیر لیست همه توابع Selector در Sass را برمی گرداند:

تابع شرح و مثال
(is-superselector(supersub این تابع بررسی می کند که زیر مجموعه ای که به یک Selector نسبت داده شده است، آیا واقعا زیر مجموعه آن است یا خیر.

مثال:

("is-superselector("div", "div.myInput
Result: true
("is-superselector("div.myInput", "div
Result: false
("is-superselector("div", "div
Result: true

(selector-append(selectors این تابع selector دوم را به selector اول اضافه می کند و به همین ترتیب selector سوم به دوم و Selector چهارم به سوم و ...

مثال:

("selector-append("div", ".myInput
Result: div.myInput
("selector-append(".warning", "__a
Result: .warning__a

(selector-nest(selectors یک Selector جدید که شامل لیستی از Selector های تو در توی CSS می شود و براساس لیستی برگردانده می شوند. این لیست در ورودی تابع به آن داده می شود.

مثال:

("selector-nest("ul", "li
Result: ul li
("selector-nest(".warning", "alert", "div
Result: .warning div, alert div

(selector-parse(selector این تابع لیستی از Selector ها را برمی گرداند. در واقع Selector هایی را که در ورودی داده شده اند، (با همان فرمت داده شده) به صورت رشته هایی جدا برمی گرداند.

مثال:

("selector-parse("h1 .myInput .warning
('Result: ('h1' '.myInput' '.warning

(selector-replace(selectororiginalreplacement این تابع هم یک Selector جدید برمی گرداند، اما با این مکانیزم که پارامتر replacement را با پارامتر original در selector اصلی جایگزین می کند و selector جدید را برمی گرداند.

مثال:

("selector-replace("p.warning", "p", "div
Result: div.warning

(selector-unify(selector1selector2 یک Selector جدید را برمی گرداند که حاصل تطابق 2 Selector در ورودی تابع است. اگر تطابقی حاصل نشود، null باز می گرداند.

مثال:

("selector-unify("myInput", ".disabled
Result: myInput.disabled
("selector-unify("p", "h1
Result: null

(simple-selectors(selectors براساس ورودی تابع، لیستی از تک Selector ها را برمی گرداند.

مثال:

("simple-selectors("div.myInput
Result: div, .myInput
"(simple-selectors("div.myInput:before
Result: div, .myInput, :before

توابع Introspection در Sass

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

جدول زیر لیستی از توابع introspection در Sass را ارائه کرده است:

تابع شرح و مثال
(...call(functionarguments این تابع در واقعی تابعی را که نامش در ورودی می آید، به همراه آرگومان هایش می خواند و نتیجه را برمی گرداند.
()content-exists بررسی می کند که آیا mixin جاری به یک بلوک content@ رفته است یا خیر.
(feature-exists(feature بررسی می کند که یک ویژگی خاص توسط ورژن جاری Sass پشتیبانی می شود یا خیر.

مثال:

;("feature-exists("at-error
Result: true

(function-exists(functionname بررسی می کند که یک تابع خاص وجود دارد یا خیر.

مثال:

("function-exists("nonsense
Result: false

(get-function(functionname, css: false این تابع یک تابع خاصی را برمی گرداند، اما اگر مقدار css برابر باشد با true، در این صورت خودِ تابع CSS را به صورت ساده برمی گرداند.
(global-variable-exists(variablename بررسی می کند یک متغیر سراسری خاص وجود دارد یا خیر.

مثال:

(variable-exists(a
Result: true

(inspect(value رشته ای که مقداری را نشان می دهد، در خروجی برمی گرداند.
(mixin-exists(mixinname این تابع بررسی می کند که یک mixin خاص وجود دارد یا خیر.

مثال:

("mixin-exists("important-text
Result: true

(type-of(value این تابع نوع یک مقدار را در خروجی برمی گرداند. این نوع می تواند از موارد زیر باشد:

string ،color ، list ،map ،bool ،null ،function ،arglist

مثال:

(type-of(15px
Result: number
(type-of(#ff0000
Result: color

(unit(number این تابع واحد یک مقدار یا در واقع واحدی را که همراه با یک عدد آمده باشد، برمی گرداند.

مثال:

(unit(15px
Result: px

(unitless(number این تابع بررسی می کند که به همراه یک عدد، واحد هم آمده است یا خیر.

مثال:

(unitless(15px
Result: false
(unitless(15
Result: true

(variable-exists(variablename این تابع بررسی می کند یک متغیر خاص (در ورودی) در محدوده خاص (scope) وجود دارد یا خیر.

مثال:

(variable-exists(b
Result: true

به پایان این درس از سری آموزش فارسی Sass رسیدیم. امیدواریم از مطالب امروز بهره کافی را برده باشید.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش Sass توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو