۱۳۹۵/۰۴/۲۴, ۱۱:۰۳ ق.ظ
قسمت دوم :
قطعه کدها (Partials):
قطعه کدهای SASS که در قالب فایلهای جداگانه نوشته میشوند، قابلیت فراخوانی در سایر فایلهای SASS را دارند. برای مثال، میدانیم که reset کردن در تمام فایلهای Css ضروری است. با استفاده از فایلهای Partial میتوان کد Reset مورد نظر را یک بار نوشت و در فایلهای دیگر SASS آن را فراخوانی کرد.
نامگذاری فایلهای Partial در SASS با (_) انجام میشود (مانند partial.scss_). علامت (_) در ابتدای نام فایل، مشخص کننده این است که فایل Partial میباشد و نباید به یک فایل Css تبدیل شود. فایلهای Partial در فایلهای دیگر SASS به وسیلهimport@ فراخوانی میشوند.
نوشتن پسوند فایل _reset.scss لازم نیست و خود SASS فرمت فایل را تشخیص میدهد. در نهایت پس از کامپایل، فایل Cssتولید شده به صورت زیر خواهد بود:
تعریف mixin با دستور mixin@ به همراه اختصاص یک نام به آن و فراخوانی mixin با include@ انجام میشود. در مثال بالا، از متغیر radius$ برای افزایش انعطافپذیری کد استفاده شده است. کد Css کامپایل شده به صورت زیر خواهد بود:
در کد بالا، ویژگیهای نوشته شده برای message. در کلاسهای success ،.error. و warning. به وسیله دستور extend@ به ارث برده شدهاند.
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهای SASS انجام شده است:
قطعه کدها (Partials):
قطعه کدهای SASS که در قالب فایلهای جداگانه نوشته میشوند، قابلیت فراخوانی در سایر فایلهای SASS را دارند. برای مثال، میدانیم که reset کردن در تمام فایلهای Css ضروری است. با استفاده از فایلهای Partial میتوان کد Reset مورد نظر را یک بار نوشت و در فایلهای دیگر SASS آن را فراخوانی کرد.
نامگذاری فایلهای Partial در SASS با (_) انجام میشود (مانند partial.scss_). علامت (_) در ابتدای نام فایل، مشخص کننده این است که فایل Partial میباشد و نباید به یک فایل Css تبدیل شود. فایلهای Partial در فایلهای دیگر SASS به وسیلهimport@ فراخوانی میشوند.
Import:
در خود Css امکان import فایلهای دیگر Css وجود دارد و میتوان با استفاده از آن، کدهای Css را به قسمتهای کوچکتر تقسیمبندی و آنها را فراخوانی کرد. مشکل import در Css این است که با هر import@، یک Http Request ایجاد میشود.
SASS به جای ایجاد یک Http Request، فایل partial فراخوانی شده را با فایل اصلی ترکیب میکند و در نهایت یک فایل برای تحویل به مرورگر وجود خواهد داشت.
در مثال زیر، فایل اصلی base.scss فایل partial با نام reset.scss_ را فراخوانی میکند.
در خود Css امکان import فایلهای دیگر Css وجود دارد و میتوان با استفاده از آن، کدهای Css را به قسمتهای کوچکتر تقسیمبندی و آنها را فراخوانی کرد. مشکل import در Css این است که با هر import@، یک Http Request ایجاد میشود.
SASS به جای ایجاد یک Http Request، فایل partial فراخوانی شده را با فایل اصلی ترکیب میکند و در نهایت یک فایل برای تحویل به مرورگر وجود خواهد داشت.
در مثال زیر، فایل اصلی base.scss فایل partial با نام reset.scss_ را فراخوانی میکند.
نوشتن پسوند فایل _reset.scss لازم نیست و خود SASS فرمت فایل را تشخیص میدهد. در نهایت پس از کامپایل، فایل Cssتولید شده به صورت زیر خواهد بود:
گروهبندی کدها (Mixins):
نوشتن دستورات دارای پیشوند در Css3 و تکرار آنها در هر قسمت مورد نیاز کاری زمانبر و خستهکننده است. تعریف mixinها در SASS به شما اجازه میدهد که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید. بدیهی است که استفاده از متغیرها در کنار تعریف mixinها، کد را انعطافپذیرتر خواهد کرد.
نوشتن دستورات دارای پیشوند در Css3 و تکرار آنها در هر قسمت مورد نیاز کاری زمانبر و خستهکننده است. تعریف mixinها در SASS به شما اجازه میدهد که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید. بدیهی است که استفاده از متغیرها در کنار تعریف mixinها، کد را انعطافپذیرتر خواهد کرد.
تعریف mixin با دستور mixin@ به همراه اختصاص یک نام به آن و فراخوانی mixin با include@ انجام میشود. در مثال بالا، از متغیر radius$ برای افزایش انعطافپذیری کد استفاده شده است. کد Css کامپایل شده به صورت زیر خواهد بود:
توسعه/وراثت (Extend/Inheritance):
وراثت یکی از پرکاربردترین ویژگیهای SASS است. با به کارگیری این ویژگی میتوان گروهی از خصوصیتهای یک selector را در selector دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود. (پیادهسازی اصل DRY)
وراثت یکی از پرکاربردترین ویژگیهای SASS است. با به کارگیری این ویژگی میتوان گروهی از خصوصیتهای یک selector را در selector دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود. (پیادهسازی اصل DRY)
در کد بالا، ویژگیهای نوشته شده برای message. در کلاسهای success ،.error. و warning. به وسیله دستور extend@ به ارث برده شدهاند.
عملگرها (Operators):
در SASS عملگرهای ریاضی +، -، *، / و % قابل استفاده هستند؛ در نتیجه به کمک SASS محاسبات در Css امکانپذیر شده است.
در SASS عملگرهای ریاضی +، -، *، / و % قابل استفاده هستند؛ در نتیجه به کمک SASS محاسبات در Css امکانپذیر شده است.
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهای SASS انجام شده است:
http://academyit.net
آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...
کانال رسمی آکادمی آی تی در تلگرام
https://telegram.me/joinchat/BjNmOzwQWxi32yY2mP7Q2w
http://academyit.net
آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...
کانال رسمی آکادمی آی تی در تلگرام
https://telegram.me/joinchat/BjNmOzwQWxi32yY2mP7Q2w
http://academyit.net