آموزش Sass – CSS Extension ها تودرتو سازی دستورات CSS/ Nested CSS Rules

آموزش Sass – CSS Extension ها تودرتو سازی دستورات CSS/ Nested CSS Rules

شرح

این extension به شما امکان می دهد تا دستورات CSS (css rules) را داخل یکدیگر بکار برده و به اصطلاح آن ها را nest نمایید. برای مثال اگر لازم است چندین المان را با Selector ها انتخاب کنید، nested css این اجازه را می دهد تا یک selector را داخل selector دیگر استفاده نمایید و بدین وسیله selector های ترکیبی، پیچیده و تودرتو تعریف نمایید.

آنگاه دستور داخلی (inner rule) تنها در selector دستور خارجی (outer) اعمال می شود.

مثال 1

#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

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

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

همان طور که می بینید انتخابگر .redbox در #main p گنجانده شده است. این امر به شما اجازه می دهد تا از تکرار selector های میزبان (parent selector) جلوگیری نمایید و نیز فایل های قالب بندی (layout) پیچیده ی CSS که selector های تودرتو (selected) متعددی دارند را نسبت به قبل بسیار ساده تر نمایید.

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

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

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

مثال 2

مثال زیر استفاده از دستورات تودرتوی CSS در فایل SCSS را نمایش می دهد.

< html >
   < head >
     < title >Nested Rules< /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" >
         < h1 >My First Heading< /h1 >
           < p >It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. < /p >
           < p >It is more stable and powerful CSS extension language.< /p >
         < div class="box" >
           < h1 >My Second Heading< /h1 >
           < p >It is initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.< /p >
         < /div >
      < /div >
   < /body >
< /html >

در مرحله ی بعدی فایل style.scss را تعریف نمایید. لازم است به پسوند فایل نیز توجه داشته باشید.

style.scss
.container{
   h1{
      font-size: 25px;
      color:#E45456;
   }
   p{
      font-size: 25px;
      color:#3C7949;
   }
   .box{
      h1{
         font-size: 25px;
         color:#E45456;
      }
      p{
         font-size: 25px;
         color:#3C7949;
      }
   }
}

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

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

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

محتوای فایل به صورت زیر می باشد:

style.css
.container h1 {
   font-size: 25px;
   color: #E45456;
}
.container p {
   font-size: 25px;
   color: #3C7949;
}
.container .box h1 {
   font-size: 25px;
   color: #E45456;
}
.container .box p {
   font-size: 25px;
   color: #3C7949;
}

خروجی

مراحل زیر را طی نموده و نحوه ی عملکرد کد زیر را مشاهده می کنید:

• کد html فوق را در فایل nested_rules.html ذخیره نمایید.
• فایل html را با استفاده از مرورگر لازم باز کرده و سپس خروجی را به صورت زیر مشاهده نمایید: