آموزش SASS –نحوه ی استفاده از placeholder selector

Sass از یک انتخابگر ویژه به نام "placeholder selector" استفاده می کند. این انتخابگر کاربردی مشابه id و class دارد با این تفاوت که بجای # و . از کاراکتر % استفاده می کند. این انتخابگر در اصل برای استفاده همراه با دستور @extend تعبیه شده است و بدون این دستور کاربردی ندارد (به تنهایی و بدون دستور @extend ، دستورات و rulesetهایی از CSS که از این placeholder selector ها استفاده می کنند، به CSS تبدیل و ترجمه نمی شود).

Placeholder selector

در SASS بجای انتخاب المان بر اساس id و class، از یک کاراکتر ویژه استفاده می شود که همان کارکرد را دارد. در CSS خالص، برای انتخاب المان بر اساس id و class به ترتیب از کاراکترهای "#"یا "." استفاده می کند. در SASS بجای این کاراکترها از "%" استفاده می شود. به منظور استفاده از این انتخابگر بایستی از دستور @extend استفاده نمایید. به عبارت دیگر بدون استفاده از @extend ، امکان نمایش خروجی در CSS وجود ندارد.

< html >
   < head >
      < title >Placeholder 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" >
      < 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 >
      < h1 >First Heading< /h1 >
      < p class="frst_para" >It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. < /p >
      < h1 >Second Heading< /h1 >
      < p class="sec_para" >It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.< /p >
   < /body >
< /html >

فایل style.css را ایجاد نمایید.

style.scss
.frst_para {
   color: green;
}
.sec_para {
   @extend .frst_para;
   font-size:20px;
}

در اینجا، همان طور که می بینید از دستور @extend استفاده شده است. این دستور به یک selector این امکان را می دهد style ها را از selector دیگر به ارث ببرد.

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

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

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

style.css
.frst_para, .sec_para {
   color: green;
}
.sec_para {
   font-size: 20px;
}

خروجی

جهت گرفتن خروجی از کد مراحل زیر را دنبال نمایید:

• کد html مربوطه را در فایل placeholder_selectors.html ذخیره نمایید.
• فایل html را با مرورگر باز کرده و خروجی را به صورت زیر مشاهده نمایید.