۱۳۹۵/۰۴/۲۴, ۱۱:۰۴ ق.ظ
قسمت دوم :
قطعه کدها (Partials):
قطعه کدهای SASS که در قالب فایلهای جداگانه نوشته میشوند، قابلیت فراخوانی در سایر فایلهای SASS را دارند. برای مثال، میدانیم که reset کردن در تمام فایلهای Css ضروری است. با استفاده از فایلهای Partial میتوان کد Reset مورد نظر را یک بار نوشت و در فایلهای دیگر SASS آن را فراخوانی کرد.
نامگذاری فایلهای Partial در SASS با (_) انجام میشود (مانند partial.scss_). علامت (_) در ابتدای نام فایل، مشخص کننده این است که فایل Partial میباشد و نباید به یک فایل Css تبدیل شود. فایلهای Partial در فایلهای دیگر SASS به وسیلهimport@ فراخوانی میشوند.
![[عکس: 1462531098ResetPartial.jpg]](http://academy-it.ir/uploads/2016/05/1462531098ResetPartial.jpg)
![[عکس: 1462531259PartialImport.jpg]](http://academy-it.ir/uploads/2016/05/1462531259PartialImport.jpg)
نوشتن پسوند فایل _reset.scss لازم نیست و خود SASS فرمت فایل را تشخیص میدهد. در نهایت پس از کامپایل، فایل Cssتولید شده به صورت زیر خواهد بود:
![[عکس: 1462531324ImportResult.jpg]](http://academy-it.ir/uploads/2016/05/1462531324ImportResult.jpg)
![[عکس: 1462531656mixinA.jpg]](http://academy-it.ir/uploads/2016/05/1462531656mixinA.jpg)
تعریف mixin با دستور mixin@ به همراه اختصاص یک نام به آن و فراخوانی mixin با include@ انجام میشود. در مثال بالا، از متغیر radius$ برای افزایش انعطافپذیری کد استفاده شده است. کد Css کامپایل شده به صورت زیر خواهد بود:
![[عکس: 1462531757mixinB.jpg]](http://academy-it.ir/uploads/2016/05/1462531757mixinB.jpg)
![[عکس: 1462531861inheritanceA.jpg]](http://academy-it.ir/uploads/2016/05/1462531861inheritanceA.jpg)
در کد بالا، ویژگیهای نوشته شده برای message. در کلاسهای success ،.error. و warning. به وسیله دستور extend@ به ارث برده شدهاند.
![[عکس: 1462531949inheritanceB.jpg]](http://academy-it.ir/uploads/2016/05/1462531949inheritanceB.jpg)
![[عکس: 1462532033OperatorsA.jpg]](http://academy-it.ir/uploads/2016/05/1462532033OperatorsA.jpg)
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهای SASS انجام شده است:
![[عکس: 1462532084OperatorsB.jpg]](http://academy-it.ir/uploads/2016/05/1462532084OperatorsB.jpg)
قطعه کدها (Partials):
قطعه کدهای SASS که در قالب فایلهای جداگانه نوشته میشوند، قابلیت فراخوانی در سایر فایلهای SASS را دارند. برای مثال، میدانیم که reset کردن در تمام فایلهای Css ضروری است. با استفاده از فایلهای Partial میتوان کد Reset مورد نظر را یک بار نوشت و در فایلهای دیگر SASS آن را فراخوانی کرد.
نامگذاری فایلهای Partial در SASS با (_) انجام میشود (مانند partial.scss_). علامت (_) در ابتدای نام فایل، مشخص کننده این است که فایل Partial میباشد و نباید به یک فایل Css تبدیل شود. فایلهای Partial در فایلهای دیگر SASS به وسیلهimport@ فراخوانی میشوند.
![[عکس: 1462531098ResetPartial.jpg]](http://academy-it.ir/uploads/2016/05/1462531098ResetPartial.jpg)
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_ را فراخوانی میکند.
![[عکس: 1462531259PartialImport.jpg]](http://academy-it.ir/uploads/2016/05/1462531259PartialImport.jpg)
نوشتن پسوند فایل _reset.scss لازم نیست و خود SASS فرمت فایل را تشخیص میدهد. در نهایت پس از کامپایل، فایل Cssتولید شده به صورت زیر خواهد بود:
![[عکس: 1462531324ImportResult.jpg]](http://academy-it.ir/uploads/2016/05/1462531324ImportResult.jpg)
گروهبندی کدها (Mixins):
نوشتن دستورات دارای پیشوند در Css3 و تکرار آنها در هر قسمت مورد نیاز کاری زمانبر و خستهکننده است. تعریف mixinها در SASS به شما اجازه میدهد که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید. بدیهی است که استفاده از متغیرها در کنار تعریف mixinها، کد را انعطافپذیرتر خواهد کرد.
نوشتن دستورات دارای پیشوند در Css3 و تکرار آنها در هر قسمت مورد نیاز کاری زمانبر و خستهکننده است. تعریف mixinها در SASS به شما اجازه میدهد که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید. بدیهی است که استفاده از متغیرها در کنار تعریف mixinها، کد را انعطافپذیرتر خواهد کرد.
![[عکس: 1462531656mixinA.jpg]](http://academy-it.ir/uploads/2016/05/1462531656mixinA.jpg)
تعریف mixin با دستور mixin@ به همراه اختصاص یک نام به آن و فراخوانی mixin با include@ انجام میشود. در مثال بالا، از متغیر radius$ برای افزایش انعطافپذیری کد استفاده شده است. کد Css کامپایل شده به صورت زیر خواهد بود:
![[عکس: 1462531757mixinB.jpg]](http://academy-it.ir/uploads/2016/05/1462531757mixinB.jpg)
توسعه/وراثت (Extend/Inheritance):
وراثت یکی از پرکاربردترین ویژگیهای SASS است. با به کارگیری این ویژگی میتوان گروهی از خصوصیتهای یک selector را در selector دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود. (پیادهسازی اصل DRY)
وراثت یکی از پرکاربردترین ویژگیهای SASS است. با به کارگیری این ویژگی میتوان گروهی از خصوصیتهای یک selector را در selector دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود. (پیادهسازی اصل DRY)
![[عکس: 1462531861inheritanceA.jpg]](http://academy-it.ir/uploads/2016/05/1462531861inheritanceA.jpg)
در کد بالا، ویژگیهای نوشته شده برای message. در کلاسهای success ،.error. و warning. به وسیله دستور extend@ به ارث برده شدهاند.
![[عکس: 1462531949inheritanceB.jpg]](http://academy-it.ir/uploads/2016/05/1462531949inheritanceB.jpg)
عملگرها (Operators):
در SASS عملگرهای ریاضی +، -، *، / و % قابل استفاده هستند؛ در نتیجه به کمک SASS محاسبات در Css امکانپذیر شده است.
در SASS عملگرهای ریاضی +، -، *، / و % قابل استفاده هستند؛ در نتیجه به کمک SASS محاسبات در Css امکانپذیر شده است.
![[عکس: 1462532033OperatorsA.jpg]](http://academy-it.ir/uploads/2016/05/1462532033OperatorsA.jpg)
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهای SASS انجام شده است:
![[عکس: 1462532084OperatorsB.jpg]](http://academy-it.ir/uploads/2016/05/1462532084OperatorsB.jpg)
http://academyit.net
آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...
کانال رسمی آکادمی آی تی در تلگرام
https://telegram.me/joinchat/BjNmOzwQWxi32yY2mP7Q2w
http://academyit.net
آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...
کانال رسمی آکادمی آی تی در تلگرام
https://telegram.me/joinchat/BjNmOzwQWxi32yY2mP7Q2w
http://academyit.net