Mga String sa SASS
Ipinaliliwanag ng artikulong ito ang mga string sa SASS.
Ipapaliwanag namin nang sunud-sunod mula sa mga batayang operasyon ng string hanggang sa mas advanced na paggamit ng mga string sa SASS.
YouTube Video
Mga String sa SASS
Ang SASS ay isang preprocessor para mapalawak ang CSS, at ang mga string ay mahalagang bahagi upang maging mas flexible at dynamic ang mga style definition.
Mga Batayan ng String
Ang mga string sa SASS ay maaaring nakapaloob sa single o double quotes, at sa ilang kaso, maaaring tanggalin ang mga quotes upang maisulat ang mga ito na parang identifiers. Narito ang mga pangunahing halimbawa kung paano ito isinusulat.
1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;Mga Tala
- Ang mga string na may quotes ay direktang tinuturing na string literals.
- Ang mga string na walang quotes ay kadalasang tinuturing na CSS identifiers tulad ng mga pangalan ng klase o ID, kaya dapat mag-ingat sa tamang paggamit nito.
Pagdudugtong ng String
Sa SASS, maaari mong dugtungan ang mga string gamit ang operator na +.
1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"- Ang code na ito ay halimbawa ng paggamit ng operator na
+sa SASS upang pagdugtungin ang maraming string at bumuo ng bagong string.
Advanced na Halimbawa: Pagbuo ng mga Pangalan ng Klase
1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5 content: $base-class + "--" + $modifier; // "btn--primary"
6}- Ang code na ito ay halimbawa ng paggamit ng operator na
+sa SASS para pagsamahin ang base class name at modifier, at bumuo ng bagong class name.
Paggamit ng mga String Function
Nagbibigay ang SASS ng mga built-in na function para sa iba't ibang operasyon sa string tulad ng quote control at paghugot ng bahagi ng string.
quote() at unquote()
Sa pamamagitan ng mga function na quote() at unquote(), maaari kang magdagdag o magtanggal ng quote sa mga string.
1$quoted: quote(Hello); // '"Hello"'
2$unquoted: unquote("Hello"); // Hellostr-length($string)
Ang function na str-length() ay kinukuha ang haba ng isang string.
1$length: str-length("Hello"); // 5str-insert($string, $insert, $index)
Ang function na str-insert() ay nagsisingit ng string sa tinukoy na posisyon.
1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"str-slice($string, $start-at, [$end-at])
Ang function na str-slice() ay kumukuha ng bahagi ng isang string.
1$substring: str-slice("Hello, World!", 1, 5); // "Hello"to-upper-case() at to-lower-case()
Ang mga function na to-upper-case() at to-lower-case() ay nagko-convert ng isang string sa malaking titik o maliit na titik.
1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"Mga String sa Conditional Logic
Gamit ang direktibang @if ng SASS, maaari kang mag-branch base sa halaga ng string at madaling magpalit ng style ayon sa tema at setting.
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}- Ang code na ito ay halimbawa ng paggamit ng
@ifdirective sa SASS upang tingnan kung ang tema aydarkat magpalit ng style ayon dito.
Praktikal na Halimbawa: Pagbuo ng Dynamic na Landas ng Background Image
Narito ang halimbawa ng paggamit ng string manipulations upang bumuo ng background image URL.
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}Na-compile na Resulta
1.background {
2 background-image: url("/images/background.jpg");
3}- Ang code na ito ay halimbawa ng pagdugtong ng mga string sa SASS upang dynamic na bumuo ng path para sa background image at gamitin ito bilang background.
Pagsasama sa Lists at Maps
Sa pagsasama ng lists at maps ng SASS sa mga operasyon ng string, mas flexible kang makakagawa ng mga estilo.
Halimbawa ng List
1$states: "hover", "focus", "active";
2
3@each $state in $states {
4 .btn-#{$state} {
5 content: "Button in " + $state + " state";
6 }
7}Na-compile na Resulta
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}- Ang code na ito ay halimbawa ng paggamit ng direktibang
@eachsa SASS upang bumuo ng klase para sa bawat estado sa isang listahan, at dynamic na i-set ang laman sa pamamagitan ng pagdugtong ng mga string.
Halimbawa ng 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}Na-compile na Resulta
1.text-primary {
2 color: #3498db;
3}
4.text-secondary {
5 color: #2ecc71;
6}- Ang code na ito ay halimbawa ng paggamit ng SASS map upang iugnay ang mga pangalan ng kulay sa mga halaga at dynamic na bumuo ng bawat klase gamit ang
@eachdirective.
Pag-escape ng String
Upang magamit nang ligtas ang ilang string bilang mga CSS identifier, maaaring kailanganin ang pag-escape.
1$special_character: "example\\@123";
2.#{$special_character} {
3 content: "This is a valid CSS class.";
4}Na-compile na Resulta
1.example\@123 {
2 content: "This is a valid CSS class.";
3}- Ang code na ito ay isang halimbawa ng pagtrato sa isang string na naglalaman ng mga espesyal na karakter bilang isang variable sa SASS, pagpapalawak nito gamit ang
#{$variable}, at paggamit nito bilang isang valid na pangalan ng class sa CSS.
Konklusyon
Ang mga operasyon ng string sa SASS ay higit pa sa simpleng pagsulat ng string literals—makapangyarihang kagamitan ito para sa dynamic na paggawa ng mga estilo. Sa paggamit ng mga batayang operasyon at function na ipinakilala dito, mapapahusay mo ang reusability at maintainability ng iyong CSS at mas magiging episyente ang pagdi-disenyo ng mga estilo.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.