academyIT
کاربر تازه وارد
- تاریخ عضویت
- 12 اکتبر 2015
- نوشته‌ها
- 63
- لایک‌ها
- 14
- سن
- 38
قطعه کدها (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 فراخوانی شده را با فایل اصلی ترکیب می‌کند و در نهایت یک فایل Css برای تحویل به مرورگر وجود خواهد داشت.
در مثال زیر، فایل اصلی base.scss فایل partial با نام reset.scss_ را فراخوانی می‌کند.
نوشتن پسوند فایل _reset.scss لازم نیست و خود SASS فرمت فایل را تشخیص می‌دهد. در نهایت پس از کامپایل، فایل Css تولید شده به صورت زیر خواهد بود:
گروه‌بندی کدها (Mixins):
نوشتن دستورات دارای پیشوند در Css3 و تکرار آن‌ها در هر قسمت مورد نیاز کاری زمان‌بر و خسته‌کننده است. تعریف mixinها در SASS به شما اجازه می‌دهد که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید. بدیهی است که استفاده از متغیرها در کنار تعریف mixinها، کد را انعطاف‌پذیرتر خواهد کرد.
تعریف mixin با دستور mixin@ به همراه اختصاص یک نام به آن و فراخوانی mixinبا include@ انجام می‌شود. در مثال بالا، از متغیر radius$ برای افزایش انعطاف‌پذیری کد استفاده شده است. کد Css کامپایل شده به صورت زیر خواهد بود:
توسعه/وراثت (Extend/Inheritance):
وراثت یکی از پرکاربردترین ویژگی‌های SASS است. با به کارگیری این ویژگی می‌توان گروهی از خصوصیت‌های یک selector را در selector دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود. (پیاده‌سازی اصل DRY)
در کد بالا، ویژگی‌های نوشته شده برای message. در کلاس‌های success ،.error. و warning. به وسیله دستور extend@ به ارث برده شده‌اند.
عملگرها (Operators):
در SASS عملگرهای ریاضی +، -، *، / و % قابل استفاده هستند؛ در نتیجه به کمک SASS محاسبات در Css امکان‌پذیر شده است.
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهای SASSانجام شده است:
قطعه کدهای 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 فراخوانی شده را با فایل اصلی ترکیب می‌کند و در نهایت یک فایل Css برای تحویل به مرورگر وجود خواهد داشت.
در مثال زیر، فایل اصلی base.scss فایل partial با نام reset.scss_ را فراخوانی می‌کند.
نوشتن پسوند فایل _reset.scss لازم نیست و خود SASS فرمت فایل را تشخیص می‌دهد. در نهایت پس از کامپایل، فایل Css تولید شده به صورت زیر خواهد بود:
گروه‌بندی کدها (Mixins):
نوشتن دستورات دارای پیشوند در Css3 و تکرار آن‌ها در هر قسمت مورد نیاز کاری زمان‌بر و خسته‌کننده است. تعریف mixinها در SASS به شما اجازه می‌دهد که گروهی از دستورات پرکاربرد را به راحتی در زمان مورد نیاز به کار ببرید. بدیهی است که استفاده از متغیرها در کنار تعریف mixinها، کد را انعطاف‌پذیرتر خواهد کرد.
تعریف mixin با دستور mixin@ به همراه اختصاص یک نام به آن و فراخوانی mixinبا include@ انجام می‌شود. در مثال بالا، از متغیر radius$ برای افزایش انعطاف‌پذیری کد استفاده شده است. کد Css کامپایل شده به صورت زیر خواهد بود:
توسعه/وراثت (Extend/Inheritance):
وراثت یکی از پرکاربردترین ویژگی‌های SASS است. با به کارگیری این ویژگی می‌توان گروهی از خصوصیت‌های یک selector را در selector دیگری به اشتراک گذاشت تا نوشتن کدهای تکراری جلوگیری شود. (پیاده‌سازی اصل DRY)
در کد بالا، ویژگی‌های نوشته شده برای message. در کلاس‌های success ،.error. و warning. به وسیله دستور extend@ به ارث برده شده‌اند.
عملگرها (Operators):
در SASS عملگرهای ریاضی +، -، *، / و % قابل استفاده هستند؛ در نتیجه به کمک SASS محاسبات در Css امکان‌پذیر شده است.
در این مثال، تبدیل پیکسل به درصد به راحتی با استفاده از عملگرهای SASSانجام شده است:
