Bulma es un marco gratuito y de código abierto basado en la propiedad flexbox que se utiliza para crear componentes reutilizables mientras se crean aplicaciones web. Este marco es un marco listo para dispositivos móviles con el que los usuarios pueden ver las aplicaciones web como una aplicación móvil.
Las variables de pie de página de Bulma son las variables SCSS que se compilan en CSS, que a su vez se utilizan para agregar estilo en varias opciones de personalización. Estas variables se declaran una vez para almacenar datos que se pueden reutilizar cuando sea necesario. En caso de que las variables se modifiquen una vez, los cambios se reflejarán siempre que se utilice la variable. Por ejemplo, el color de fondo del pie de página en Bulma se puede usar para establecer el color de fondo del pie de página. De manera similar, el color del texto del pie de página se puede configurar con la ayuda de la variable footer-color en Bulma.
Variables de pie de página de Bulma:
- $footer-background-color: esta variable se utiliza para definir el color de fondo del pie de página.
- $footer-color: esta variable se utiliza para definir el color del texto del pie de página.
- $footer-padding: esta variable se usa para definir el tamaño del pie de página, junto con el espacio alrededor del pie de página especificando el valor de relleno.
Sintaxis:
$variable-name: value of the variable;
Ejemplo 1: En el siguiente ejemplo, utilizaremos las variables para cambiar el estilo del pie de página.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="gfg.css"> <title>Bulma Footer Variable</title> </head> <body> <center> <h1 style="font-size: 40px; color:green; "> GeeksforGeeks </h1> <br> <footer class="footer"> <div class="content has-text-centered"> <p> <strong style="color: green ;"> GeeksforGeeks </strong> by <a href= "https://www.geeksforgeeks.org/advice-from-an-alpha-geek-mr-sandeep-jain/"> Sandeep jain </a>. GeeksforGeeks is a computer science portal for geeks. </p> </div> </footer> </center> </body> </html>
Archivo SCSS: antes de crear el archivo SCSS, tenga en cuenta que el nombre del archivo SCSS y el archivo CSS deben ser iguales. El siguiente código está escrito en el archivo gfg.scss y no escribe nada en el archivo CSS.
$footer-background-color: lightgreen;
$footer-color: false;
$footer-padding: 3rem 1.5rem 6rem;
.footer{
background-color: $footer-background-color ;
color: $footer-color;
padding: $footer-padding;
}
gfg.css:
.footer {
background-color: lightgreen;
color: false;
padding: 3rem 1.5rem 6rem;
}
Producción:
Ejemplo 2: Este ejemplo describe la variable de pie de página de Bulma especificando la variable para el color de fondo, el color del texto y el valor de relleno.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="gfg.css"> <title>Bulma Footer Variable</title> </head> <body> <center> <h1 style="font-size: 40px; color:green; "> GeeksforGeeks </h1> <br> <footer class="footer"> <div class="content has-text-centered"> <p> <strong style="color: green ;"> GeeksforGeeks </strong> by <a href="#">Sandeep jain</a>. GeeksforGeeks is a computer science portal for geeks. </p> </div> </footer> </center> </body> </html>
archivo SCSS:
$footer-background-color: rgb(150, 161, 139);
$footer-color: rgb(10, 10, 10);
$footer-padding: 10px;
.footer{
background-color: $footer-background-color ;
color: $footer-color;
padding: $footer-padding;
}
gfg.css:
.footer {
background-color: #96a18b;
color: #0a0a0a;
padding: 10px;
}
Producción:
Referencia: https://bulma.io/documentation/layout/footer/#variables
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA