sass دو نوع سینتکس نوشتاری رو ساپورت میکنه:

  1. SCSS یا Sassy CSS توسعه یافته شده سینتکس CSS است. یعنی هرچی در CSS معتبر هست در SCSS هم معتبر است. SCSS مدیریت stylesheet های بزرگ رو راحت تر میکنه و با فرمت .scss ذخیره میشه.
  2. Indented نوع قدیمی نوشتاری سینتکس ها در SASS هست که درواقع از قوانین Ruby در نوشتن استفاده میکنه به صورتی که نیازی به {} یا ; یا از = به جای : و از ! به جای $ استفاده میشه. این نوع نوشتاری رو توصیه نمیکنیم و در کل منسوخ شده.


SASS - CSS Extensions

در این قسمت اول کد scss را نشان میدهیم و بعد از آن کد کامپایل شده و تبدیل شده به css را قرار میدهیم.

Nested rules:

با کمک SASS میتونیم چندین قوانین CSSیی را در هم کنیم.

style.scss

.container{
  h1{
    font-size: 25px;
    color:#E45456;
  }

  p{
    font-size: 25px;
    color:#3C7949;
  }

  .box{
    h1{
      font-size: 25px;
      color:#E45456;
    }

    p{
      font-size: 25px;
      color:#3C7949;
    }
  }
}

style.css

.container h1 {
  font-size: 25px;
  color: #E45456;
}

.container p {
  font-size: 25px;
  color: #3C7949;
}

.container .box h1 {
  font-size: 25px;
  color: #E45456;
}

.container .box p {
  font-size: 25px;
  color: #3C7949;
}

Referencing parent selectors (&)

میتونید با & به selector های پدر دسترسی داشته باشید.

style.scss

.IFLI{
  h1{
    color: limegreen;
    &:hover{
      color: red;
    }
  }
}

style.css

.IFLI h1 {
    color: limegreen;
}

.IFLI h1:hover {
    color: red;
}

Nested properties

style.scss

.line {
  font: {
    family: Lucida Sans Unicode;
    size:20px;
    weight: bold;
    variant: small-caps;
  }
}

style.css

.line {
    font-family: Lucida Sans Unicode;
    font-size: 20px;
    font-weight: bold;
    font-variant: small-caps;
}

extend@

از دستورالعمل extend@ برای inherit کردن تمامی style یک selector دیگر استفاده میکنیم.

style.scss

.IFLI{
  color: red;
}
.boom{
  @extend .IFLI;
}

style.css

.IFLI, .boom {
    color: red;
}


نکته: در SASS دو نوع کامنت نوشتن وجود داره، multiline یا single line. ولی بعد از تبدیل شدن scss به css تنها multiline ها هستند که نمایش داده میشوند.

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }