آموزش Number operations در SASS

آموزش Sass – عملیات مربوط به نوع داده ای number/Number operations

زبان تنظیم ظاهر وب سایت SASS این قابلیت را در اختیار توسعه دهنده قرار می دهد که عملیاتی نظیر جمع، تفریق، ضرب یا تقسیم را بر روی اعداد انجام دهد. لازم به ذکر است که توابع ریاضی SASS واحدها را به هنگام انجام عملیات محاسباتی حفظ می کند. به عبارت دیگر، توسعه دهنده نمی تواند به هنگام انجام عملیات ریاضی بر روی اعداد، از واحدهای ناسازگار و نامرتبط (مانند اضافه کردن دو عدد با دو واحد کاملا متفاوت px و em) استفاده کند. همچنین دو عدد که با واحدهای یکسان در یکدیگر ضرب می شوند، نتیجتا واحدهای مربع را تولید می کنند (10px * 10px == 100px * px). توجه داشته باشید که px * px در CSS یک واحد غیراستاندارد است و در صورت استفاده از آن Sass به دلیل اینکه شما از واحدهای غیر مجاز استفاده کرده اید، خطا صادر می نماید.

Sass به شما این امکان را می دهد تا برای اعداد از عملگرهای رابطه ای (<,>, <=, >=) استفاده کرده و نیز از عملگرهای تساوی (==, !=) برای تمامی انواع داده ای از جمله اعداد و رشته استفاده نمایید.

عملیات تقسیم و "/" (Division و عملگر /)

همان طور که می دانید CSS به شما این امکان را می دهد تا از / برای تفکیک مقادیر عددی Property ها استفاده نمایید. حال از آنجایی که SassScript یک افزونه از property syntax زبان CSS است، طبیعتا می بایست از این قابلیت پشتیبانی کند. در عین حال، این کاراکتر را جهت انجام تقسیم نیز در عملیات ریاضی استفاده می کند. بدین معنی که به صورت پیش فرض، اگر دو عدد در SassScript توسط / از یکدیگر تفکیک شوند، همان طور نیز در خروجی CSS داخل پنجره ی مرورگر به نمایش در می آیند.

در سه سناریو زبان Sass کاراکتر / را به منزله ی عملگر تقسیم درنظر گرفته و تفسیر می کند. این سه سناریو عمدتا همان شرایطی را شامل می شود که عمل تقسیم به طور کلی در آن مورد استفاده قرار می گیرد. سناریوهای مزبور به شرح زیر می باشند:

1. زمانی که مقدار مورد نظر یا بخشی از آن در متغیر ذخیره شده یا خروجی یک تابع می باشد.
2. زمانی که مقدار مورد نظر داخل پرانتز محصور شده باشد مگر اینکه آن پرانتزها خارج از یک list قرار داشته و مقدار داخل آن درج شده باشد.
3. هنگامی که مقدار مورد نظر داخل یک عبارت یا دستوری قرار گرفته باشد که عملیات ریاضی و محاسباتی انجام می دهد.

مثال:

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

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

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

اگر می خواهید کاراکتر ساده ی"/" در CSS را همراه با متغیر استفاده نمایید، کافی است متغیرهای مورد نظر را داخل ساختار دستوری #{} قرار دهید. مثال:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

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

p {
  font: 12px/30px;
}

عملیات تفریق، اعداد منفی و –

علامت - می تواند معانی و کاربردهای متفاوتی در CSS و Sass داشته باشد. این علامت می تواند معنی عملگر تفریق را داشته و برای کسر مقداری از مقدار دیگر بکار برود (5px - 3px)، می تواند قبل از یک عدد درج شده و معنی علامت منفی را بدهد (-3px)، می تواند نقش عملگر یگانی نقیض (-$var) را ایفا کند یا بخشی از اسم یک property باشد (font-weight). اغلب تشخیص کاربرد آن به راحتی بر اساس شرایط جاری آسان می باشد. با این وجود شرایطی وجود دارد که کمی این امر را دشوار می کند. برای جلوگیری از سردرگمی توصیه می شود که از رهنمودهای زیر استفاده نمایید:

• بهتر است به هنگام انجام عملیات تفریق در دو طرف "-" پرانتز درج نمایید.
• اگر قرار است به عنوان عملگر نقیض یا علامت منفی استفاده شود، لازم است قبل از آن یک space درج کرده و سپس علامت مزبور را به عدد یا متغیر بچسبانید.
• چنانچه المان مورد نظر در list ای قرار دارد که آیتم های آن توسط ویرگول از هم جدا شده اند، می توانید عملگر یگانی نقیض را داخل پرانتز محصور نمایید (10px (-$var)).

معانی و کاربردهای مختلف - از نظر اولویت به ترتیب زیر می باشد:

1. علامت "-" هنگامی که به عنوان بخشی از اسم یک property بکار می رود. بدین معنی کهa-1 یک رشته بدون علامت نقل و قول است که معادل "a-1" می باشد. تنها مورد استثنا واحد ها هستند؛ زبان Sass معمولا تمامی اسم ها (identifier ها) را به عنوان اسم معتبر و استاندارد می پذیرد. اما در اسم معمولا hyphen که بلافاصله پس از آن عدد نوشته شده باشد، وجود ندارد. بدین معنی که 5px-3px با 5px - 3px برابر می باشد.
2. علامت "-" هنگامی که بین دو عدد، بدون کاراکتر whitespace، قرار می گیرد. این حالت نشانگر عملیات تفریق می باشد، بنابراین 1-2 معادل 1 - 2 است.
3. علامت "-" هنگامی که در ابتدای یک عدد ثابت نوشتاری قرار می گیرد. در این شرایط علامت مزبور نشانه ی منفی بودن عدد می باشد. بنابراین 1 -2 یک list است که 1 و -2 را شامل می شود.
4. علامت "-" هنگامی که صرف نظر از وجود یا عدم وجود whitespace، بین دو عدد قرار می گیرد. در این حالت نیز علامت مزبور نقش عملگر تفریق را ایفا می کند. بنابراین 1 -$var با 1 - $var برابر است.
5. علامت "-" زمانی که قبل از یک عدد مقدار قرار می گیرد. در چنین شرایطی علامت مزبور به منزله ی عملگر یگانی نقیض می باشد. بدین معنی که یک عدد را گرفته و نقیض آن را برمی گرداند.

مثال کاربردی

مثال زیر عملیات مختلف بر روی نوع داده ای number را نمایش می دهد.

< html >
   < head >
     < title >Number 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" >
         < p class="para1" >SASS stands for Syntactically Awesome Stylesheet..< /p >
         < h2 >Hello...Welcome to Sass< /h2 >
         < h3 >Hello...Welcome to Sass< /h3 >
         < p class="para2" >Hello...Welcome to Sass< /p >
      < /div >
   < /body >
< /html >

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

style.scss
$size: 25px;
h2{
   font-size: $size + 5;
}
h3{
   font-size: $size / 5;
}
.para1 {
   font-size: $size * 1.5;
}
.para2 {
   font-size: $size - 10;
}

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

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

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

style.css
h2 {
   font-size: 30px;
}
h3 {
   font-size: 5px;
}
.para1 {
   font-size: 37.5px;
}
.para2 {
  font-size: 15px;
}

خروجی

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

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