دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!
مشاهده بیشترمشخصات مقاله
-
832
-
0.0
-
2166
-
0
-
0
آموزش SASS-Property های تودرتو Nested Properties
آموزش SASS – Property های تودرتو و مقداردهی شده به صورت یکجا در یک namespace واحد (Nested Properties)
CSS تعداد زیادی property دارد که همگی در قالب "namespace;" های خاصی سازمان دهی شده اند. برای مثال، ویژگی های font-family، font-size و font-weight همگی در namespace ای به نام font قرار دارند. در CSS خالص زمانی که شما می خواهید تعداد زیادی property را که متعلق به یک namespace واحد هستند، مقداردهی نمایید، بایستی هر یک را به صورت مجزا و جداگانه تایپ کنید و این امر زمان گیر و ملال آور است. SASS یک راه میانبر برای شما تعبیه کرده است: بدین صورت که شما یکبار namespace دلخواه را تایپ می کنید و سپس تمامی property های زیرمجموعه ی آن را داخل همین namespace مقداردهی می نمایید.
مثال 1در مثال زیر مشاهده می کنید که کلیه ی property های زیر مجموعه ی font از قبیل font-family، font-size و غیره ... در بدنه ی یک namespace واحد تنظیم شده اند:
1 2 3 4 5 6 7 8 | .funky { font: { family: fantasy; size: 30em; weight: bold; }}<button></button> |
کامپایل می شود به:
1 2 3 4 5 | .funky { font-family: fantasy; font-size: 30em; font-weight: bold; }<button></button> |
namespace میزبان property مربوطه نیز خود می تواند مقداردهی شود. مثال:
1 2 3 4 5 6 | .funky { font: 20px/24px fantasy { weight: bold; }}<button></button> |
کامپایل می شود به:
1 2 3 4 5 | .funky { font: 20px/24px fantasy; font-weight: bold;}<button></button> |
شما می توانید با استفاده از nested properties (مقداردهی چندین property از یک namespace واحد در یک قطعه کد به صورت یکجا) از تکرار دستورات CSS خودداری نمایید. به طور مثال، فرض بگیرید می خواهید از namespace ای به نام font که دارای property های زیرمجموعه ای به نام font-size، font-family و غیره می باشد. در CSS خالص شما بایستی این property ها را هر بار با namespace شان تکرار کنید. با استفاده از SASS شما قادر خواهید بود property ها را با نوشتن namepace مربوطه ی آن ها یکجا در یک قطعه کد واحد (که همان namespace هست) مقداردهی نمایید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < html > < head > < title >Nested Properties< /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" > < /head > < body > < div class="container" > < h1 >Example using Nested Properties< /h1 > < p class="line" >SASS stands for Syntactically Awesome Stylesheet< /p > < /div > < /body >< /html ><button></button> |
فایل style.scss را ایجاد نمایید.
1 2 3 4 5 6 7 8 9 10 | style.scss.line { font: { family: Lucida Sans Unicode; size:20px; weight: bold; variant: small-caps; }}<button></button> |
با استفاده از دستور زیر می توانید بر روی محتوای فایل مورد نظر نظارت داشته و هرگاه فایل SASS بروز رسانی شد، فایل CSS را نیز همزمان با آن بروز رسانی نمایید.
1 | sass --watch C:\ruby\lib\sass\style.scss:style.css<button></button> |
دستور بالا را اجرا نمایید. فایل style.css به صورت خودکار ایجاد می شود. این فایل حاوی کد زیر خواهد بود:
1 2 3 4 5 6 7 8 | style.css.line { font-family: Lucida Sans Unicode; font-size: 20px; font-weight: bold; font-variant: small-caps;}<button></button> |
خروجی
مراحل زیر را جهت اجرای کد و گرفتن خروجی دنبال نمایید:
- • کد html فوق را در فایل nested_properties.html ذخیره نمایید.
- • فایل HTML را با مرورگر دلخواه باز نمایید. خروجی به صورت زیر به نمایش در می آید:
![آموزش SASS]( "آموزش SASS")
