¿Cómo usar SASS para crear un nuevo conjunto de estilos de color en Bootstrap 4?

Posted on by Rudeus Greyrat

De manera predeterminada, Bootstrap 4 proporcionó todos los estilos de colores que están disponibles como variables SASS y un mapa SASS en el archivo scss/_variables.scss . En versiones posteriores, se proporcionará el tono ultra nuevo, como una paleta de escala de grises. Hay muchas series de colores definidas en el mapa SASS que se enlaza para generar conjuntos de reglas personalizados. Los colores de Bootstrap 4 incluyen colores de tema y colores de componentes para que este mapa SASS juegue un papel vital.

Inicializando variables de color usando SASS:

  • Ejemplo de mapa SASS: archivo _colors.scss

    "white": $white,
    $hotpink:hotpink;
    $lightsalmon:#fa9872;
    $lightgreen:#76FF03;
    $palegreen:#00E676;
    $gray-900:#212121;
    $colors: (
    "white": $white,
        "hotpink": $hotpink,
        "palegreen":$palegreen,
        "lightgreen":$lightgreen,
        "lightsalmon":$lightsalmon,
        "gray-dark": $gray-900) !default;

Enfoque 1: aquí manejamos los colores de los botones para crear un mapa de color SASS después de crear un mapa de color SASS , importarlo con @import y crear @mixin en el mismo archivo. En general, la clase SASS para los colores de los botones se basa principalmente en «btn-variant» y btn-ouline-variant. Aquí variant son las utilidades de color como primario, secundario, etc. Genere @mixin para esos btn-variant y btn-outline-variant. Luego use @include para incluir @mixin generado anteriormente en la clase respectiva de archivo SASS de la siguiente manera.

  • Archivo SASS: gfg.scss

    /* Importing colors map */
    @import'./colors';
       
    /* Generating @mixin based on 'btn-variant' */
    @mixin btn-variant ($color1, $color2,
                $color-hover: color-yiq($color1)) {
        background-color: $color1;
        border-color: $color1;
        color:$color2;
    }
      
    /* Generating @mixin based on 'btn-outline-variant' */
    @mixin btn-outline-variant($color1, $color2) {
        background-color: $color2;
        border-color: $color1;
        color:$color1;
    }
      
    /* Including @mixin based on 'btn-variant' and
        hover properties within a custom class*/
    .btn-hotpink {
        @include btn-variant($hotpink, white, $hotpink);
        &:hover {
            background-color: $hotpink !important;
            color: $white !important;
        }
    }
      
    .btn-lightgreen {
        @include btn-variant($lightgreen, white, $lightgreen);
       
        &:hover {
            background-color: $lightgreen !important;
            color: $white !important;
        }
    }
      
    .btn-lightsalmon {
        @include btn-variant($lightsalmon, white, $lightsalmon);
       
        &:hover {
            background-color: $lightsalmon !important;
            color: $white !important;
        }
    }
       
    /* Including @mixin based on 'btn-outline-variant'
      and hover properties within a custom class */
    .btn-outline-hotpink {
        @include btn-outline-variant($hotpink, white);
        &:hover {
            background-color: $hotpink !important;
            color: $white !important;
        }
    }
      
    .btn-outline-lightgreen {
        @include btn-outline-variant($lightgreen, white);
       
        &:hover {
            background-color: $lightgreen !important;
            color: $white !important;
        }
    }
      
    .btn-outline-lightsalmon {
        @include btn-outline-variant($lightsalmon, white);
       
        &:hover {
            background-color: $lightsalmon !important;
            color: $white !important;
        }
    }
  • Archivo CSS compilado: gfg.css

    .btn-hotpink {
        background-color: hotpink;
        border-color: hotpink;
        color: white;
    }
       
    .btn-hotpink:hover {
        background-color: hotpink !important;
        color: #FFFFFF !important;
    }
       
    .btn-outline-hotpink {
        background-color: white;
        border-color: hotpink;
        color: hotpink;
    }
       
    .btn-outline-hotpink:hover {
        background-color: hotpink !important;
        color: #FFFFFF !important;
    }
       
    .btn-lightgreen {
        background-color: #76FF03;
        border-color: #76FF03;
        color: white;
    }
       
    .btn-lightgreen:hover {
        background-color: #76FF03 !important;
        color: #FFFFFF !important;
    }
       
    .btn-outline-lightgreen {
        background-color: white;
        border-color: #76FF03;
        color: #76FF03;
    }
       
    .btn-outline-lightgreen:hover {
        background-color: #76FF03 !important;
        color: #FFFFFF !important;
    }
       
    .btn-lightsalmon {
        background-color: #fa9872;
        border-color: #fa9872;
        color: white;
    }
       
    .btn-lightsalmon:hover {
        background-color: #fa9872 !important;
        color: #FFFFFF !important;
    }
       
    .btn-outline-lightsalmon {
        background-color: white;
        border-color: #fa9872;
        color: #fa9872;
    }
       
    .btn-outline-lightsalmon:hover {
        background-color: #fa9872 !important;
        color: #FFFFFF !important;
    }
    /* sourceMappingURL=bs4buttonsex01.css.map */
  • Archivo HTML: index.html

    <!DOCTYPE html>
    <html lang="en">
       
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
          
        <link rel="stylesheet" href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
          
        <link rel="stylesheet" href="./gfg.css">
          
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        </script>
          
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
          
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
    </head>
       
    <body>
        <div class="container">
            <center>
                <h1 style="color:green;padding:13px;">
                    GeeksforGeeeks
                </h1>
                  
                <br><br>
                  
                <p>
                    Bootstrap4 compiled CSS 'btn-lightgreen,
                    btn-lightsalmon & btn-hotpink' and
                    'btn-outline-lightgreen, 
                    btn-outline-lightsalmon & 
                    btn-outline-hotpink' using SASS
                </p>
                  
                <div class="btn-group">
                    <button type="button" 
                            class="btn btn-lightgreen">
                        lightgreen
                    </button>
                      
                    <button type="button" 
                            class="btn btn-lightsalmon">
                        lightsalmon
                    </button>
                      
                    <button type="button" 
                            class="btn btn-hotpink">
                        purple
                    </button>
                </div>
                  
                <br><br>
                  
                <div class="btn-group">
                    <button type="button" 
                            class="btn btn-outline-lightgreen">
                        lightgreen
                    </button>
                      
                    <button type="button" 
                            class="btn btn-outline-lightsalmon">
                        lightsalmon
                    </button>
                      
                    <button type="button" 
                            class="btn btn-outline-hotpink">
                        purple
                    </button>
                </div>
            </center>
        </div>
    </body>
       
    </html>
  • Producción:

