لیستی از CSS extensionهایی که به عنوان SassScript شناخته میشن و در SASS استفاده میشن:


Sass - Variables

از متغیر برای ذخیره دیتا و استفاده اون در جاهای مختلف استفاده میکنیم.

style.scss

$myColor: #008000;
$mySize: 20px;

.IFLI {
  color: $myColor;
  font-size: $mySize;
}

style.css

.IFLI {
    color: #008000;
    font-size: 20px;
}

Data Types

String

استرینگ هایی که با single quote یا double quotes تعریف بشن برای استفاده بدون quotes از {}# استفاده میکنیم.( از این راه هم برای استفاده از string variables در selector ها استفاده میشه)

style.scss

$name: "thatClass";

p.#{$name} {
  color: blue;
}

style.css

p.thatClass {
  color: blue;
}


Lists

لیست ها دارای چندین مقادیر هستند که یا با space یا با commas جدا میشوند. حتی با دارا بودن یک مقدار هم لیست به حساب میایند.

یک سری function هایی که Sass برای List قرار داده:

  • (length($list سایز لیستو برمیگردونه
  • (nth($list, $n ایتم مورد نظر رو از لیست برمیگردونه.
  • (set-nth($list, $n, $value ایتم مورد نظرو با مقدار داده شده جابجا میکنه
  • ([join($list1, $list2, [$separator دو تا لیستو باهم یکی میکنه.
  • (index($list, $value مکان قرار گرفته مقدار داده شده رو برمیگردونه.
نکته: list در sass از 1 شروع میشه برعکس دیگر زبان های برنامه نویسی که از 0 شروع میشن!

در مثال پایین اولین مقدار لیست رو برای مقدار دهی رنگ کلاسمون میخواییم. ولی اون استرینگه و دارای qouts . برای دریافت فقط مقدار استرینگ کل متد رو داخل {}# میزاریم.

style.scss

$colors: "#008000","red","green";

.IFLI {
  color: #{nth($colors, 1)};
}

style.css

.IFLI {
  color: #008000;
}


Maps

map ها ترکیبی از key و value هستند که هر key شناسه ای از مقدار خودش است.

در مثال زیر اول map را میسازیم بعد میپرسیم ایا این key در آن map وجود دارد اگر وجود داشت بکنش رنگ این کلاس.

style.scss

$myMap: (
        key01: "blue",
        key02: "red"
);
.IFLI{
  @if map-has_key($myMap, key01){
    color: #{map-get($myMap, key01)};
  };
}

style.css

.IFLI {
    color: blue;
}