آموزش کار با دستورات media در Sass

آموزش Sass – کار با دستورات @media

@media در واقع دستور سبک دهی و تنظیم ظاهر (style rule) را بر روی انواع حالات نمایش یا type media تنظیم می کند. دستورات @media در Sass و CSS کاربردی یکسان دارند، به استثنای یک قابلیت اضافه بر سازمان که آن امکان قرارگیری در بدنه ی دستورات CSS (به صورت تودرتو) می باشد. هنگامی که @media در بدنه ی دستور (rule) CSS گنجانده می شود، Sass آن را به بالای فایل stylesheet فرستاده و در این میان تمامی selector ها را (از بالا تا پایین فایل) داخل دستور مربوطه ی CSS قرار می دهد. این امر به شما کمک می کند بدون نیاز به تکرار selector ها یا ایجاد گسستگی در ساختار فایل stylesheet، استایل ها و دستورات تنظیم ظاهر مختص به هر حالت نمایش (media-specific styles ) را اضافه نمایید. مثال:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

به کد زیر کامپایل می شود:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media query ها را نیز می توان به صورت تودرتو تعریف کرده و آن ها را داخل یکدیگر گنجاند. این کوئری ها را سپس به وسیله ی عملگر and به راحتی و به روشی مختصر می توان با یکدیگر ترکیب کرد. مثال:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

به کد زیر ترجمه می شود:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; }
}

در پایان باید گفت که می توان در @media query ها بجای اسم و مقدار feature ها جهت تنظیم ظاهر المان ها، از دستورات و عبارات SassScript (نظیر متغیرها، توابع و عملگرها) استفاده کرد. مثال:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

به کد زیر ترجمه می شود:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; }
}

مثال کاربردی

مثال زیر استفاده از دستور @media را به صورت کاربردی در فایل SCSS به نمایش می گذارد.

< !doctype html >
   < head >
      < title >Media directive Example< /title >
      < link rel="stylesheet" href="media.css" type="text/css" / >
   < /head >
   < body class="container" >
      < h2 >Example using media directive< /h2 >
      < img src="/sass/images/birds.jpg" class="style" >
   < /body >
< /html >

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

media.scss
h2 {
   color: #77C1EF;
}
.style {
   width: 900px;
   @media screen and (orientation: portrait) {
      width:500px;
      margin-left: 120px;
   }
}

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

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

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

media.css
h2 {
   color: #77C1EF;
 }
.style {
   width: 900px;
}
@media screen and (orientation: portrait) {
   .style {
      width: 500px;
      margin-left: 120px;
   }
}

خروجی

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

• کد html فوق را در فایل media.html ذخیره نمایید.
• فایل html مذکور را با مرورگر دلخواه باز کرده و خروجی را مشاهده نمایید.