سم بالمساحة المتغيرة داخل الإعدادات

ساهم تجربة المستخدم
1

مرحباً!

لقد قمت بإنشاء سمة (CSS فقط) بعرض متغير.
أفكر الآن في مشاركتها، لكن ليس الجميع يريد العرض المتغير. لذا كان تفكيري هو استخدام المتغيرات لتحديد العرض داخل إعدادات السمة.
أعلم أنني أحتاج إلى ملف settings.yaml يحتوي على كود مثل هذا:

composer width:
  default: 1110
  type: integer
  description: "Set the width of the composer"

header width:
  default: 1110
  type: integer
  description: "Set the width of the header"

الآن، أنا لست متخصصًا في CSS، لذا لا أعرف كيفية استخدام هذه المتغيرات داخل SCSS.
هل أحتاج إلى دالة لهذه الإعدادات؟
هل يمكن لأحد أن يقدم مثالاً حول كيفية تعيين القيمة للرأس على سبيل المثال؟

شكرًا لك!

2

في CSS، يمكنك استخدام شيء مثل هذا:
#{$header_width}.

راجع هذا الموضوع:

إعجاب واحد (1)
3

شكرًا لك على الرابط!

هل هو بهذه السهولة حقًا!? :+1:

إذًا، سؤال آخر.
بما أن العرض يمكن تعيينه بالبكسل (px) أو النسبة المئوية (%)، فهل يعني ذلك أن متغيراتي يجب أن تكون من نوع بيانات النص (string)؟
ولكن كيف يمكنني منع إدخال قيم مثل 1100 تفاح؟

لدي فكرة أفضل باستخدام الأعداد الصحيحة (int) والقيم المحددة (enum)!

شكرًا لك!

4

مرحباً مرة أخرى!

أرغب في إضافة إعدادات إلى القالب الخاص بي ولكن لدي بعض الأسئلة حول ذلك.

لقد اطلعت على مكون welcome-banner لأنه يوجد به إعداد لتحميل صورة كخلفية وإعدادات أخرى متعلقة بالخلفية.

banner_background_image:
  type: upload
  default: ""

banner_background_repeat:
  type: enum
  default: no-repeat
  choices:
    - no-repeat
    - repeat
    - repeat-x
    - repeat-y

banner_background_size:
  type: string
  default: cover
  description: يستخدم ..... خاصية حجم الخلفية في CSS</a>

وفي ملف CSS يوجد هذا:

.welcome-link-banner-wrapper {
    background-color: #{$banner-background-color};
    background-image: url(#{$banner-background-image});
    background-size: #{$banner-background-size};
    background-repeat: #{$banner-background-repeat};
    background-position: center center;
  }

ما يزعجني الآن هو استخدام # بدلاً من $ كما في المكونات الأخرى التي اطلعت عليها.
لذا، ما الذي أحتاج إلى استخدامه؟ أم أن الأمر لا يهم؟

لدي سؤال آخر حول CSS، ولكن أولاً أريد حل السؤال أعلاه.
بالطبع يمكنني تجربته ولكن أريد أن أكون متأكداً من الصحيح.

5

#{...} هو استيفاء scss:

تخميني هو أنه مطلوب في بعض الأمثلة التي شاركتها لأن جميع إعدادات السمة هي متغيرات “سلسلة”. يسمح الاستيفاء باستخدام هذه السلاسل في أماكن تتطلب عادةً نوع متغير محدد. في كثير من الحالات، قد تتمكن من استخدام $variable فقط.

إعجابَين (2)
6

حسناً، فهمت.
إذن، إذا أجبرت المستخدمين على استخدام لون الخلفية كـ RGB بدلاً من استخدام Hex، وكتبت الـ # بشكل ثابت في ملف CSS، يمكنني استخدام الـ $.

إعجاب واحد (1)