Rentetan dalam SASS

Artikel ini menerangkan tentang rentetan dalam SASS.

Kami akan menerangkan secara langkah demi langkah dari operasi rentetan asas hingga penggunaan rentetan yang lebih maju dalam SASS.

YouTube Video

Rentetan dalam SASS

SASS ialah pra-pemproses untuk memperluaskan CSS, dan rentetan merupakan elemen penting untuk menjadikan definisi gaya lebih fleksibel dan dinamik.

Asas Rentetan

Rentetan dalam SASS boleh diletakkan dalam tanda petik tunggal atau berganda, dan dalam sesetengah kes, tanda petik boleh diabaikan untuk menulisnya seperti pengecam. Di bawah adalah contoh asas cara menulisnya.

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

Nota

• Rentetan bertanda petik dinilai terus sebagai literal rentetan.
• Rentetan tanpa tanda petik selalunya dianggap sebagai pengecam CSS seperti nama kelas atau ID, jadi perlu berhati-hati menggunakannya dengan betul.

Penggabungan Rentetan

Dalam SASS, anda boleh menggabungkan rentetan dengan menggunakan operator +.

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

• Kod ini ialah contoh penggunaan operator + dalam SASS untuk menggabungkan beberapa rentetan dan mencipta rentetan baharu.

Contoh Lanjutan: Menjana Nama Kelas

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

• Kod ini ialah contoh penggunaan operator + dalam SASS untuk menggabungkan nama kelas asas dan pengubah, seterusnya menjana nama kelas baharu.

Menggunakan Fungsi Rentetan

SASS menyediakan fungsi terbina yang mudah untuk pelbagai operasi rentetan seperti kawalan tanda petik dan pengekstrakan subrentetan.

quote() dan unquote()

Dengan fungsi quote() dan unquote(), anda boleh menambah atau membuang tanda petik daripada rentetan.

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

str-length($string)

Fungsi str-length() mendapatkan panjang sesuatu rentetan.

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

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

Fungsi str-insert() menyisipkan rentetan pada kedudukan tertentu.

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

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

Fungsi str-slice() mengekstrak sebahagian rentetan.

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

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

Fungsi to-upper-case() dan to-lower-case() menukar rentetan kepada huruf besar atau huruf kecil.

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

Rentetan dalam Logik Bersyarat

Dengan menggunakan arahan @if dalam SASS, anda boleh mencabang secara bersyarat berdasarkan nilai rentetan dan menukar gaya secara fleksibel mengikut tema dan tetapan.

 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}

• Kod ini ialah contoh penggunaan arahan @if dalam SASS untuk menyemak sama ada tema ialah dark dan menukar gaya mengikutnya.

Contoh Praktikal: Menjana Laluan Imej Latar Belakang yang Dinamik

Di bawah adalah contoh menggunakan manipulasi rentetan untuk menjana URL imej 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 Yang Telah Disusun

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

• Kod ini ialah contoh penggabungan rentetan dalam SASS untuk menjana laluan imej latar belakang secara dinamik dan menggunakannya sebagai latar belakang.

Gabungan dengan Senarai dan Peta

Dengan menggabungkan senarai dan peta SASS bersama operasi rentetan, anda boleh menjana gaya dengan lebih fleksibel.

Contoh Senarai

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

Hasil Yang Telah Disusun

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}

• Kod ini ialah contoh penggunaan arahan @each dalam SASS untuk menjana kelas bagi setiap keadaan dalam senarai, serta menetapkan isi secara dinamik dengan penggabungan rentetan.

Contoh Peta

 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 Yang Telah Disusun

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

• Kod ini ialah contoh penggunaan peta SASS untuk mengaitkan nama warna dengan nilainya dan menjana setiap kelas secara dinamik dengan arahan @each.

Melarikan Rentetan

Untuk menggunakan sesetengah rentetan sebagai pengecam CSS dengan selamat, pelarikan mungkin diperlukan.

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

Hasil Yang Telah Disusun

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

• Kod ini adalah contoh bagaimana merawat rentetan yang mengandungi aksara khas sebagai pembolehubah dalam SASS, mengembangkannya dengan #{$variable}, dan menggunakannya sebagai nama kelas yang sah dalam CSS.

Kesimpulan

Operasi rentetan dalam SASS bukan sekadar menulis literal rentetan—ia merupakan alat yang berkuasa untuk membina gaya secara dinamik. Dengan menggunakan operasi dan fungsi asas yang diperkenalkan di sini, anda boleh meningkatkan keboleh-gunaan semula dan keboleh-selenggaraan CSS anda serta mereka gaya dengan lebih cekap.

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

YouTube Video