sass چیست و چگونه کار میکند

یک زبان کامپایلری که کارش تولید کد های css است.این زبان دو syntax دارد که یکی از آن ها scss هست که خیلی شبیه به css است که من این دستخط و یادگرفتم. برای استفاده از این زبان از ویرایشگر vscode استفاده می کنم و باید کامپایلر و افزونه های مخصوص به خودش روی vs code نصب کنید. برای کامپایل کردن کد ها به فایل های سی اس اس بدون نوشتن دستور در ترمینال ما از این کد استفاده می کنیم .کد زیر را در Terminal ویژوال استودیو کد بزنید.

sass --watch sassFolderName:cssFolderName

نام sassFolderName پوشه ایست که فایل های sass در آن قرار دارد و cssFolderName نام پوشه ایست که فایل های css در آن ایجاد و ویرایش میشوند.

با استفاده از دستور بالا هر فایل sass در پوشه ایجاد یا ویرایش کنید بلافاصله تغییر ایجاد شده به طور خودکار در پوشه موردنظر ایجاد میشود.

کامنت گذاری

در فایل های sass مانند سی شارپ می باشد // تک خطی و /**/ چند خطی.

متغیرها

با علامت $ شروع شده و از قوانین نامگذاری متغیرها در سی شارپ پیروی می کند.

$varname : value; 

مثال تعریف

$color-dark: #777 !default;

استفاده:

.btn {
 border: 0;
 color: $color-dark;
 margin: .2em .3em .2em 0;
 padding: 12px 30px 14px;
}

هر جا که متغیر قرار بگیرند  مقدار متغییر ، در آن کد قرار می گیرد.

نگهدارنده placeholder

مانند متغیرها می باشد و با علامت % شروع می شود با این تفاوت که توانایی نگهداری  یک بلاک کد را در خود دارد.

%placeholder-name {
...
}

مثال تعریف

%shared-font-size {
 font-size: 14px;
}

استفاده:

input, textarea {
 @extend %shared-font-size;
 border: 1px solid $c-grey; //$c-grey متغییر هستند
 padding: 8px;

 &:focus {
 border-color: $c-focus; //$c-focus متغییر هستند
  }
}

همانطور که می بینید برای استفاده از نگهدارنده باید از دستور extend استفاده شود( دستورات-directive ها با علامت@ مشخص می‌شوند که بعدا بیشتر در مورد آن می گویم) .

ساختار کلی استفاده از placeholder ها:

@extend %placeholder-name;

دستور مخلوط @mixin

این دستور مانند %placeholder را می باشد با این تفاوت که امکانات بیشتری به ما می دهد .

تعریف در حالت ساده:

@mixin name {...}

تعریف با پارامتر های ورودی

@mixin name($parameterOne:defaultValueOne,...,$parameterN:defaultValueN) {...}

و ساختار استفاده:

@include mixin-name ($p1,...,$pN);

همانطور که متوجه شدید پارمتر های ورودی متغیر هستند و آنچنانکه دیدید برای استفاده از mixin از دستور @include استفاده میشود.

