آموزش Sass قسمت پنجم
با عرض سلام و خسته نباشید خدمت دوستان گرامی رهنمون هستم و با پنجمین جلسه از سری آموزش Sass در خدمت شما دوستان عزیز هستم.
در این حلسه خواهیم دید:
*عملگر های ریاضی در Sass
*توابع کار با رنگ در Sass
خب در اولین بخش از این جلسه اول با عملگر های عددی آشنا میشویم
شاید در طول این دوره خیلی اوقات با همین عملگر ها کار کرده باشیم ولی بهتر است به طور دقیق تر به این عملگر ها یک نگاهی داشته باشیم:
+ حمع
- تفریق
* ضرب
/ تقسیم
% باقی مانده
نکته: Sass در عملیات های ریاضی با اعداد اعشاری تنها تا 5 رقم را برمی گرداند.
تمامی اعداد حاضز دز غملیات های ریاضی در سس میتوانند پسوند داشته باشند:
مثلا به تکه کد زیر دقت کتید:
height: 250px / 2;
در این کد ارتفاع شی ما 250 / 2 یا همان 125px خواهد شد.
شما مجازید از این پسوند ها در تمامی عملیات های ریاضی استفاده کنید.
از عملگر + علاوه بر جمع در اعداد میتوان در اضافه کردن دو رشته با یکدیگر نیز استفاده کرد:
font-family: "Helvetica " + "Neue";
حال سوالی که برایمان پیش می آید این است:
اگر ما از سس درخواست جمع دو عدد یکی با واحد px و دیگری با واحد pt را بدهیم سس به ما چه حوابی میدهد؟
مثال :
h2{
width: 10px + 4pt;
}
اگر این کد را کامپایل کنیم به نتیجه ی زیر می رسیم:
h2{
width: 15.3333px
}
به لطف سس ما میتوانیم از دو عدد با واحد های متفاوت در سس استفاده کنیم تنها کافیست به سس اجازه دهیم متغییر دوم یا متغییر ی که در سمت راست است را به اولین متغییر در سمت چپ تبدیل واخد کتد.
توابع ریاضی:
سس در خودش یک سری توابع ریاضی از پیش تعریف شده ای دارد
این توابع عبارتند از:
1. Round:
عدد داده شده به عنوان پارامتر را به نزدیک ترین عدد بدون اعشار گرد میکند:
font-size: round(23.545px); /*===>24px*/
2.Floor:
عدد داده شده به عنوان پارامتر را قطع میکند. (بدون اعشار)
font-size: floor(23.2424px); /*==> 23px*/
3. Ceil:
برعکس قطع کردن عمل میکند یعنی به عدد بالاتر از خودش قطع میکند (با گرد کردن متفاوت است)(بدون اعشار)
font-size: ceil(24.3px); /*===> 25px*/
4. Min
این تابع همون طور که از اسمش هم پیداست مینیمام با کوچک ترین عدد را از میان یک لیست بر می گرداند:
$list: 1px 5px 30px;
font-size: min($list);/*==>1px*/
5.Max
بزرگ ترین عدد موجود در یک لیست را نمایش میدهد:
$list: 1px 5px 30px;
font-size: max($list);/*==>30px*/
6.Percentage:
درصد گیری میکند:
width: percentage(250px / 1000px);/*==> 25%*/;
حب به بخش جالب سس رسیدیم.
اولین موردی که میخواهیم در بارش بحث کنیم عملیات ریاضی روی رنگ هاست
شما با سس میتوانید رنگ ها را با هم جمع یا تفریق کنید
مثال:
$color: #333333;
background-color: $color + #443355; /*===>#776688;*/
تفربق هم همین طور است.
اما برای ضرب و تقسیم عددی که رنگ ما در آن ضرب می شود بایستی بدون هر گونه واحدی باشد:
background-color:$color * 2;/*===> #666666;*/
Rgba :
همون طور که میدونید در css برای استفاده از rgba شما باید مقدار عددی سه رنگ قرمز آبی و سبز یک رنگ هگرا (مثلا#333) رو بدونید مثلا برای همین رنگ #333 معادل rgb اش برابر 51 و 51 و51 است
به کمک سس یک روش آسان تری برای استفاده از rgba به وجود آمده است:
background: rgba (#333,0.8);
Lighten:
این تابغ به ما امکان روشن تر کردن رنگ را میدهد
این تابع دو آرگومان میگیرد:
1. کد هگزای رنگ
2. درصد روشن کردن رنگ
مثال:
$color: #333;
background-color: lighten($color,20%); /*===>#666*/
Darken:
دقیقا کاری برعکس lighten اتجام میدهد بعنی تیره تر میکند:
آرگومان های این تابع هم مانند تابع Lighten است:
$color: #333;
background-color: darken($color,20%); /*===>#000*/
Saturate:
با کمک این تابع شما میتوانید میزان اشباع شدن رنگ را بیشتر کنید:
$color: #87bf64;
background-color: saturate($color,20%); /*===>#82d54e*/
Desaturate:
این تابع برعکس تابع قبلی کار میکند و میزان اشباع شدگی را کم میکند.
$color: #87bf64;
background-color: desaturate($color,20%); /*===>#323130*/
Grayscale:
رنگ را سیاه سقید میکند :)
خب یکم جمله عیر منطقی بود ولی رنگ را به گونه ی به رنج بین سیاه و سقید می برد:
$color: #87bf64;
background-color: grayscale($color); /*===>#929292*/
Invert:
رنگ را Invert میکند ( اگر در فوتوشاپ دیده باشید این کار به گونه ای رنگ را برعکس میکند و رنگ مخالف رنگ می سازد)
$color: #87bf64;
background-color: invert($color); /*===>#78409b*/
نظرات کاربران