آموزش کار با directive توابع در SASS

آموزش Sass – تعریف توابع اختصاصی در SASS و آموزش کار با directive های مربوط به توابع

SASS این امکان را در اختیار توسعه دهنده قرار می دهد تا توابع دلخواه خود را تعریف کرده، آن ها را هر اسکریپتی بکار ببرد و با هر مقداری ورودی فراخوانی کند.مثال:

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5);
}

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

#sidebar {
  width: 240px;
}

همان طور که مشاهده می کنید، توابع می توانند به تمامی متغیرهایی که به صورت سراسری تعریف شده اند دسترسی داشته باشند و درست مانند mixin ها آرگومان های ورودی دریافت کنند. می توان در توابع دستورات متعددی را تعریف کرد. استفاده از دستور @return جهت تنظیم مقدار خروجی تابع نیز ضروری است.

می توان به توابع نیز مانند mixin ها، اسم متغیرها/keyword argument ها را به عنوان آرگومان ارسال کرد. به عنوان مثال، ما می توانستیم تابع مورد نظر را به صورت زیر نیز فراخوانی کنیم:

#sidebar { width: grid-width($n: 5); }

توصیه می کنیم جهت جلوگیری از رخداد تداخل نامی در فایل، به اسم توابع یک پیشوند الحاق نمایید. با این کار خواننده ی محتوای فایل stylesheet می تواند تشخیص دهد که توابع بخشی از کد Sass یا CSS نیستند.

توابع اختصاصی (user-defined) می توانند مانند mixin ها، تعداد نامعلومی آرگومان ورودی بپذیرند و در واقع از امکان variable arguments پشتیبانی می کنند.

از گذشته در اسم توابع و سایر اسم هایی که به کامپوننت های Sass اختصاص می یابد، زیرخط (underscore) و خط تیره (dash) می تواستند جایگزین یکدیگر شده و بجای هم استفاده شوند. برای مثال، اگر تابعی به نام grid-width تعریف کرده باشید، می توانید آن را به صورت grid_width نیز فراخوانی کنید.

مثال کاربردی

مثال زیر نحوه ی تعریف تابع اختصاصی در فایل SCSS را به صورت کاربردی نمایش می دهد:

                            function_directive.htm
< 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" id="set_width" >
         < h2 >Example for Function directives< /h2 >
         < p >SASS stands for Syntactically Awesome Stylesheet. < /p >
      < /div >
   < /body >
< /html >

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

style.scss
$first-width: 5px;
$second-width: 5px;
@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}
#set_width { padding-left: adjust_width(10); }

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

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

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

style.css
#set_width {
   padding-left: 95px; 
}

خروجی

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

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

همان طور که می بینید، از سمت چپ به محتوای صفحه padding اعمال شده است/ left-paddingاعمال می شود.