Bulma con Node-sass

Posted on by Rudeus Greyrat

En este artículo, veremos cómo usar Bulma con node-sass . 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 de las formas de lograr esto es usando node-sass, que es un compilador sass que crea un archivo CSS usando archivos sass. A continuación se muestra el proceso que demuestra la modificación completa o el estilo de un elemento de Bulma.

Usando Bulma con node-sass: A continuación se dan todos los pasos que se requieren para diseñar un elemento de Bulma usando node-sass junto con toda su sintaxis.

Paso 1: Creación de un archivo package.json: Primero, cree una nueva carpeta donde desee crear sus archivos sass. En la terminal, primero, navegue hasta el directorio de carpetas y escriba el siguiente comando:

npm init

Cuando se le solicite que escriba el punto de entrada , escriba -sass/mystyle.scss. Ahora, el comando anterior creará un archivo package.json en la carpeta que ha creado. 

Paso 2: instalar dependencias de desarrollo de Nodes: para diseñar los elementos de Bulma, necesitamos instalar 2 paquetes de Nodes: 

npm install node-sass --save-dev
npm install bulma --save-dev

Paso 3: Creación de un archivo SASS: Cree una carpeta SASS y allí cree un archivo llamado: mystyle.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/mystyle.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.

filename.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">
            A Computer Science portal
        </p>
  
  
        <h1 class="subtitle">Become a Member</h1>
  
        <h2>Already a Geek!</h2>
  
        <div class="control">
            <label class="radio">
                <input type="radio" name="answer">
                Yes
            </label>
            <label class="radio">
                <input type="radio" name="answer">
                No
            </label>
        </div>
        <br>
  
        <div class="buttons">
            <a class="button is-warning">Log In</a>
            <a class="button is-light">Sign Up</a>
        </div>
    </div>
</body>
  
</html>

Aquí notará la página sin estilo. Ver los próximos pasos.

Paso 5: agregar secuencias de comandos de Node para crear el archivo CSS: generaremos nuestro archivo CSS a partir del archivo SASS, pero para eso, necesitamos agregar secuencias de comandos de Node. Agregue el siguiente código en el archivo package.json .

"scripts": {
    "css-build": "node-sass --omit-source-map-url sass/mystyle.scss css/mystyle.css",
    "css-watch": "npm run css-build -- --watch",
    "start": "npm run css-watch"
}

Aquí,

  • css-build toma sass/mystyle.scss como entrada y genera c ss/mystyle.css , mientras omite el mapa de origen.
  • css-watch genera el CSS y observa cualquier modificación.
  • start se usa para ejecutar css-watch.

Después de agregar el código anterior, ejecute el siguiente código en su terminal:

npm run css-build

Producción:

Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyle.css

Observe los cambios en su código ejecutando el siguiente comando:

npm start

Paso 6: agregar sus propios estilos: podemos agregar nuestros propios estilos o, por ejemplo, agregar los siguientes estilos a su archivo mystyle.scss .

mystyle.scss

@charset "utf-8";
  
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
  
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
  
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
  
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

Ejemplo 1: El siguiente ejemplo ilustra a Bulma usando node-sass.

filename.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">
            A Computer Science portal
        </p>
  
  
        <div class="field">
            <p class="control">
                <span class="select">
                    <select>
                        <option>C++</option>
                        <option>C</option>
                        <option>Java</option>
                        <option>Python</option>
                    </select>
                </span>
            </p>
  
        </div>
  
        <div class="buttons">
            <a class="button is-success">Log In</a>
            <a class="button is-light">Sign Up</a>
        </div>
    </div>
</body>
  
</html>

mystyle.scss

@charset "utf-8";
  
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
  
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
$white: #FFFFFF;
  
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
  
// Update some of Bulma's component variables
$body-background-color: $white;
$control-border-width: 2px;
$input-border-color: green;
$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/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";

Producción:

Ejemplo 2: Otro ejemplo que ilustra a Bulma usando node-sass con diferentes estilos.

filename.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">
            A Computer Science portal
        </p>
  
  
        <h1 class="subtitle">Become a Member</h1>
  
        <h2>Already a Geek!</h2>
  
        <div class="control">
            <label class="radio">
                <input type="radio" name="answer">
                Yes
            </label>
            <label class="radio">
                <input type="radio" name="answer">
                No
            </label>
        </div>
        <br>
  
        <div class="buttons">
            <a class="button is-warning">Log In</a>
            <a class="button is-light">Sign Up</a>
        </div>
    </div>
</body>
  
</html>

mystyle.scss

@charset "utf-8";
  
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
  
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$success: #45c550;
$beige-lighter: #EFF0EB;
$white: #FFFFFF;
  
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$text: white;
$widescreen-enabled: false;
$fullhd-enabled: false;
  
// Update some of Bulma's component variables
$body-background-color: $success;
$control-border-width: 2px;
$input-border-color: green;
$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/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";

Producción:

Referencia: https://bulma.io/documentation/customize/with-node-sass/

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *