Tema con ancho variable dentro de la configuración

UX
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 me gusta
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

¡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