آموزش کاربرد & در Sass Script

آموزش SASS – کاربرد & در SassScript

شما می توانید با استفاده از کاراکتر & به selector میزبان (parent selector) اشاره کرده و آن را انتخاب نمایید. این کاراکتر در واقع برای Sass مشخص می کند که در کدام قسمت از قطعه کد مورد نظر، selector میزبان باید (درج شود) قرار گیرد.

کاراکتر & مانند زمانی که در selector ها (انتخابگر المان ها بر اساس تگ، id و غیره) استفاده می شود، در SassScript نیز به selector میزبان فعلی اشاره دارد (ارجاع می دهد).

دستور نگارشی و نحوه ی استفاده از این کاراکتر در SassScript به شرح زیر می باشد:

a {
   &:hover { color: green; }
}

کاراکتر & در قطعه کد بالا با انتخابگر میزبان (patent selector) که همان المان a می باشد جایگزین شده و رنگ لینک را به هنگام قرارگیری اشاره گر موس بر روی آن، به سبز تغییر می دهد.

مثال کاربردی

< html >
   < head >
      < title >& in SassScript< /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" >
      < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >< /script >
      < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" >< /script >
   < /head >
   < body >
      < div class="container" >
         < h2 >Example using & in SassScript< /h2 >
         < a href="http://www.tutorialspoint.com/" > www.tutorialspoint.com < /a >
      < /div >
   < /body >
< /html >

حال فایل style.scss را ایجاد نمایید.

a {
   font-size: 20px;
   &:hover { background-color: yellow;}
}

می توانید با استفاده از دستور زیر به SASS فرمان دهید که به تغییرات در محتوای فایل SASS گوش فرا داده و به مجرد بروز رسانی آن، کد CSS متناظر را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\style.scss:style.css

پس از فراخوانی و اجرای دستور فوق، style.css به همراه محتوای زیر به صورت خودکار ایجاد می شود.

a {
   font-size: 20px;
}
a:hover {
   background-color: yellow;
}

خروجی

مراحل زیر را جهت مشاهده ی خروجی کد طی نمایید:

• کد html بالا را در فایل &_SassScript.html ذخیره نمایید.
• فایل HTML مزبور را با مرورگر دلخواه باز نمایید. نتیجه ی کد به صورت زیر در پنجره ی مرورگر به نمایش در می آید: