Aturan dan Atribut Pengeompokan Sass

Peraturan Sass yang terdapat di dalam Sass

Sass membenarkan anda untuk mengeksutkan pemilih CSS dengan cara yang sama seperti HTML.

Lihat contoh kod Sass untuk navigasi laman ini:

SCSS Grammar:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Perhatikan, di dalam Sass:ul、li dan a pemilih yang terdapat di dalam nav dalam pemilih.

Manakala di dalam CSS, aturan-aturan adalah yang ditakrifkan secara pasti (tidak terkapsulkan):

Syarat CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Karena anda boleh mengeksutkan properti di Sass, jadi ia lebih jelas dan mudah dibaca daripada CSS standar.

Properti Sass yang terdapat di dalam Sass

Banyak properti CSS mempunyai awalan yang sama, contohnya:

• font-family
• font-size
• font-weight
• text-align
• text-transform
• text-overflow

Dengan menggunakan Sass, Anda dapat menulisnya sebagai properti yang bersarang:

SCSS Grammar:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

Pengkonversi Sass akan mengubah kode di atas ke CSS biasa:

Output CSS:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;