آموزش Sass – عملیات بولی (Boolean operations)

شما می توانید با استفاده از and، or و not بر روی اسکریپت Sass عملیات بولی انجام دهید.

مثال کاربردی

مثال زیر عملیات بولی در Sass را به صورت عملی در قالب فایل SCSS به نمایش می گذارد:

< html >
   < head >
      < title >Boolean 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 >
      < h3 >Example using Boolean Operations< /h3 >
      < p class="bool" >SASS stands for Syntactically Awesome Stylesheet..< /p >
   < /body >
< /html >

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

style.scss
$age:20;
.bool {
   @if ($age > 10 and $age < 25) {
      color: green;
   }
}

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

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

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

style.css
.bool {
   color: green;
}

خروجی

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

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