Тема с переменной шириной внутри настроек

Внести вклад UX
1

Привет!

Я создал тему (только на CSS) с переменной шириной.
Теперь я думаю о том, чтобы поделиться ею, но не все хотят использовать переменную ширину. Поэтому я подумал использовать переменные для установки ширины в настройках темы.
Я знаю, что мне нужен файл settings.yaml с примерно таким кодом:

composer width:
  default: 1110
  type: integer
  description: "Установите ширину редактора"

header width:
  default: 1110
  type: integer
  description: "Установите ширину заголовка"

Теперь я не специалист по CSS, поэтому не знаю, как использовать эти переменные внутри SCSS.
Нужна ли мне функция для этих настроек?
Может ли кто-нибудь привести пример того, как установить значение для заголовка, например?

Спасибо!

2

В CSS вы можете использовать что-то вроде этого:
#{$header_width}.

Посмотрите эту тему:

1 лайк
3

Спасибо за ссылку!

Это действительно так просто!? :+1:

Итак, ещё один вопрос.
Так как ширину можно задавать в пикселях (px) или в процентах (%), должны ли мои переменные быть строкового типа?
Но как предотвратить ввод значений вроде 1100 apples?

У меня есть идея получше — использовать 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 background size</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 лайк