آموزش افزونه Parentheses در SASS

آموزش Sass – افزونه ی پرانتز (Parantheses)

می توان با استفاده از پرانتز ترتیب و اولویت انجام عملیات را تغییر داده و مدیریت کرد.

مثال کاربردی

مثال زیر نحوه ی استفاده از پرانتز در فایل SCSS را شرح می دهد:

< html >
   < head >
      < title >String Operations< /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 Sass Parentheses< /h2 >
         < p >SASS stands for Syntactically Awesome Stylesheet..< /p >
      < /div >
   < /body >
< /html >

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

style.scss
p {
   font-size:  5px + (6px * 2);
   color:#ff0000;
}

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

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

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

style.css
p {
   font-size: 17px;
   color: #ff0000;
}

خروجی

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

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