Sass مخفف syntactically awesome stylesheet است که یک زبان اسکریپت نویسی است که به css تفسیر میشود و  دارای دو syntax است . در syntax اول که قدیمی تر است و به عنوان sass شناخته شده است از فرورفتگی ها برای نشان دادن بلاک مخصوص خصوصیات سلکتور انتخاب شده استفاده می کنیم و برای نشان دادن خط جدید از ; استفاده نمی شود بلکه از خط جدید تنها برای نشان دادن خط جدید استفاده می شود .

 Syntax بعدی نیز که به scss شناخته شده است نیز مانند همان css  عادی است یعنی دقیقا آکولاد ها و ; به همان صورت که در css عادی است  استفاده می شود.

Sass این امکان را به کاربران می دهد که بتوانند از ویژگی های  تابع و ... عملکرد و متغیر در کد های css استفاده کنیم. با این کار نوشتن کدهای css بسیار راحت تر و سریع تر می شود .

استفاده از متغیرها در sass

امکان تعریف متغیرها در sass یکی از ویژگی های بسیار خوب و کاربردی است که حجم کدهای css را کاهش می دهد. فرض کنید تکه کدی است که در قسمت های مختلفی از css شما تکرار می شود در این صورت می توانید آن را به صورت متغیری تعریف کنید و در جاهای مختلف تنها  از نام  آن متغیر استفاده کنید . بدین صورت می توانید در صورت نیاز مقدار ان متغیر را نیز به راحتی تغییر دهید و تغییر و بروز رسانی کدها در این صورت بسیار راحت تر می شود. به عنوان مثال می توانید نام رنگی را  که در قسمت های مختلفی از وب سایت خود استفاده می کنید  را در داخل متغیر قرار دهید و به راحتی از این نام در قسمت های مختلف کدهای css خود استفاده کنید.

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

مثال شماره یک از تعریف متغیر با سینتکسscss

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

  font : 100% $font-stack;

  color : $primary-color;

}

مثال بالا با استفاده از سینتکس sass

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

  font: 100% $font-stack

  color: $primary-color

بعد از پردازش sass ، مقادیر تعریف شده برای متغیرها  در css قرار می گیرد و در نهایت خروجی css تولید می شود .

قبل از شروع به کار با sass  باید syntax مورد نظر خود برای نوشتن کدها را انتخاب کنید. اگر می خواهید با sass syntax کدهای خود را بنویسید پس فایلی با این پسوند ایجاد کنید و کدهای خود را در داخل آن بنویسید و در صورتی هم که می خواهید کدهای خود را با scss syntax بنویسید پس فایل های خود را در داخل فایلی با همین پسوند بنویسید. برای پیوست کردن فایل های خود به صفحه نیز باید از برنامه هایی استفاده کنید که فایل های شما را کامپایل و به فایل Css تبدیل کنند. می توانید از برنامه هایی مانند koala استفاده کنید.

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

فرض کنید کدهای Html زیر را داریم و می خواهیم به آنها استایل دهیم :

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

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li { display: inline-block; }

}

که این کد نهایتا بعد از کامپایل به شکل ساده زیر در می آید :

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li { display: inline-block; }

}

استفاده از $ در کدهای sass

اگر از این علامت در استایل استفاده کنیم به نزدیکترین سلکتور والدش اشاره می کند و استایل مورد نظر را برروی ان اعمال می کند :

#main {

  color: black;

  a {

    font-weight: bold;

    &:hover { color: red; }

  }

}

در واقع استایل مورد نظر برای هاور را برروی تگ a  اعمال می کند.

می توانیم از sass برای کوتاه کردن خاصیت های طولانی در css نیز استفاده کنیم به عنوان مثال خاصیت هایی مانند font-family، font-size ، و...

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

.funky {

  font: {

    family: fantasy;

    size: 30em;

    weight: bold;

  }

}

و یا برای border :

.line {

    border: {

        style: solid;

        top: {

            width: 2px;

            color: #555;

        }

        bottom: {

            width: 3px;

            color: #999;

        }

    }

}