En este artículo, aprenderemos cómo incluir variables de sección en la página web. Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo. Otra ventaja con Bulma es que simplemente necesita tener conocimientos de HTML y CSS para implementar este marco (aunque saber JavaScript puede ayudar a las características existentes según sus necesidades). Bulma también nos permite agregar nuestro propio estilo CSS, pero se recomienda usar una hoja de estilo externa sobre el estilo en línea.
¿Variable de sección?
Se utiliza para diseñar secciones utilizando variables de sección. Una página web se divide en varias secciones y diseñaremos esas secciones para mejorar la interfaz de usuario del sitio web.
Sintaxis:
$variable-name: value of the variable;
Acercarse:
- En primer lugar, cree un archivo HTML e incluya Bluma CSS.
- En el siguiente paso, crearemos dos archivos con el mismo nombre y diferentes extensiones.
- En el último paso, compile el archivo SCSS usando el compilador CSS
Variable utilizada:
| Nombre | Escribe | Valor |
|---|---|---|
| $sección-relleno | Talla | 3 rem 1,5 rem |
| $section-padding-desktop | Talla | 3 rem 3 rem |
| $section-padding-medium | Talla | 9 rem 4,5 rem |
| $sección-relleno-grande | Talla | 18 rem 6 rem |
Ejemplo 1: en el siguiente código, veremos cómo diseñar una sección usando la variable de sección.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="k/gfg.css"> </head> <body> <center> <h1 style="font-size: 40px; color:green; "> GeeksforGeeks</h1><br> <section class="section is-large"> <h1 class="title">Section | bluma</h1> <h2 class="subtitle"> This is a section. A section is a small part of website. </h2> </section> </center> </body> </html>
Código SCSS:
$section-padding: 3rem 1.5rem;
.section{
padding: $section-padding;
}
Producción:
Ejemplo 2: en el siguiente código, veremos cómo diseñar una sección usando la variable de sección.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="k/gfg.css"> </head> <body> <center> <h1 style="font-size: 40px; color:green; "> GeeksforGeeks</h1><br> <section class="section is-large"> <h1 class="title">Section | bluma</h1> <h3 class="title">Padding Desktop</h3> <h2 class="subtitle"> This is a section. A section is a small part of website. </h2> </section> </center> </body> </html>
Código SCSS:
$section-padding-desktop: 3rem 3rem;
.section{
padding: $section-padding-desktop;
}
Producción:
Referencia: https://bulma.io/documentation/layout/section/
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA