آموزش Sass قسمت سوم

1394/11/2 کارن رهنمون 1620

با عرض سلام و خسته نباشید خدمت دوستان عزیز با جلسه ی سوم آموزش sass در خدمت شما دوستان عزیز هستم
در این جلسه به بررسی نحوه ی extend کردن خواهیم پرداخت و پترن ها یا الگو های تکراری را درون کد های scss خود پیدا کرده و به کمک extend و ارث بری کد های خود را باز اندکی بیشتر کوتاه خواهیم کرد.
خب اولین کاری که میخواهیم انجام بدهیم این است که فایل پروژه ی قبلیمون رو باز کنید.
یک partial را که همان طور که جلسه ی قبل گفتیم بخشی از شیوه نامه ی ما هست که با یک زیرخط یاunderline نمایش داده میشود را باز کنید.
حال در این فایل بیایید دنبال یک سری الگو یا پترن های تکراری بگردیم
یک پترن یا الگوی تکراری تعدای خاصیت است که برای چند المنت یا شی تکرار میشود
به طور مثال فرض کنید یک المنتی با کلاس alert داریم که جهت نمایش دادن پیغام به کاربر به کار میرود

alert{
padding: 30px;
margin:10px;
color:#fff;
}

حال فرض کنیم میخواهیم سه نوع پیغام داشته باشیم (پیام موفقیت آمیز ، پیام خطا ، پیام اطلاعاتی [مثلا برای این که اطلاعاتی در اختیار کاربر بگذارد نه هشدار است نه پیام موفقیت آمیز])

.alert-success{
background-color:#181;
}
.alert-error{
background-color:#f10;
}
.alert-info{
background-color:#07f;
}

حالا میتوانیم برای نمایش دادن پیغام از یک div با دو کلاس alert و alert-success برای نشان دادن یک پیغام موفقیت آمیز استفاده کنیم
اگر فرض کنیم که div ما شامل 7 کلاس باشد این دو تا کلاس هم اضافه کنیم میشود 9 تا!! که خب خیلی زیاد است
برای همین تصمیم میگیریم برای همه ی alert ها تمامی خاصیت های کلاس آلرت را تکرار کنیم. اگر این کار را بکنیم اولا حجم کد ما بالا میرود و خوانایی کد پایین می آید. این جاست که سس به کمک ما می شتابد.
به شکل زیر توجه کنید :


آموزش Saas

همان طور که مشاهده میکنید به کمک placeholder ها میتوانیم یک لیست بلند از خاصیت ها را تنها در یک خط به یک المنت اعمال کنیم
برای شروع بیایید یک partial جدید بسازید و نامش را به صورت زیر بگذارید :
_extends.scss
این partial را باز کنید.
حالا بیایید یک placeholder ایحاد کنیم
یک placeholder نقش یک کپی را بازی میکند که هرگاه نامش را صدا بزنیم تمامی محتویاتش را که در اصل خاصیت های css ای هستند وارد میکند
ساختار ایجاد placeholder به صورت زیر است :

%placeholder{
/*
Your Style goes Here
*/
}


به طور مثال بیایید برای کلاس alert مان یک placeholder ایجاد کنیم

%alert{
padding: 30px;
margin:10px;
color:#fff;
}

قبل از اینکه بتوانیم از این placeholder استفاده کنیم یادتان باشد که به فایل اصلیمان که در پروژه ی جلسه ی قبل نامش style.scss بود و تمامی partial هایمان را در آن جا ایمپورت میکردیم اضافه کنید

@import "extends";

حالا به سوی partial تایپوگرافی که در جلسه ی قبل ایجاد کردیم می رویم و alert-success را با هم درست خواهیم کرد :

.alert-success{
@extend %alert;
background-color:#181;
}


در نهایت، حال دیگر نیاز نیست که کلاس alert را هم به div بیفزاییم چون با کامپایل شدن کد به :

.alert-success{
padding: 30px;
margin:10px;
color:#fff;
background-color:#181;
}


تبدیل میشود شما میتوانید همین کار را روی بقیه نوع پیام ها (error , info ) نیز ایجاد کنید.
همین کد برای info :

.alert-info{
@extend %alert;
background-color:#07f ;
}

و برای error:

.alert-error{
@extend %alert;
background-color:#f10 ;
}

در پایان یه مورد که به صورت bonus این جلسه هست :) رو خدمتتون عرض میکنم.
در سس شما میتوانید به کمک کاراکتر & به خوده کلاس اشاره کنید (مثل this در سایز زبان های برنامه نویسی شی گرا میمونه)
مثال:

h3{
  font-size: 20px;
  margin-bottom: 10px;
}
  &.some-selector{
    font-size: 24px;
    margin-bottom: 20px;
}

که پس از کامپایل شدن به :

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
h3.some-selector {
  font-size: 24px;
  margin-bottom: 20px;
}

تبدیل میشود.
امیدوارم از این جلسه استفاده ی کاملی کرده باشید تا جلسه ی بعدی شما رو به خدای بزرگ می سپارم

دانلود دانلود PDF قسمت سوم آموزش Sass

قسمت بعدی قسمت سوم در حال بارگزاری ست