Enfoque 2: Manejo de colores de fondo y texto, después de crear un mapa de color SASS $, impórtelo con @import y cree @mixin en el mismo archivo. En general, la clase SASS para los colores de los botones se basa principalmente en «bg-variant» y text-variant. Aquí variant son las utilidades de color como primario, secundario, etc. Genere @mixin para esos bg-variant y text-variant. Luego use @include para incluir @mixin generado anteriormente en la clase respectiva del archivo SASS de la siguiente manera:

  • Archivo SASS: geeks.scss

    @import'./colors';
      
    @mixin bg-variant ($color1, $color2) {
        background-color: $color1;
        color: $color2;
    }
      
    @mixin text-variant($color1) {
        color: $color1;
    }
      
    .bg-palegreen {
        @include bg-variant($palegreen, white);
    }
      
    .text-palegreen {
        @include text-variant($palegreen);
    }
    .bg-gray900{
        @include bg-variant($gray-900, white);
    }
    .text-gray900 {
        @include text-variant($gray-900);
    }
  • Archivo CSS compilado: geeks.css

    .bg-palegreen {
        background-color: #00E676;
        color: white;
    }
       
    .text-palegreen {
        color: #00E676;
    }
       
    .bg-gray900 {
        background-color: #212121;
        color: white;
    }
       
    .text-gray900 {
        color: #212121;
    }
    /*# sourceMappingURL=bs4buttonsex02.css.map */
    /*# sourceMappingURL=bs4buttonsex02.css.map */
  • Archivo HTML: index2.html

    <!DOCTYPE html>
    <html lang="en">
       
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
          
        <link rel="stylesheet" href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
          
        <link rel="stylesheet" href="./geeks.css">
          
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        </script>
          
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
          
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
    </head>
       
    <body>
        <div class="container">
            <center>
                <h1 style="color:green;padding:13px;">
                    GeeksforGeeeks
                </h1>
                  
                <br><br>
                  
                <p>
                    Bootstrap4 compiled CSS 'bg-palegreen & 
                    bg-gray900' and 'text-palegreen & 
                    text-gray900'using SASS
                </p>
                  
                <div class="d-inline p-2 bg-palegreen text-white">
                    d-inline
                </div>
                <div class="d-inline p-2 bg-gray900 text-white">
                    d-inline
                </div>
                <div class="d-inline p-2 bg-palegreen text-white">
                    d-inline
                </div>
                <div class="d-inline p-2 bg-light text-palegreen">
                    d-inline
                </div>
                <div class="d-inline p-2 bg-palegreen text-white">
                    d-inline
                </div>
                <div class="d-inline p-2 bg-white text-gray900">
                    d-inline
                </div>
            </center>
        </div>
    </body>
       
    </html>
  • Producción:

Referencia: https://getbootstrap.com/docs/4.4/getting-started/theming/#color

Publicación traducida automáticamente

Artículo escrito por VigneshKannan3 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 *