@mixin img-responsive($display: block) {
 display: $display;
 max-width: 100%; // Part 1: Set a maximum relative to the parent
 height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

استفاده

// image resposive
img {
 @include img-responsive;
 vertical-align: middle;
}

البته حالت پیشرفته تری هم وجود دارد که در هنگام تعریف mixin می توانیم از دستور @content استفاده کنیم با این کارمیتوانیم هنگام استفاده از دستور @include در بلاک {} آن محتوای خودمان را قرار بدهیم.

تعریف

@mixin name  {
@content
}

استفاده

@include name {
color:red; // instead @content
}

عملگرها operators

عملگرهای * / + - هستند که روی مقادیر (value ها) کاربرد دارند.

مثلا

$font-size :20px; // variable

font-size:$font-size *2;

حتی روی رنگها هم عمل میکنند.

دستور گسترش @extend

که در استفاده از %placeholder نیز به کاربردیم ،و کاربرد آن جلوگیری از نوشتن کدهای تکراری می باشد این صورت که می توانیم کد هایمان را در هر جایی که میخواهیم جایگذاری کنیم. دقیقا همان کاری که در %placeholder انجام دادیم.(یکجورایی مانند public کردن متد در سی شارپ).

.message{
padding:10px;
color:#fff;
}

.info{
@extend .message;
border(1px solid #ccc);
}

موقع کامپایل شدن کد به css

.message,.info{
padding:10px;
color:#fff;
}
.info{
border(1px solid #ccc);
}

توابع @function

مانند متدها در سی شارپ و باید 2 دستور را در خود داشته باشند @function و @return

@function name ($param:defaultvalue){
@return ...
}

دستورات شرطی

@if(شرط){} , @else{} , @else if{}

هیچی نگم بهتره.

آرایه Array

هر آرایه با ( شروع شده و با ) پایان می یابد.فرض کنید ما 5 متغییر رنگ داریم.

$light-grey: #999;
$grey: #666;
$dark-grey: #333;
$pink: #ff69b4;
$blue: #0000ff;

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

برای تبدیل کردن:

 $colors: (  
  grey: (     dark: #444,     base: #666,     light: #999   ), 
    brand: (     pink: #ff69b4,     blue: #0000ff   ) 
    ) 

ساختار کلی آرایه ها:

$varName:(  // $varName is array
arrayname: (key:value,...,keyN:valueN),
arraynameN: (key:value,...,keyN:valueN)
)

حلقه های تکرار

@for , @each , @while

حلقه for

@for $i from 1 through 3{
$i // is value
}

متغیر $i مقدار عددی است که از from شروع میشود و تا through ادامه می یابد. بدین ترتیب کد بالا مقدار عددی 1 2 3 تولید میکند. برای استفاده از $i در نام المان (رشته) باید به رشته تبدیل شود که این کار توسط دستور

 #{$i} 

انجام میشود. مثلا

@for $i from 1 through 20 {
.item-#{$i}{ //string
    with: 100 *$i;  // value 
   }
}

حلقه while

@while(شرط){
...
}

مثلا

@while($i < 10){
...
}

حلقه each

ساختارکلی

@each $i in array {
...
}

ساده

@each $i in 1,2,3,4{
...
}

یا

@each $course,$color in (js,yellow),(laravel,red){
.#{course}-icon{
  color:$color
 }
}

یا

@each $header,$size in (h1:2em,h2:1.5em){
#{$header}{
 font-size:$size
 }
}

بخشبندی فایل های sass

اگر کد ها را امتحان کرده باشین بخشی از کدها کد css ای تولید نمی کند و فایل ایجاد شده خالی می باشد. و نیازی به تولید فایل css متناظر آن نمی باشد . و یا برای تمیزتر کدنویسی فایل های جدا برای متغیرها ، فایلی برای mixin ها ، فایلی برای تابع ها و ... نیاز داشته باشیم که نیازی به فایلهای متناظر ندارند و کافیه همه آنها در یک فایل css به عنوان فایل نهایی درست کنیم.

مثلا فایل variable که تمام متغییر هایمان در آن قرار دارد:

variable.scss

$font1 : Tahoma , sans-serif;
$font2 : "Times New Roman";

$font_size : 20px;

$color1 : #5C5470;
$color2 : #5ace46;

$grid-width : 40px;
$gutter-width : 10px;

اگر پوشه css ببینید یک فایل خالی با همین نام وجود دارد چه خوب میشد اگر میتوانیم از ساخت چنین فایل های بیهوده css جلوگیری کنیم.خوب برای اینکار کافه به اول اسم فایل یک "_" اضافه کنیم !

_variable.scss

با اضافه کردن "_" به اول نام فایل به کامپایلر می فهمانیم که نیازی به ساخت فایل css متناظر نیست!

پس:

_mixin.scss

@mixin border($border) {
 -webkit-border : $border;
 -moz-border : $border;
 -ms-border : $border;
 border: $border;
}

@mixin background-image($url , $repeat : repeat, $position : auto auto) {
 background-image: url($url);
 background-repeat: $repeat ;
 background-position: $position;
}

$L : 1200px;
$M : 992px;
$S : 768px;

@mixin MediaQuery($canvas) {
 @if $canvas == L {
 @media only screen and (max-width: $L) { @content }
  } @else if $canvas == M {
    @media only screen and (max-width: $M) { @content }
  } @else if $canvas == S {
    @media only screen and (max-width: $S) { @content }
  }
}

_function

@function grid-width($n : 12) {
 @return $n * $grid-width + ($n - 1) * $gutter-width ;
}

و برای استفاده هر یک از کد های بالا در فایل دیگری فقط کافیه از دستور

@import "filename"

استفاده کنید تا به محتویات آن صفحه دسترسی داشته باشید.

پس در فایل اصلی با نام style.scss خواهیم داشت:

@import "varible";
@import "mixin";
@import "function";

@each $header , $size in (h1 : 2em , h2 : 1.5em , h3 : 1.2em) {
 #{$header} {
 font-size: $size;
  }
}

و در نهایت یک فایل css به نام style.css خواهیم داشت !

اطالاعات بیشتر و اینجا و گوگل و اینم یک سورس خوب

در آخر هم یادتان باشد که کد مینویسید تا کد تولید کنید !(سخن بزرگان!)