String di SASS

Artikel ini menjelaskan tentang string di SASS.

Kami akan menjelaskan langkah demi langkah mulai dari operasi string dasar hingga penggunaan lanjutan string di SASS.

YouTube Video

String di SASS

SASS adalah preprosesor untuk memperluas CSS, dan string merupakan elemen penting untuk membuat definisi gaya yang lebih fleksibel dan dinamis.

Dasar-dasar String

String di SASS dapat ditulis dengan tanda kutip tunggal atau ganda, dan dalam beberapa kasus, tanda kutip dapat dihilangkan sehingga string ditulis seperti identifier. Di bawah ini adalah contoh dasar cara menuliskannya.

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

Catatan

• String yang dikutip akan dievaluasi langsung sebagai literal string.
• String tanpa tanda kutip sering diperlakukan sebagai identifier CSS seperti nama kelas atau ID, jadi harus digunakan dengan hati-hati.

Penggabungan String

Di SASS, Anda dapat menggabungkan string menggunakan operator +.

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• Kode ini adalah contoh penggunaan operator + di SASS untuk menggabungkan beberapa string dan membuat string baru.

Contoh Lanjutan: Membuat Nama Kelas

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• Kode ini adalah contoh penggunaan operator + di SASS untuk menggabungkan nama kelas dasar dan modifier, sehingga menghasilkan nama kelas baru.

Menggunakan Fungsi String

SASS menyediakan fungsi bawaan yang nyaman untuk berbagai operasi string seperti pengaturan tanda kutip dan ekstraksi substring.

quote() dan unquote()

Dengan fungsi quote() dan unquote(), Anda dapat menambah atau menghapus tanda kutip dari string.

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

Fungsi str-length() digunakan untuk mendapatkan panjang sebuah string.

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

Fungsi str-insert() digunakan untuk menyisipkan string pada posisi yang ditentukan.

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

Fungsi str-slice() digunakan untuk mengambil sebagian dari string.

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() dan to-lower-case()

Fungsi to-upper-case() dan to-lower-case() mengubah string menjadi huruf kapital atau huruf kecil.

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

String dalam Logika Kondisional

Dengan menggunakan direktif @if di SASS, Anda dapat membuat percabangan berdasarkan nilai string dan mengubah gaya secara fleksibel sesuai tema dan pengaturan.

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• Kode ini adalah contoh penggunaan direktif @if di SASS untuk memeriksa apakah tema adalah dark dan mengubah gaya secara sesuai.

Contoh Praktis: Membuat Path Gambar Latar Belakang Dinamis

Di bawah ini adalah contoh penggunaan manipulasi string untuk membuat URL gambar latar belakang.

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

Hasil Kompilasi

1.background {
2    background-image: url("/images/background.jpg");
3}

• Kode ini adalah contoh penggabungan string di SASS untuk membuat path gambar latar belakang secara dinamis dan mengaplikasikannya sebagai latar belakang.

Menggabungkan dengan List dan Map

Dengan menggabungkan list dan map di SASS dengan operasi string, Anda dapat membuat gaya secara lebih fleksibel.

Contoh List

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

Hasil Kompilasi

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

• Kode ini adalah contoh penggunaan direktif @each di SASS untuk membuat kelas untuk setiap state dalam list, dan mengatur konten secara dinamis dengan menggabungkan string.

Contoh Map

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

Hasil Kompilasi

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• Kode ini adalah contoh penggunaan map di SASS untuk mengasosiasikan nama warna dengan nilainya dan membuat setiap kelas secara dinamis menggunakan direktif @each.

Mengekspresikan String

Untuk menggunakan beberapa string sebagai identifier CSS dengan aman, diperlukan proses escaping.

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

Hasil Kompilasi

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• Kode ini adalah contoh memperlakukan string yang berisi karakter khusus sebagai variabel di SASS, mengembangkannya dengan #{$variable}, dan menggunakannya sebagai nama kelas yang valid di CSS.

Kesimpulan

Operasi string di SASS tidak hanya sekadar menulis literal string—tetapi merupakan alat yang sangat kuat untuk membuat gaya secara dinamis. Dengan memanfaatkan operasi dan fungsi dasar yang diperkenalkan di sini, Anda dapat meningkatkan reusabilitas dan pemeliharaan CSS serta merancang gaya dengan lebih efisien.

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

YouTube Video