Tema con ancho variable dentro de la configuración

Contribuir UX
1

¡Hola!

He creado un tema (solo CSS) con un ancho variable.
Ahora estoy pensando en compartirlo, pero no todo el mundo quiere un ancho variable. Por eso, mi idea es usar variables para establecer el ancho dentro de la configuración del tema.
Sé que necesito un archivo settings.yaml con, por ejemplo, este código:

composer width:
  default: 1110
  type: integer
  description: "Establece el ancho del editor"

header width:
  default: 1110
  type: integer
  description: "Establece el ancho del encabezado"

Sin embargo, no soy especialista en CSS, así que no sé cómo usar estas variables dentro de SCSS.
¿Necesito una función para estas configuraciones?
¿Alguien podría darme un ejemplo de cómo establecer el valor del encabezado, por ejemplo?

¡Gracias!

2

En el CSS puedes usar algo como esto:
#{$header_width}.

Consulta este tema:

1 me gusta
3

¡Gracias por el enlace!

¿Es realmente tan sencillo!? :+1:

Así que, una pregunta más.
Como para el ancho puedes establecer px o %, ¿necesitan mis variables ser de tipo string?
Pero, ¿cómo puedo evitar entradas como 1100 apples?

¡Tengo una mejor idea con int y enum!

¡Gracias!

4

¡Hola de nuevo!

Quiero añadir configuraciones a mi tema, pero tengo algunas preguntas al respecto.

Investigué el componente welcome-banner porque hay una opción para subir una imagen como fondo y otras configuraciones relacionadas con el fondo.

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: usa la propiedad ..... CSS background size</a>

Y en el archivo CSS está esto:

.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;
  }

Lo que me irrita ahora es el uso de # en lugar de $ como en otros componentes que he visto.
Entonces, ¿qué necesito usar? ¿O no importa?

Tengo otra pregunta sobre CSS, pero primero quiero resolver la anterior.
Por supuesto que podría intentarlo, pero quiero estar seguro de cuál es la correcta.

5

#{...} es interpolación de scss:

Mi suposición es que se requiere en algunos de los ejemplos que compartiste porque todas las configuraciones del tema son variables de ‘cadena’. La interpolación permite que esas cadenas se utilicen en lugares que normalmente requerirían un tipo de variable específico. Sin embargo, en muchos casos, probablemente puedas arreglártelas solo con $variable.

2 Me gusta
6

Ok, entiendo.
Entonces, si obligara a los usuarios a usar el color de fondo como RGB en lugar de Hex, y escribiera el # codificado en el archivo CSS, podría usar $.

1 me gusta