En este artículo, veremos cómo usar Bulma con Sass CLI . Los elementos de Bulma vienen con componentes prediseñados, ¿qué sucede si desea modificarlos o personalizarlos de acuerdo con sus requisitos? Puedes hacer eso simplemente usando sass. Una forma de lograr esto es usando SASS-CLI, que es una línea de comando sass desde la cual podemos crear un archivo CSS usando archivos sass para diseñar nuestros componentes. A continuación se muestra el proceso que demuestra la modificación completa o el estilo de un componente de Bulma.
Uso de Bulma con SASS-CLI: a continuación se dan todos los pasos que se requieren para diseñar un elemento de Bulma usando Sass-CLI junto con toda su sintaxis.
Paso 1: Instalación de Sass : Primero, cree una nueva carpeta con cualquier nombre donde desee crear sus archivos sass. En la terminal, primero, navegue hasta el directorio de la carpeta y escriba el siguiente comando para instalar sass gem :
gem install sass
Paso 2: Descarga Bulma: Ahora obtén la última versión de Bulma desde aquí . Después de descargar, descomprima y coloque la carpeta Bulma-0.9.3 dentro de la carpeta del proyecto que creó antes en el paso 1.
Paso 3: Creación de un archivo SASS: Cree una carpeta SASS y allí cree un archivo llamado: mystyles.scss .
@charset "utf-8"; @import "../node_modules/bulma/bulma.sass";
Nota: asegúrese de que la ruta anterior sea correcta según el directorio de su proyecto.
Paso 4: Crear el archivo HTML: Creamos un archivo HTML que queremos personalizar y lo guardamos como: filename.html . Tenga en cuenta que la ruta css/mystyles.css en su hoja de estilo es correcta, ya que será la ubicación del archivo CSS que se generará con SASS. Consulte la siguiente sintaxis de ejemplo. Aquí notará la página sin estilo. Ver los próximos pasos.
Paso 5: Crear el archivo CSS: generaremos nuestro archivo CSS a partir del archivo SASS. Ejecute el siguiente código en su terminal y vuelva a cargar su página:
sass --sourcemap=none sass/mystyles.scss:css/mystyles.css
Ahora, para observar los cambios, ejecute el siguiente código en su terminal:
sass --watch --sourcemap=none sass/mystyles.scss:css/mystyles.css
Paso 6: agregar sus propios estilos :
podemos agregar nuestros propios estilos o, por ejemplo, agregar los siguientes estilos a su archivo mystyles.scss .
@charset "utf-8"; // Set your brand colors $success: #2dfcb7; $warning: #f7c824; // Update Bulma's global variables $widescreen-enabled: false; $fullhd-enabled: false; // Update some of Bulma's component variables $body-background-color: $success; $control-border-width: 2px; // Import only what you need from Bulma @import "../node_modules/bulma/sass/utilities/_all.sass"; @import "../node_modules/bulma/sass/base/_all.sass"; @import "../node_modules/bulma/sass/elements/_all.sass"; @import "../node_modules/bulma/sass/form/_all.sass"; @import "../node_modules/bulma/sass/components/_all.sass"; @import "../node_modules/bulma/sass/layout/_all.sass";
Ejemplo 1: El siguiente ejemplo ilustra Bulma usando SASS-CLI.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/mystyle.css" /> </head> <body> <div class="container"> <h1 class="title">GeeksforGeeks</h1> <p class="subtitle"> Welcome to the Computer science portal. </p> <h2 class="subtitle has-text-white"> Want to tell us something? </h2> <textarea class="textarea" placeholder="Write your feedback here..."> </textarea> <br> <div class="buttons"> <a class="button is-warning">Submit</a> <a class="button is-danger">Clear</a> </div> </div> </body> </html>
CSS
@charset "utf-8"; // Set your brand colors $primary: #5de246; $success: #2dfcb7; $warning: #f7c824; // Update Bulma's global variables $widescreen-enabled: false; $fullhd-enabled: false; // Update some of Bulma's component variables $body-background-color: $primary; $control-border-width: 2px; $input-border-color: transparent; // Import only what you need from Bulma @import "../node_modules/bulma/sass/utilities/_all.sass"; @import "../node_modules/bulma/sass/base/_all.sass"; @import "../node_modules/bulma/sass/elements/_all.sass"; @import "../node_modules/bulma/sass/form/_all.sass";
Producción:
Ejemplo 2: Otro ejemplo que ilustra a Bulma usando SASS-CLI.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/mystyle.css" /> </head> <body> <div class="container"> <h1 class="title">GeeksforGeeks</h1> <p class="subtitle"> Welcome to the Computer science portal. </p> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Enter name"> </div> </div> <div class="field"> <label class="label">Username</label> <div class="control"> <input class="input" type="text" placeholder="Enter username"> </div> </div> <div class="field"> <label class="label">Email</label> <div class="control"> <input class="input" type="email" placeholder="Enter email"> <span class="icon is-small is-left"> <i class="fas fa-envelope"></i> </span> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-warning"> Submit </button> </div> <div class="control"> <button class="button is-link"> Cancel </button> </div> </div> </div> </body> </html>
CSS
@charset "utf-8"; // Set your brand colors $success: #2dfcb7; $warning: #f7c824; // Update Bulma's global variables $widescreen-enabled: false; $fullhd-enabled: false; // Update some of Bulma's component variables $body-background-color: $success; $control-border-width: 2px; $input-border-color: transparent; $input-shadow: none; // Import only what you need from Bulma @import "../node_modules/bulma/sass/utilities/_all.sass"; @import "../node_modules/bulma/sass/base/_all.sass"; @import "../node_modules/bulma/sass/elements/_all.sass"; @import "../node_modules/bulma/sass/form/_all.sass";
Producción:
Referencia: https://bulma.io/documentation/customize/with-sass-cli/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA