آموزش Sass قسمت چهارم

1395/2/31 کارن رهنمون 3491

در این جلسه :
با Directive ها در سس آشنا میشویم
با ساختار شرطی if و else در سس آشنا میشویم
با حلقه ها آشنا میشویم
و با یک دیتا استراکچر یا یک ساختمان داده ی حدید در سس آشنا خواهیم شد

و همچنین موارد دیگر که مورد بررسی قرار خواهند گرفت.

خب اولین مبحثمون توابع هستن

توابع :

توابع در سس نقشی همانند Mixin ها رو بازی میکنند که در جلسه ی قبل ما دیدیم
البته یک سری مزیت هایی به نصبت میکس این ها دارند
مثلا با کمک توابع شما میتوانید ساختار منطقی ای رو بر روی کد تون پیاده کنید
منظور از ساختار منطقی این است که بتوانید با کمک شرط ها و چیز های دیگر داده های ورودی (پارامتر هایی که به تابع داده می شود) را کتنرل کنید

حال بیایید یک تابع ساده تعریف کنیم که به کمک آن دو عدد رو با هم جمع کنیم
ممکنه این دو عدد در واحد پیکسل باشند , درصدی باشند , یا در هر واحد دیگه باشند ولی سس خودش کار ها را برایمان درست میکند

@function myfirstfunction($first_num,$second_num){
@return $first_num + $second_num;
}

برای اجرا کردن و یا به عبارتی صدا زدن این تابع بایستی به صورت زیر عمل کنیم
به طور مثال من میخواهم width یک div را با کمک این تابع تعیین کنم:

 

div{
width: myfirstfunction(300px, 500px);
}

حال اگر کدمان را با کمک watcher سس اینترپرت کنیم (با دستور sass —watch ) نتیجه ی نهایی به صورت زیر خواهد بود :
 

div{
width: 800px;
}

بک سری نکاتی درباره ی Function ها :
*قوانین فرستادن پارامتر به توابع مانند Mixin ها است
(یاد آوری : پارامتر ها داده هایی هستند که به توابع یا میکس این ها داده میشوند)
نام گذاری توابع نمیتواند دارای Space باشد (در صورت استفاده اینترپرتر سس خطا میگیرد)

 ساختار شرطی if  و else :

به کمک این ساختار شما میتوانید شروطی برای اجرا شدن کد تعیین کنید (مانند سایر زبان های برنامه نویسی و اسکریپت نویسی )
ساختار این Directive به صورت زیر است :

@if condition {
/* Your Code Goes Here ... */
}


همچنین اگز بخواهید حالتی تعریف کنید که در صورت درست نبودن شرط کد دیگری احرا شود از @else استفاده میکنیم :
 

@if condition {
/* Your Code Goes Here ... */
}
@else {
/* If the Condition Wasn't True This Code Shall be Applied*/
}


بگذارید یک مثال عملی را بررسی کنیم
فرض کنید به شما گفته شده است که وبسایتی با دو تم مختلف دارک و لایت (تیره و روشن) طراحی کنید خب مثلما شما یا دو تا استایل شیت کاملا متفاوت یکی برای تیره یکی روشن طراحی میکنید یا یک کار آسان تر میکنید
یک متغییر در Partial اصلی مان تعریف میکنیم
$theme : dark ;
برای الان تم مان تیره تنظیم شده است.
در ادامه  فرض کنید برای Header میخواهیم حالتی ترتیب دهیم که در صورت تیره بودن تم رنگ بکگراندش #333 و در صورت روشن بودن تم بکگراندش #eee شود :

header{
@if $theme == dark {
background-color:#333;
}
@else{
background-color: #eee;
}
}


به همین سادگی ....
به جای دویست خط کد تو چند خط کد تمام کار هایمان را کردیم (استفاده از آرایه مبالغه :دی )

در سس همانند سایر زبان های برنامه نویسی و اسکریپت نویسی عملگر های مختلفی وجود دارند
( == ) Equal To برابر است با
( != ) Not Equal To برابر نیست با
( > ) Greater Than بزرگتر از
( >= ) Greater Than Or Equal To بزرگتر یا مساوی با
( < ) Less Than کوچکتر از
( < ) Less Than Or Equal To کوچکتر یا مساوی با
* چهار مورد آخر تنها در مورد اعداد و ابعاد صحیح هستند و در مورد رشته ها کار نمیکنند (سلام بزرگتر از خداحافظ ؟؟؟؟ )


علاوه بر if و else ساختار دیگری به نام else if وجود دارد که مانند else عمل میکند اما تنها در صورتی اعمال میشود که شرطی که برای خود این else if تعریف شده است نیز درست باشد :
 

header{
@if $theme == dark {
background-color:#333;
}
@else if $theme == green{
background-color: #252;
}
@else{
background-color: #eee;
}
}

قبل از این که به سراغ حلقه ها برویم ابتدا شما را با ساخمان داده ی جدیدی به نام لیست ها آشنا میکنم

لیست ها :

لیست ها به ما کمک میکنند که مجموعه ای از داده را تنها در یک متغییر قرار دهیم :
به طور مثال من میخواهم یک لیست از میوه ها درست کنم :
$fruits : banana apple orange;
این لیست حال سه عضو دارد.
با کمک حلقه ها که درس بعدی ما هستند میبینیم که چگونه میتوان با این لیست ها کار کرد

each:


خلقه ی each همانند حلقه ی foreach در سایر زبان های برنامه نویسی و اسکریپت نویسی است .
به کمک این حلقه شما می توانید در طول لیست ها پیمایش کنید و با اعضای آن کار کنید
ساختار یک حلقه ی @each به صورت زیر است :( از لیست میوه ها در بخش لیست ها استفاده کردیم )

@each $fruit in $fruits {
.fruit-#{$fruit} {
background-image: url (#{$fruit}.png);
}
}


*در اینحا $fruit به ترتیب از اول لیست بالا میرود و $fruits همان خود لیست است

مورد دیگری که شاید در این کد به نظر شما تازه بیاید #{$fruit} است
این ساحتار کد امکان جایگزاری متغییر در میان یک متن را میدهد

 

#{$varible}

حلقه For:

خب میرسیم به حلقه ی for  
حلقه ی for بر خلاف each بیشتر بر حسب اعداد است
برای ایجاد یک حلقه ی فور به صورت زیر عمل میکنیم :

@for $i from 1 through 100 {
.user-#{$i} {
background-image: url (#{$i}.png);
}
}


خب بیایید به بررسی کدمون بپردازیم :
ابتدا با @for حلقه را شروع میکنیم
اولین چیز بعد از حلقه متغییری هست که در حلقه بر آن تغییر ایجاد میشود
سپس مینویسیم from  و مقدار شروع را وارد میکنیم
سپس through و مقدار پایان را وارد میکنیم
این حلقه 100 تا کلاس برای کاربران میسازد و برای هر کاربر بکگراند خودش را فرا خوانی میکند


نتیحه :

.user-1{
background-image: url(1.png);
}
.user-2{
background-image: url(2.png);
}
.user-3{
background-image: url(3.png);
}
.user-4{
background-image: url(4.png);
}
.
.
.
.
.
.
.user-100{
background-image: url(100.png);
}


این کار بیخودی هست که بخواهید برای هر یوزر این کار رو بکنید :دی
صرفا برای مثال استفاده کردم.

حلقه While:

تقاوت اساسی که حلقه ی while با for داره اینه که ایندکس اش (یا متغییری که حلقه رویش تاثیر وارد میکند ) را بایستی دستی تغییر دهیم
ساحتار حلقه while به صورت زیر است :

$i : 1;
@while $i <= 5{
.user-#{$i} {
background-image: url (#{$i}.png);
}
}


دقت کنید تا زمانی که شرط بر قرار باشد while فعالیت خود را تکرار میکند
برای این که شرط پس از 5 باز تمام شود و حلقه به پایان برسد بایستی به صورت دستی مقدار $i را افزایش دهیم:

$i : 1;
@while $i <= 5{
.user-#{$i} {
background-image: url (#{$i}.png);
$i : $i + 1;
}


نتیجه ی این کد هم به صورت زیر است :
 

.user-1{
background-image: url(1.png);
}
.user-2{
background-image: url(2.png);
}
.user-3{
background-image: url(3.png);
}
.user-4{
background-image: url(4.png);
}
.user-5{
background-image: url(5.png);
}


با به پایان رسیدن این حلقه آموزش ما هم به پایان رسید
امیدوارم از این جلسه رضایت کامل را داشته باشید

کلمات کلیدی