Sintaks SASS dan Sintaks SCSS

Artikel ini menerangkan tentang sintaks SASS dan sintaks SCSS.

Kami akan menerangkan dengan terperinci perbezaan antara sintaks SASS dan SCSS, serta menyediakan contoh konkrit untuk memperdalam pemahaman anda.

YouTube Video

Sintaks SASS dan Sintaks SCSS

SASS ialah bahasa helaian gaya yang direka untuk memperluaskan keupayaan CSS. SASS mempunyai dua jenis sintaks. Ia merangkumi sintaks SASS dan sintaks SCSS.

Gambaran Keseluruhan SASS dan SCSS

Sintaks SASS

Sintaks SASS ditulis seperti berikut:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Sintaks berasaskan indentasi yang tidak menggunakan kurungan kurawal {} atau titik koma ;.
• Ia direka untuk membolehkan penulisan kod yang ringkas dan mudah dibaca.
• Ekstensi fail ialah .sass.

Sintaks SCSS

Sintaks SCSS ditulis seperti berikut:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Sintaks yang serupa dengan CSS, menggunakan kurungan kurawal {} dan titik koma ;.
• Sangat serasi dengan kod CSS sedia ada, membolehkan CSS ditukar terus ke fail SCSS.
• Ekstensi fail ialah .scss.

Perbezaan utama antara SASS dan SCSS

Kriteria pemilihan

Pilihan yang mana untuk digunakan bergantung pada keperluan projek dan pasukan.

• Bila memilih sintaks SASS

  • Sintaks SASS membolehkan anda menulis kod yang ringkas dan bersih.
  • Jika seluruh pasukan biasa dengan sintaks SASS, ia merupakan pilihan yang sesuai.

• Bila memilih sintaks SCSS

  • Jika keserasian dengan CSS penting dan ramai ahli pasukan biasa dengan CSS, sintaks SCSS adalah lebih sesuai.

Kelebihan SASS dan SCSS

Berikut adalah kelebihan biasa bagi sintaks SASS dan SCSS:.

1. Penggunaan Pemboleh Ubah

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Dengan menggunakan pemboleh ubah, anda boleh mentakrif gaya di satu tempat dan menggunakannya semula di pelbagai lokasi. Perubahan reka bentuk boleh digunakan secara menyeluruh hanya dengan mengubah nilai pemboleh ubah, sekali gus meningkatkan kebolehselenggaraan.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixin membolehkan anda mengumpulkan gaya atau kod berawalan vendor yang digunakan berulang kali di pelbagai tempat dan menggunakannya secara fleksibel dengan menggunakan argumen. Ini mengurangkan penduaan kod dan meningkatkan kebolehselenggaraan.

3. Peraturan Bersarang

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Dengan menggunakan sarang, anda boleh menulis gaya secara hierarki mengikut struktur HTML, sekali gus memudahkan pengelompokan peraturan yang berkaitan. Ini meningkatkan kebolehbacaan kod dan kebolehselenggaraan.

4. Pewarisan

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Dengan menggunakan pewarisan, anda boleh mengumpulkan dan menggunakan semula gaya biasa. Ini mengurangkan penduaan kod dan mengekalkan reka bentuk yang konsisten.

Kesimpulan

Pemilihan antara SASS dan SCSS bergantung pada keutamaan pembangun serta keperluan projek.

Sintaks SASS menekankan kesederhanaan, manakala sintaks SCSS menekankan keserasian dengan CSS. Kedua-dua sintaks sangat berkuasa dan boleh meningkatkan produktiviti CSS dengan ketara.

Memilih pilihan yang paling sesuai untuk projek anda membolehkan pengurusan stylesheet yang lebih cekap.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video