دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!
مشاهده بیشترمشخصات مقاله
-
800
-
0.0
-
2283
-
0
-
0
آموزش Referencing Parent Selectors در SASS
آموزش SASS – extension درج و اشاره به انتخاب گرهای میزبان در دستورات تودرتو/ Referencing Parent Selectors: &: & #parent-selector
گاهی لازم می شود از انتخاب گر میزبان دستورات تودرتوی CSS (nested rule's parent selector) به صورت متفاوت و غیر از حالت پیش فرض استفاده نمایید. به طور مثال، شاید لازم باشد style و ویژگی های ظاهری خاصی به یک selector اعمال کنید که به هنگام قرارگیری اشاره گر موس بر روی آن یا زمانی که المان body دارای کلاس معینی بود، خود را نشان دهند. در چنین شرایطی، کافی است با درج کاراکتر & قبل از انتخابگر میزبان (parent selector)، صریحا مشخص کنید که selector مورد نظر کجا باید درج شود.
مثال 1
1 2 3 4 5 6 7 | a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; }}<button></button> |
خروجی کامپایل شده:
1 2 3 4 5 6 7 8 | a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }<button></button> |
همان طور که می بینید در CSS خالص، انتخابگر میزبان (parent selector) جایگزین کاراکتر & شده است (در واقع & در CSS خالص به انتخاب گر میزبان که در مثال بالا همان a می باشد، ترجمه شده است). بدین معنی که اگر شما دستوری داشته باشید که بسیار تودرتو شده باشد، انتخابگر میزبان (parent selector) کاملا قبل از اینکه & با parent selector جایگزین شود، به طور کامل (حدس زده و تبدیل) resolve می گردد.
مثال:
1 2 3 4 5 6 7 8 | #main { color: black; a { font-weight: bold; &:hover { color: red; } }}<button></button> |
خروجی کامپایل شده:
1 2 3 4 5 6 7 8 9 | #main { color: black; }#main a { font-weight: bold; }#main a:hover { color: red; }<button></button> |
لازم به ذکر است که کاراکتر & بایستی در ابتدای یک انتخابگر ترکیبی و پیچیده (compound selector) درج شود، اما بعد از آن می توان یک پسوند نیز اضافه کرد که این پسوند به انتخابگر میزبان (parent selector) الصاق می شود.
مثال:
1 2 3 4 5 | #main { color: black; &-sidebar { border: 1px solid; }}<button></button> |
خروجی کامپایل شده:
1 2 3 4 5 | #main { color: black; } #main-sidebar { border: 1px solid; }<button></button> |
اگر امکان الصاق پسوند (suffix) به انتخابگر میزبان وجود نداشته باشد، در آن صورت Sass پیغام خطا صادر می کند.
مثال 2در زیر مثال کاربردی دیگری که استفاده از انتخاب گرهای میزبان (parent selectors) در فایل های SCSS را نمایش می دهد، مشاهده می نمایید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < html > < head > < title >Referencing Parent Selectors< /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 Parent Selector< /h1 > < /div > < /body >< /html ><button></button> |
فایل style.scss را ایجاد نمایید. در قطعه کد زیر به کاراکتر & دقت نمایید. این کاراکتر همان طور که گفته شد محل درج انتخاب گر میزبان (parent selector) در دستورات تودرتوی CSS را مشخص کرده و به Sass امکان اشاره به آن را می دهد.
1 2 3 4 5 6 | style.scssa { font-size: 20px; &:hover { background-color: yellow; }}<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.cssa { font-size: 20px;}a:hover { background-color: yellow;}<button></button> |
خروجی
حال جهت گرفتن خروجی مراحل زیر را دنبال نمایید:
- کد html فوق را در فایل parent_selectors.html ذخیره نمایید.
- فایل html مزبور را با مرورگر دلخواه باز کنید. خروجی مانند زیر در پنجره ی مرورگر به نمایش در می آید.
- در اینجا همان طور که مشاهده می کنید، کاراکتر & در کد با parent selector (انتخاب گر میزبان) که همان تگ a می باشد، جایگزین شده و تاثیر آن را در خروجی به نمایش می گذارد. حال زمانی که بر روی لینک اشاره گر موس را معلق نگه می دارید، می بینید که background لینک به رنگ زرد در می آید.
