Sintaks SASS dan Sintaks SCSS

Artikel ini menjelaskan sintaks SASS dan sintaks SCSS.

Kami akan menjelaskan secara rinci perbedaan antara sintaks SASS dan SCSS, serta memberikan contoh konkret untuk memperdalam pemahaman Anda.

YouTube Video

Sintaks SASS dan Sintaks SCSS

SASS adalah bahasa stylesheet yang dirancang untuk memperluas kemampuan CSS. SASS memiliki dua jenis sintaks. Yaitu sintaks SASS dan sintaks SCSS.

Gambaran Umum SASS dan SCSS

Sintaks SASS

Sintaks SASS ditulis sebagai 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 berbasis indentasi yang tidak menggunakan kurung kurawal {} atau titik koma ;.
• Dirancang untuk menulis kode yang ringkas dan mudah dibaca.
• Ekstensi filenya adalah .sass.

Sintaks SCSS

Sintaks SCSS ditulis sebagai 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 mirip dengan CSS, menggunakan kurung kurawal {} dan titik koma ;.
• Sangat kompatibel dengan kode CSS yang sudah ada, sehingga CSS dapat langsung diubah menjadi file SCSS.
• Ekstensi filenya adalah .scss.

Perbedaan utama antara SASS dan SCSS

Kriteria pemilihan

Pilihan penggunaan tergantung pada kebutuhan proyek dan tim.

• Kapan memilih sintaks SASS

  • Sintaks SASS memungkinkan Anda menulis kode yang ringkas dan bersih.
  • Jika seluruh tim sudah terbiasa dengan sintaks SASS, ini adalah pilihan yang tepat.

• Kapan memilih sintaks SCSS

  • Jika kompatibilitas dengan CSS penting dan banyak anggota tim yang familiar dengan CSS, sintaks SCSS lebih cocok.

Keuntungan SASS dan SCSS

Berikut adalah keunggulan umum dari sintaks SASS dan SCSS:.

1. Penggunaan Variabel

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

• Dengan menggunakan variabel, Anda dapat mendefinisikan sebuah gaya di satu tempat dan menggunakannya kembali di beberapa lokasi. Perubahan desain dapat diterapkan secara menyeluruh hanya dengan mengubah nilai variabel, sehingga meningkatkan kemudahan perawatan.

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 memungkinkan Anda mengelompokkan gaya atau kode vendor-prefixed yang sering digunakan di banyak tempat dan menerapkannya secara fleksibel dengan menggunakan argumen. Ini mengurangi duplikasi kode dan meningkatkan kemudahan perawatan.

3. Aturan 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 nesting, Anda dapat menulis gaya secara hierarkis sesuai dengan struktur HTML, sehingga lebih mudah untuk mengelompokkan aturan yang terkait. Ini meningkatkan keterbacaan dan kemudahan perawatan kode.

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 inheritance, Anda dapat mengelompokkan dan menggunakan kembali gaya umum. Hal ini mengurangi duplikasi kode dan menjaga konsistensi desain.

Kesimpulan

Memilih antara SASS dan SCSS tergantung pada preferensi pengembang dan kebutuhan proyek.

Sintaks SASS menekankan kesederhanaan, sedangkan sintaks SCSS menekankan kompatibilitas dengan CSS. Kedua sintaks sangat kuat dan dapat meningkatkan produktivitas CSS secara signifikan.

Memilih opsi yang paling sesuai untuk proyek Anda memungkinkan pengelolaan stylesheet yang efisien.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video