استفاده از 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 */

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