آموزش DataType در Sass

DataType در Sass

Data type در معنای کلی، روشی است برای دسته بندی داده ها بر اساس نوع در گروه های خاص و برای موارد استفاده ویژه. در Sass که یک زبان تنظیم ظاهر سایت و style دهی می باشد، Data type همین کارایی را دارد و توسعه دهنده را مجاب می کند که نوع داده ای که قرار است در آبجکت ذخیره شود را به هنگام تعریف آن مشخص نماید. جدول زیر انواع داده ای مورد پشتیبانی SassScript را همراه با شرح کاربرد برای شما لیست می کند:

نوع داده ای رشته (String)

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

مثال کاربردی

< html >
   < head >
      < title >Strings< /title >
      < link rel="stylesheet" type="text/css" href="style.css" / >
      < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
      < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >< /script >
      < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" >< /script >
   < /head >
   < body >
      < div class="container" >
         < h2 >Example using Strings< /h2 >
         < p class="tutorialspoint" >Sass is an extension of CSS that adds power and elegance to the basic language.< /p >
      < /div >
   < /body >
< /html >

فایل style.scss را ایجاد نمایید.

style.scss
$name: "tutorialspoint";
p.#{$name} {
   color: blue;
}

می توانید با استفاده از دستور زیر به SASS دستور دهید که بر روی محتوای فایل نظارت داشته و زمانی که فایل SASS بروز رسانی شد، CSS نیز همزمان با آن بروز رسانی می شود.

sass --watch C:\ruby\lib\sass\style.scss:style.css

پس از اجرای دستور بالا، فایلی به نام style.css با محتوای زیر به صورت خودکار ایجاد می شود:

style.css
p.tutorialspoint {
   color: blue;
}

خروجی

با طی کردن مراحل زیر خروجی کد را مشاهده نمایید:

• کد html بالا را در فایل strings.html ذخیره نمایید.
• فایل HTML را با مرورگر دلخواه باز نمایید. خروجی به صورت زیر نمایش داده می شود:

نوع داده ای List (Lists)

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

• تابع nth – آیتم دلخواه را از لیست برمی گرداند.
• join – چندین لیست را با یکدیگر ترکیب کرده و یک لیست واحد را می سازد.
• append – آیتم مورد نظر را به انتهای لیست مورد نظر الحاق می کند.
• دستور @each – به تمامی آیتم های یک لیست style اعمال می کند. این دستور یک حلقه است که برای پیمایش و چرخیدن در list و map بکار می رود.

برای مثال، فرض بگیرید که دو نوع list در اختیار دارید. آیتم های لیست اول با ویرگول از هم جدا شده اند.

10px 11px, 15px 16px

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

{10px 11px} {15px 16px}

Map ها

Map ها ترکیبی از جفت های کلید و مقدار هستند که در آن کلیدها نقش اسم متناظر مقادیر (متغیرها) را ایفا می کنند. Map ها مقادیر (گروهی از متغیرهایی که متشکل از اسم و مقدار هستند) را گروه بندی کرده و این قابلیت را دارند که به صورت پویا/در زمان اجرای برنامه به المان های آن دسترسی صورت گیرد. نحوه ی نگارش و استفاده از نوع داده ای map به شرح زیر می باشد:

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

با استفاده از توابع زیر قادر خواهید بود عملیات مختلفی بر روی map ها انجام دهید:

• map-get – مقادیر متغیر map را ارائه می دهد.
• map-merge – مقادیر دلخواه را به map اضافه می کند.
• دستور @each – حلقه ای که در map پیمایش کرده و به ازای هر جفت اسم و مقدار، key/value در map یک style اعمال می کند.

Map ها در واقع لیستی متشکل از جفت های تهی کلید/مقدار می باشند که داخل پرانتز محصور شده و باید توسط ویرگول از هم جدا شوند. شما می توانید با استفاده از inspect ($value) رشته ی خروجی تولید کنید که در اشکال زدایی و debugging به شما می کند.

نوع داده ای Color

این نوع داده ای برای تعیین و ذخیره مقدار رنگ بکار می رود. data type مزبور تعداد زیادی متغیر (که دارای اسم منحصربفرد هستند) را شامل می شوند که تشخیص آن ها از رشته های بدون علامت نقل و قول سخت است.

در حالت نمایش خروجی فشرده (compressed output mode)، Sass فشرده و کوچکترین معادل CSS از آن رنگ را در خروجی نمایش می دهد. به عنوان مثال، #FF0000 در حالت نمایش خروجی به صورت فشرده، در قالب red نمایش داده می شود. این در حالی است که blanchedalmond به صورت #FFEBCD نمایش داده می شود.

یکی از مشکلاتی که کاربران در خصوص استفاده از اسم رنگ ها (named colors) با آن مواجه می شوند این است که Sass فرمت خروجی را در حالت غیر compressed ترجیح می دهد. مقدار رنگی که داخل یک selector تزریق (interpolate) شده باشد ، در حالت فشرده (compressed) غیرمجاز تلقی می شود. برای برطرف کردن این مشکل، چنانچه قرار است اسم رنگ ها (named colors) در ساخت یک selector بکار رود، بایستی همیشه اسم رنگ (named colors) را داخل علامت نقل و قول محصور نمایید.