السلاسل النصية في SASS

تشرح هذه المقالة السلاسل النصية في SASS۔

سنشرح خطوة بخطوة من العمليات الأساسية على السلاسل النصية إلى الاستخدامات المتقدمة للسلاسل النصية في SASS۔

YouTube Video

السلاسل النصية في SASS

SASS هو معالج تمهيدي لتوسيع CSS، والسلاسل النصية عنصر أساسي لجعل تعريفات الأنماط أكثر مرونة وديناميكية۔

أساسيات السلاسل النصية

يمكن وضع السلاسل النصية في SASS بين علامات اقتباس مفردة أو مزدوجة، وفي بعض الحالات يمكن حذف علامات الاقتباس وكتابتها مثل المعرفات۔ فيما يلي أمثلة أساسية حول كيفية كتابتها۔

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

ملاحظات

• السلاسل النصية المحاطة بعلامات اقتباس تُعتبر قيمًا نصية مباشرة۔
• السلاسل النصية غير المحاطة بعلامات اقتباس غالبًا ما تُعامل كمعرفات CSS مثل أسماء الفئات أو المعرفات، لذا يجب استخدامها بشكل مناسب۔

دمج السلاسل النصية

في SASS، يمكنك دمج السلاسل النصية باستخدام عامل الجمع +۔

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

• يمثل هذا الكود مثالًا على استخدام عامل الجمع + في SASS لدمج عدة سلاسل نصية وإنشاء سلسلة نصية جديدة۔

مثال متقدم: إنشاء أسماء الفئات

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

• هذا الكود مثال على استخدام عامل الجمع + في SASS لجمع اسم فئة أساسي ومعدل، وإنشاء اسم فئة جديد۔

استخدام دوال السلاسل النصية

يوفر SASS دوال مدمجة ملائمة لأنواع مختلفة من العمليات على السلاسل النصية مثل التحكم في علامات الاقتباس واستخراج جزء من السلسلة النصية۔

quote() و unquote()

باستخدام دالتي quote() و unquote() يمكنك إضافة أو إزالة علامات الاقتباس من السلاسل النصية۔

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

str-length($string)

دالة str-length() تحدد طول السلسلة النصية۔

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

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

دالة str-insert() تُدرج سلسلة نصية في الموضع المحدد۔

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

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

دالة str-slice() تستخرج جزءًا من السلسلة النصية۔

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

to-upper-case() و to-lower-case()

دالتي to-upper-case() و to-lower-case() تحولان السلسلة النصية إلى أحرف كبيرة أو صغيرة على التوالي۔

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

السلاسل النصية في المنطق الشرطي

باستخدام توجيه @if في SASS يمكنك التفرع شرطيًا بناءً على قيم السلاسل النصية وتبديل الأنماط بمرونة حسب السمات والإعدادات۔

 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}

• هذا الكود مثال على استخدام توجيه @if في SASS للتحقق مما إذا كان السمة هي 'dark' وتغيير الأنماط وفقًا لذلك۔

مثال عملي: إنشاء مسارات ديناميكية لصور الخلفية

فيما يلي مثال لاستخدام التعامل مع السلاسل النصية لإنشاء رابط صورة الخلفية۔

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}

النتيجة المترجمة

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

• هذا الكود مثال على دمج السلاسل النصية في SASS لإنشاء مسار صورة خلفية بشكل ديناميكي وتعيينها كخلفية۔

الدمج مع القوائم والخرائط

من خلال دمج القوائم والخرائط في SASS مع العمليات النصية يمكنك إنشاء أنماط بشكل أكثر مرونة۔

مثال على القوائم

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

النتيجة المترجمة

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}

• هذا الكود مثال على استخدام توجيه @each في SASS لإنشاء فئات لكل عنصر في القائمة وتعيين المحتوى ديناميكيًا عبر دمج السلاسل النصية۔

مثال على الخرائط

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

النتيجة المترجمة

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

• هذا الكود مثال على استخدام خريطة SASS لربط أسماء الألوان بالقيم وإنشاء كل فئة ديناميكيًا باستخدام توجيه @each۔

تهريب السلاسل النصية (Escaping)

من أجل استخدام بعض السلاسل النصية بأمان كمعرفات CSS، قد يكون تهريبها ضروريًا۔

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

النتيجة المترجمة

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

• يمثل هذا الكود مثالاً على كيفية التعامل مع سلسلة نصية تحتوي على أحرف خاصة كمتغير في SASS، وتوسيعه باستخدام ‎#{$variable}‎، واستخدامه كاسم فئة صالح في CSS.۔

الخاتمة

العمليات على السلاسل النصية في SASS ليست فقط لكتابة قيم نصية بل هي أدوات قوية لبناء الأنماط بشكل ديناميكي۔ عبر الاستفادة من العمليات والدوال الأساسية المقدمة هنا، يمكنك تحسين قابلية إعادة استخدام وصيانة CSS الخاص بك وتصميم الأنماط بشكل أكثر كفاءة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video