توابع و میکسین ها بسیار شبیه به هم هستند به این دلیل که هر دوی انها متغیر ها را به عنوان ورودی قبول می کنند . درادامه این مقاله قصد داریم شما را با این دو مفهوم در sass و نحوه ایجاد، کاربرد و خروجی های تابع و میکسین ها اشنا می کنیم .
در sass به دو روش می توانیم از توابع استفاده کنیم :
1.استفاده از توابع از پیش تعریف شده ی sass
2. استفاده از توابعی که کاربر آنها را تعریف می کند .
برای مشاهده لیست توابع از پیش تعریف شده sass لینک زیر را دنبال کنید .
به عنوان مثال از توابع از پیش تعریف شده ی sass می توان به توابع lighten و Darken اشاره کرد ، که دو پارامتر از شما دریافت می کنند، پارامتر اول کد رنگی مورد نظر و پارامتر دوم درصدی که می خواهید رنگ مورد نظر در پارامتر اول کم رنگ یا پررنگ تر شود .
Body{
Background: lighten (#555, )
10%
}
در تکه کد بالا با فراخوانی تابع lighten کد رنگی مورد نظر ما به درصد مشخص شده کم رنگ تر می شود .
مثالی از کاربرد mixin در sass :
نوشتن بعضی از کدها با css سخت و خسته کننده است . به عنوان مثال نوشتن دستوراتی که نیاز به پیشوند های مرورگر دارند . میکسین این انکان را به شما می دهد که بتوانبید مجموعه ای از دستورات css را در که قرار است در جاهای زیادی استفاده شود را آماده کنید . میکسین می تواند پارامتر ورودی هم قبول کند که در این صورت انعطاف پذیری آن بیشتر می شود . به مثال زیر توجه کنید. در این مثال میکسین پارامتری را به عنوان border-radius قبول می کند و در داخل میکسین مقدار ان را برای پیشوند های مرورگر های مختلف قرار می دهد .
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
همانطور که در مثال بالا دیدید برای ساختن میکسین از کلمه کلیدی @mixin استفاده می کنیم و برای استفاده از میکسین مورد نظر نیز از کلمه @include استفاده می کنیم . اگر تعداد آرگومان های ورودی مشخص نباشد می توانید در زمان تعریف میکسین در قسمت ارگومان ها علامت سه نقطه را استفاده کنید (...) به عنوان مثال :
@mixin box-shadow($shadows...)
به این نکته توجه کنید که میکسین می تواند مقدار ورودی نداشته باشد مثلا همان مثال بالا :
@mixin border-radius {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.box { @include border-radius; }
میکسین زیر آرگومان هایی را به عنوان ورودی قبول می کند و محاسبات لازم را برروی انها انجا می دهد و نتیجه خروجی یعنی css در جایی که دستور @include نوشته می شود قرار خواهد گرفت .
@mixin my-padding-mixin($some-number) {
padding: $some-number;
}
سپس با دستور @include میکسین را با مقدار مشخص فراخوانی می کنیم :
.my-module {
@include my-padding-mixin(10px);
}
و در انتها نیز css نهایی در کلاس .my-module قرار خواهد گرفت .
.my-module {
padding: 10px;
}
کاربرد تابع یا function در sass :
یک تابع بسیار شبیه به میکسین است ، خروجی یک function می تواند یک مقدار مشخص باشد . این مقدار می تواند عدد، رشته ، رنگ ، مقدار بولین و یا لیست باشد.
مثال زبر تابعی است که دو مقدار را به عنوان پارامتر ورودی از کاربر دریافت می کند و حاصل جمع این دو عدد را به عنوان خروجی کار برمی گرداند .
@function my-calculation-function($some-number, $another-number){
@return $some-number $another-number
}
در مد زیر نیز تابع بالا را فراخوانی می کنیم و ازآن استفاده می کنیم . نتیجه خروجی نیز در همان جایی که تابع فراخوانی شده است قرار می گیرد .
.my-module {
padding: my-calculation-function(10px, 5px);
}
نتیجه خروجی بعد از کامپایل :
.my-module {
padding: 15px;
}
شاید شما با قاعده DRY یا همان Don’t Repeat Yourself آشنایی داشته باشید. این قاعده می گوید که در برنامه نویسی و طراحی سایتها نباید هیچ چیز را تکرار کرد . هدف از ارائه sass نیز به همین دلیل بوده است تاجلوی تکرار برخی از دستورات در css را بگیرد و حجم کد های css به خصوص در پروژه های طراحی سایت راکاهش دهد . استفاده از توابع ، وراثت و... در sass برای این است که نوشتن استایل ها در css را برای طراحان وب سایت ها آسان تر و جذاب تر کند .
منبع: طراحی فروشگاه اینترنتی
در sass به دو روش می توانیم از توابع استفاده کنیم :
1.استفاده از توابع از پیش تعریف شده ی sass
2. استفاده از توابعی که کاربر آنها را تعریف می کند .
برای مشاهده لیست توابع از پیش تعریف شده sass لینک زیر را دنبال کنید .
به عنوان مثال از توابع از پیش تعریف شده ی sass می توان به توابع lighten و Darken اشاره کرد ، که دو پارامتر از شما دریافت می کنند، پارامتر اول کد رنگی مورد نظر و پارامتر دوم درصدی که می خواهید رنگ مورد نظر در پارامتر اول کم رنگ یا پررنگ تر شود .
Body{
Background: lighten (#555, )
10%
}
در تکه کد بالا با فراخوانی تابع lighten کد رنگی مورد نظر ما به درصد مشخص شده کم رنگ تر می شود .
مثالی از کاربرد mixin در sass :
نوشتن بعضی از کدها با css سخت و خسته کننده است . به عنوان مثال نوشتن دستوراتی که نیاز به پیشوند های مرورگر دارند . میکسین این انکان را به شما می دهد که بتوانبید مجموعه ای از دستورات css را در که قرار است در جاهای زیادی استفاده شود را آماده کنید . میکسین می تواند پارامتر ورودی هم قبول کند که در این صورت انعطاف پذیری آن بیشتر می شود . به مثال زیر توجه کنید. در این مثال میکسین پارامتری را به عنوان border-radius قبول می کند و در داخل میکسین مقدار ان را برای پیشوند های مرورگر های مختلف قرار می دهد .
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
همانطور که در مثال بالا دیدید برای ساختن میکسین از کلمه کلیدی @mixin استفاده می کنیم و برای استفاده از میکسین مورد نظر نیز از کلمه @include استفاده می کنیم . اگر تعداد آرگومان های ورودی مشخص نباشد می توانید در زمان تعریف میکسین در قسمت ارگومان ها علامت سه نقطه را استفاده کنید (...) به عنوان مثال :
@mixin box-shadow($shadows...)
به این نکته توجه کنید که میکسین می تواند مقدار ورودی نداشته باشد مثلا همان مثال بالا :
@mixin border-radius {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.box { @include border-radius; }
میکسین زیر آرگومان هایی را به عنوان ورودی قبول می کند و محاسبات لازم را برروی انها انجا می دهد و نتیجه خروجی یعنی css در جایی که دستور @include نوشته می شود قرار خواهد گرفت .
@mixin my-padding-mixin($some-number) {
padding: $some-number;
}
سپس با دستور @include میکسین را با مقدار مشخص فراخوانی می کنیم :
.my-module {
@include my-padding-mixin(10px);
}
و در انتها نیز css نهایی در کلاس .my-module قرار خواهد گرفت .
.my-module {
padding: 10px;
}
کاربرد تابع یا function در sass :
یک تابع بسیار شبیه به میکسین است ، خروجی یک function می تواند یک مقدار مشخص باشد . این مقدار می تواند عدد، رشته ، رنگ ، مقدار بولین و یا لیست باشد.
مثال زبر تابعی است که دو مقدار را به عنوان پارامتر ورودی از کاربر دریافت می کند و حاصل جمع این دو عدد را به عنوان خروجی کار برمی گرداند .
@function my-calculation-function($some-number, $another-number){
@return $some-number $another-number
}
در مد زیر نیز تابع بالا را فراخوانی می کنیم و ازآن استفاده می کنیم . نتیجه خروجی نیز در همان جایی که تابع فراخوانی شده است قرار می گیرد .
.my-module {
padding: my-calculation-function(10px, 5px);
}
نتیجه خروجی بعد از کامپایل :
.my-module {
padding: 15px;
}
شاید شما با قاعده DRY یا همان Don’t Repeat Yourself آشنایی داشته باشید. این قاعده می گوید که در برنامه نویسی و طراحی سایتها نباید هیچ چیز را تکرار کرد . هدف از ارائه sass نیز به همین دلیل بوده است تاجلوی تکرار برخی از دستورات در css را بگیرد و حجم کد های css به خصوص در پروژه های طراحی سایت راکاهش دهد . استفاده از توابع ، وراثت و... در sass برای این است که نوشتن استایل ها در css را برای طراحان وب سایت ها آسان تر و جذاب تر کند .
منبع: طراحی فروشگاه اینترنتی
