۲۶
اردیبهشت

جلسه ۱۱ : آموزش دستورالعمل های تابع در Sass

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربران و علاقمندان به دوره آموزش Sass. در جلسه گذشته به طرفداران این دوره آموزش کار با دستور Mixins در Sass ارائه گردید. بر طبق آموخته های جلسه قبل آموختیم که Mixins ها اجازه ایجاد یک گروه از استایل ها را می دهند که بدون نیاز به ایجاد مجدد کلاس های non-semantic در تمام استایل های خود قابل استفاده مجدد هستند.در mixins ،CSS ها می توانند مقادیر متعدد یا پارامترها را ذخیره نمایند و تابع را فراخوانی کنند. اما در این جلسه یعنی یازدهمین جلسه از سری آموزش Sass با آموزش دستورالعمل های تابع در Sass با شما همراه هستیم.

آموزش دستورالعمل های تابع در Sass

در آموزش دستورالعمل های تابع در Sass قرار است که درباره دستورالعمل های تابع مطالبی کاربردی بیاموزیم.
در SASS، می توانید تابع خود را ایجاد کرده و از آنها در متن اسکریپت خود استفاده کنید و یا هر مقداری را که می خواهید برای آن تعیین نماید.
توابع با استفاده از نام تابع و با هر پارامتر دیگری می توانند فراخوانی شوند.

مثال

مثال زیر استفاده از دستور function ( دستور تابع ) در فایل 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>

<html>

<head>

<title>Nested Rules</title>

</head>

<body>

<h2>Example for Function directives</h2>

<p>SASS stands for Syntactically Awesome Stylesheet. </p>

</div>

</body>

</html>

حالا فایل 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); }

$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 بخواهید که فایل CSS را بررسی نماید تا هر وقت که فایل SASS تغییر کرد با استفاده از دستور زیر آن را به روز رسانی نماید.

مثال :

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

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

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

style.css

مثال :

#set_width {
   padding-left: 95px; 
}

#set_width {

padding-left: 95px;

}

اجازه دهید مراحل زیر را انجام دهیم تا ببینیم کدام یک از کدهای بالا کار می کنند.

خروجی

کد داده شده فوق را در فایل hello.html ذخیره کنید.
این فایل HTML را در یک مرورگر باز کنید. تصویری به مانند تصویر زیر به شما نمایش داده خواهد شد.

sass function directives

در خروجی خواهید دید که left-padding اجرا شده است.

درست مانند mixin، تابع هم می تواند به متغیرهای تعریف شده جهانی (globally defined variables) دسترسی داشته باشد و پارامترها را بپذیرد.
بهتر است مقدار بازگردانی شده را از طریق استفاده از return@ فراخوانی نمایید.
می توان تابع SASS-defined را با استفاده از پارامترهای keyword فراخوانی نمود.

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

مثال :

#set_width { padding-left: adjust_width($n: 10); }

1	#set_width { padding-left: adjust_width($n: 10); }

نام گذاری Conventions

برای اجتناب از ایجاد تضاد در نام گذاری توابع بهتر است از پیشوند گذاری آن ها استفاده نماییم.
این امر موجب ایجاد تفاوت بین نام توابع می شود.
مانند arguments ،mixins، های متغیر نیز توسط توابع تعریف شده توسط کاربر پشتیبانی می شوند.
توابع و سایر تعریف کننده های SASS می توانند از زیر خط ها (_) و خط ها (-) به صورت تعویضی استفاده کنند.

برای مثال اگر یک تابع به صورت adjust_width تعریف شده باشد، می تواند به شکل adjust-width نیز به کار رود.

کلام آخر

در این جلسه با آموزش دستورالعمل های تابع در Sass با شما همراه بودیم.
در جلسه بعدی با آموزش استایل های خروجی دوره Sass را ادامه می دهیم.
با پی وی لرن همراه باشید.

Fatal error: Uncaught Error: Call to a member function get_regular_price() on boolean in /home/pvlearni/domains/pvlearn.com/public_html/wp-content/themes/pvlearn/functions.php:392 Stack trace: #0 /home/pvlearni/domains/pvlearn.com/public_html/wp-content/themes/pvlearn/single-product.php(940): onSale() #1 /home/pvlearni/domains/pvlearn.com/public_html/wp-includes/template-loader.php(74): include('/home/pvlearni/...') #2 /home/pvlearni/domains/pvlearn.com/public_html/wp-blog-header.php(19): require_once('/home/pvlearni/...') #3 /home/pvlearni/domains/pvlearn.com/public_html/index.php(17): require('/home/pvlearni/...') #4 {main} thrown in /home/pvlearni/domains/pvlearn.com/public_html/wp-content/themes/pvlearn/functions.php on line 392

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۱ : آموزش دستورالعمل های تابع در Sass

مقدمه

آموزش دستورالعمل های تابع در Sass

مثال

function_directive.htm

style.css

خروجی

نام گذاری Conventions

کلام آخر