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

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

Hallo!

I’ve made a theme (css only) with a variable width.
Now I think about to share it, but not every one wants the variable width. So my consideration was to use variables to set the width inside the theme settings.
I know I need a settings.yamlwith e.g. this code:

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"

Now I’m not a specialist with CSS so I don’t know how to use these variables inside of SCSS.
Do I need a function for these settings?
Can someone give me an example on how to set the value for the header for example?

Thank you!

2

In the CSS you can use something like this
#{$header_width} .

Check this topic:

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

Thank you for the link!

Is it really that easy!? :+1:

So, one more question.
As width you can set px or %, so my variables need to be a string as data type?
But how can I prevent such inputs like 1100 apples?

I have a better idea with int and enum!

Thank you!

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)