‫آشنایی با SASS یا Syntactically Awesome Stylesheets و روش نصب و استفاده از آن

استفاده از CSS علاوه بر جذابیت و قابلیت‌های مفید آن، پیچیدگی هایی دارد و کدهای شما معمولا طولانی می‌شود و هرچه کدها طولانی‌تر شوند، مدیریت آن نیز سخت‌تر می‌گردد. اما با استفاده از SASS، قابلیت هایی به Cssاضافه می‌شود که قبلا وجود نداشت، از جمله استفاده از varibleها، نوشتن کدهای تو در تو (nesting)و … . با استفاده از SASS کدهای CSSکوتاه‌تر شده و در نتیجه سریعتر اجرا شوند. SASS   با CSS3 سازگار است. همچنین امکان مشاهده فایلهای آن (با پسوند .scss)توسط افزونه Firesass For Firebugوجود دارد.

دو syntax برای SASS وجود دارد: یکی SCSS(Sassy CSS)که شکل توسعه یافته CSS3 می باشدو دیگری که قدیمی‌تر است، Indented syntaxمی‌باشد که در آن به جای استفاده از براکت، از تورفتگی خطهای کد استفاده می‌شود و همچنین از به جای استفاده از سمی کولن ، باید به خط جدید بروید.

قابلیتهای موجود در SASS:

1- Variables

متغیرها امکان ایجاد تغییرات در کدهای CSSرا بسیار راحتتر می‌سازند. به عنوان مثال یک متغیر برای یک کد رنگ دلخواه تعریف می‌کنید، از این به بعد به جای استفاده از کد رنگ در کدهای CSS، از متغیر تعریف شده  برای آن بهره می‌گیرید، به این ترتیب ، چنانچه در آینده نیاز به تغییر این کد رنگ داشته باشید، تنها با تغییر آن در متغیر ، در کل فایل CSS تغییر ایجاد خواهد شد.برای تعریف متغیر ، در ابتدای اسم دلخواه خود از علامت $استفاده کنید:

$myColor:   #ff0000;
body {
    color: $myColor;
}
.box{
Border-color:$myColor;
}

می توانید selector‌ها را مانند کدهای htmlبه صورت hirearchyتعریف کنید:

nav {
     ul {
          list-style: none;
         }
      li { display: inline-block; }
      a {
          text-decoration: none;
         }
}

nav ul {
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
}

می توانید قطعاتی از کدهای CSS را به صورت Partial SASS تعریف کنید و سپس آن را در فایلهای SASS دیگر استفاده نمایید.همانند Partialviewدر MVC، هنگام نام گذاری آن از _ در ابتدای نام استفاده نمایید. فایل partial SASSدارای پسوند   .SCSSمی باشد : " "_myPartial.scss

برای استفاده از _myPartial.scssدر فایل sassدیگر ، از دایرکتیو @importاستفاده کنید:

@import "myPartial"

@import "mypartial1","myPartial2"

/*_myPartial1.scss  codes…*/
html,body,ul,ol {
  margin:  0;
  padding: 0;
}
 
/*_myPartial2.scss  codes…*/
 
@import "myPartial1"
 
body, {
 background-color: #efefef;
}

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  background-color: #efefef;
  }

4- Mixins :

از آنجایی که استفاده و نوشتن بعضی property‌های CSSسخت می‌باشد، می‌توانید از روش mixinاستفاده کرده و قطعه کدهایی را ایجاد کنید که بتوانید در کدهایتان از آنها بارها و بارها استفاده کنید. به عنوان مثال قطع کدی برای border-radiusایجاد کنید ، (همانطور که میدانیدborder-radiusبرای مرورگرهای مختلف ، حالتهای مختلفی تعریف می‌شود.). برای ایجاد mixin، در ابتدای قطع کد از @mixinاستفاده نمایید و برای استفاده ازآن ، از @includeاستفاده نمایید: 

@mixin cssProperty $yourCustomName{
…
Your css properties…
}

ایجاد mixin:

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

استفاده از mixin:

.box { @include border-radius(10px); }

Extend/Inheritance -5:

@XETENDبه شما این امکان را می‌دهد تا بخشی از Property‌های یک selectorرا برای استفاده در selector‌های دیگر به اشتراک بگذارید:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}

کدها بعد از تولید شدن به صورت زیر دیده می‌شوند:

.message, .success {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
 .success {
  border-color: green;
}

می توانید از عملگرهای ضرب و تقسیم و جمع و تفریق در کدهای CSS خود استفاده نمایید:

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

حال که باSASSآشنا شدید ، انگیزه کافی برای دانستن روش نصب و استفاده آن خواهید داشت. برای استفاده ازSASS می توانید از نرم افزارهایی که برای ویندوز ، مک و لینوکس وجود دارند، استفاده کنید از جمله این نرم افزارها :

CodeKit , Compass.app ,Hammer , Koala, LiveReload , Mixture ,Prepros , Prepros Pro,Scout

روش دیگر استفاده از command lineمی‌باشد:

چنانچه سیستم عامل شما ویندوز می‌باشد، برای استفاده از sassابتدا باید rubbyرا نصب نمایید. سپس در Cmdخط زیر را اجرا کنید:

gem install sass

چنانچه به خطایی برخوردید، ابتدا gemتوسط sudoرا نصب کنید:

sudo gem install sass

 سپس توسط خط زیر چک کنید که SASSنصب شده است یا خیر:

sass -v

Sass 3.2.12 (Media Mark)

برای کسب اطلاعات بیشتر و روش نصب در سایر سیستم عاملها به این  لینکمراجعه نمایید.

SassScript :

فایل SASSاسکریپتی برای اجرای یک سری از فانکشنها دارد، از جمله :

- rgb($red, $green, $blue)   /* برای ایجاد کد رنگ rgb */

برای مشاهده لیست کامل این فانکشنها به این لینکمراجعه کنید.