sass یک بار برای همیشه

SASS ، مخفف Syntactically awesome style sheets است. SASS ، قسمتی از Preprocessor دیگر به نام HAML می باشد.HAML توسط توسعه دهندگان Ruby نوشته شده است.از این رو، SASS ، قواعد Ruby را دنبال می کند و برای کامپایل فایل های SASS وCSS باید Ruby روی سیستم شما نصب شود.در نسخه سوم، Syntax آن مانند CSS شد و نام آن هم به Sassy CSS یا SCSS تغییر یافت .

پس شما برای شروع با sass نیاز به برنامه ruby installer یا npm دارید به نظر من npm نصبش راحت تره بعد از دانلود شما cmd رو باید باز کنید و

npm install sass

رو بزنید بعد یه مدت کوتاهی رو سیستم شما sass نصب میشه برای تست هم میتونید تو محیط cmd بنویسید

sass --version

خب اگه درست نصب کرده باشید شما باید ورژن sass برای شما نشون داده میشه . به نظر من تا آخر این مطلب رو بخونید چون خیلی خودمونی خواستم براتون توضیح بدم روال کار چیه !

sass و scss چه فرقی با هم میکنه ؟

داخل sass ما باید تمام قواعد رو رعایت کنیم مثلا ما نباید از {} برای بلاک بندی ها استفاده کنیم ما باید مثل پایتون از indent به جای کروشه استفاده کنیم و سمی کالن ها “; ” حذف میشه و باعث میشه خیلی زیبا تر بشه کد هامون ولی تو scss ما میتونیم هم از سمی و هم از کروشه استفاده کنیم یه نمونه کد فرقشون میشه این :

/* scss */
$color : #fff ;
h1 {
    color : $color ;
}

/* sass */
$color : #fff 
h1 
    color : $color ;

خب برای شروع نیاز دارید یه فایل با فرمت scss. درست کنید و داخل یه فولدر دلخواه قرار بدید همونطوری که بالا گفته شد این فایل باید به فایل css تفسیر شه تا مرورگر بتونه این فایل رو بخونه . پس ما باید cmd رو داخل مسیر فولدری که ساختیم باز کنیم و دستور :

sass style.scss style.css

خب در کد بالا style.scss فایل ما هستش و وقتی کامپایل میشه فایل style.css ساخته میشه ولی ما هر وقت میخواییم باید این کد رو run کنیم ؟ جواب نه هستش ما میتونیم از کد زیر استفاده کنیم و به مفسر بگیم تماشا کن هر وقت تغییری به وجود آمد فایل style.css رو از نو بنویس :

sass --watch style.scss style.css

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

sass --watch folderScss:folderCss

خوب میتونیم watch هم به کد بالا اضافه کنیم و مدیریت رویداد رو فولدر انجام بدیم .

اگه شما این کدهای بالا رو یاد گرفتید میتونید اولین پروژه خودتون رو با scss شروع کنید همونطور که گفته شد scss شبیه یه زبان برنامه نویسی هستش ما توش متغییر , شرط , عملگرها , حلقه , فانکشن ها , yield | void و ایمپورت کردن فایل ها تو هم رو داریم

برای شروع ما باید با متغییر آشنا بشیم :

متغییر ها

متغییر به زبان ساده یک مکان داخل حافظه هستش که دارای یه شناسه هستش وقتی میخواییم از متغییر تو برنامه استفاده کنیم ما فقط لازمه شناسه رو فراخونی کنیم داخل زبان scss ما برای تعریف متغییر از $ (علامت دلار ) استفاده میکنیم مثلا :

$variable : "value"

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

$color : black ; 

h1 { 
    color : $color
}

بعد کامپایل ما تو فایل style.css این رو داریم :

h1 {
  color: black;
}

اینو دقت کنید مثل زبان  (php  یا هر زبانی ) ما نباید black رو داخل دابل کوتیشن “” بزاریم 🙂

عملگرها

ما تو زبان برنامه نویسی عملگرهای حسابی و منطقی آشنا شدیم عملگرهای حسابی مثل “جمع , کم . ضرب و تقسیم ” و عملگرهای منطقی مثل “کوچکتر , بزرگتر , مساوی و … ” ما زمان های خاصی باید باهاشون کار کنیم مثلا :

$size : 10px ;
h1 {
	font-size : 1 + $size ;
}
h2 {
	font-size : 2 + $size ;
}
// compiled file css
h1 {
	font-size: 11px;
}

h2 {
	font-size: 12px;
}

همونطور میبیند ما تو فایل .scss خودمون اومدیم یه مقدار رو با یه متغییر جمع کردیم و تو فایل compile شده خودمون جمعش رو دریافت کردیم .

شرط ها

اگر این برابر این مقدار بود یا مثلا این بزرگتر یا کوچکتر این مقدار بود این کد اجرا بشه ; برای پیاده سازی این عبارت ما نیاز به شرط داریم ما باید از کلمه کلیدی if استفاده کنیم به طور مثال

@if( condition ){
	//statement 
}

ما در condition شرط خودمون رو مینویسیم و در statement بدنه شرط ما هستش وقتی شرط درست بود باید اجرا بشه . بالا در مورد عملگرها یه توضیحی دادم گفتم ما عملگر های شرطی داریم پس ما یه اینطور چیزی میتونیم بنویسیم :

$size : 10 ; 

@if( $size == 10 ){
	h1 {
		font-size : 10px ;
	}
}
// file .css
h1 {
  font-size: 10;
}

تو خط کد بالا وقتی size برابر با ۱۰ بود شرط درسته و بدنه شرط اجرا میشه .

داخل برنامه نویسی ما میتونیم وقتی شرط برقرار نبود کد جایگزین رو اجرا کنیم مثلا :

$size : 10 ; 
@if( $size == 10 ){
	h1 {
		font-size : 10px ;
	}
}
@else {
	h1 {
		font-size: inherit ;
	}
}

همچنین ما میتونیم چندین شروط رو بررسی کنیم و از if else استفاده میکنیم دقت کنید با space جدا شده !

$size : 10 ;
@if( $size == 10 ){
	h1 {
		font-size : 10px ;
	}
}
@else if($size > 10 )
{
	h1 {
		font-size: 12px
	}
}
@else if($size < 10)
{
	h1 {
		font-size: 8px ;
	}
}
@else {
	h1 {
		font-size: inherit ;
	}
}

حلقه ها

وقتی ما تو برنامه نویسی میخواییم یه کد چندین بار ب دفعات تکرار بشه میتونیم از حلقه استفاده کنیم داخل حلقه ما باید با یه condition از شرط خارج شیم تا به حلقه بی نهایت بر نخوریم البته وقتی sass بفهمه کد ما تو حلقه بی نهایت گیر کرده از اجرا خود داری میکنه

حلقه while

@while( condition ){
	statement ;
}

همونطور که داخل کد میبینیم تا زمانی condition درست باشه حلقه و بدنه statement اجرا میشه ولی اگه غلط بود حلقه به پایان میرسه

$i : 1 ;
@while ( $i <= 6 ){
	h#{$i} {
		font-size : 10px + $i  ;
	}
	$i : $i + 1 ; }

خب تو خط کد بالا ما میخواهیم سایز فونت های هدر رو تعیین کنیم برای اینکار ما با یه حلقه تونستیم پیاده کنیم ! در این کد ما یه چیز جدید میبنیم اونم #{$i} که باعث میشه ما به المنت های خودمون رو به صورت داینامیک تعریف کنیم و بسته به مقدار $i رو جایگزین کد #{$i} کنه در خط پایانی ما باید یه مقدار به متغییر i اضافه کنیم تا به حلقه بی نهایت بر نخوریم و زمانی که i برابر ۶ بود از حلقه خارج بشه , خروجی کد بالا :

h1 {font-size: 11px;
}
h2 {
  font-size: 12px;
}
h3 {
  font-size: 13px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 15px;
}
h6 {
  font-size: 16px;
}

حلقه for

تو این روش ساخت حلقه ما میتونیم یه رنج رو بخونیم و نمایش بدیم مثلا ما کد بالا رو با for اینطوری مینویسیم :

@for $i from 1 through 6 {
  h#{$i}{
    font-size : 1px + $i ;
  }
}

در کد بالا ما ۶ رو قرار دادیم تا رنج ۱ تا ۶ رو در نظر بگیره و هر دفعه مقدار را داخل متغییر i بریزه و به ما نمایش بده این یه نمونه از استفاده حلقه for هست

حلقه each

داخل حلقه each ما میتوانیم یه لیست رو بخونیم و parse کنیم همونطور که معماری each رو در زیر میبینید عملا کارش تو لیست ها میباشه :

@each $name in yahoo google telegram {
  img.#{$name}
  {
    background: url("../#{$name}.gif");
  }
}

این داستان ادامه دارد ...