2

Tengo entendido que los framework css trabajan sus componentes a través de sass, pero he intentado cambiar el valor de las variables dentro del código sass de la librería pero no ha funcionado, el framework que uso en si no es un framework, sino una modificación de bootstrap, es un kit, pero funciona casi igual

he modificado el archivo de la libreria: variables.scss

específicamente éstas líneas:

// Global settings

$enable-caret:              true !default;
$enable-rounded:            true !default;
$enable-shadows:            true !default;
$enable-gradients:          false !default;
$enable-transitions:        true !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;


// Color system

$white:    #ffffff !default;
$gray-100: #f6f9fc !default;
$gray-200: #e9ecef !default;
$gray-300: #e3e3e3 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;   // Line footer color
$gray-700: #525f7f !default;   // Line p color
$gray-800: #32325d !default;   // Line heading color
$gray-900: #212529 !default;
$link-disabled:              #666666 !default;
$transparent-bg:             transparent !default;
$light-bg:                   #f5f6fa !default;
$dark-background:            #555555 !default;


$grays: () !default;
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

$blue:    #5e72e4 !default;
$indigo:  #5603ad !default;
$purple:  #8965e0 !default;
$pink:    #f3a4b5 !default;
$red:     #f5365c !default;
$orange:  #fb6340 !default;
$yellow:  #ffd600 !default;
$green:   #2dce89 !default;
$teal:    #11cdef !default;
$cyan:    #2bffc6 !default;

$line-height-lg:              1.625rem !default;
$line-height-sm:              1.5 !default;
$line-height:                 1.35em         !default;


$opacity-gray-3:             rgba(222,222,222, .3) !default;
$opacity-gray-5:             rgba(222,222,222, .5) !default;
$opacity-gray-8:             rgba(222,222,222, .8) !default;


$opacity-5:                  rgba(255,255,255, .5) !default;
$opacity-6:                  rgba(255,255,255, .6) !default;
$opacity-8:                  rgba(255,255,255, .8) !default;



$opacity-1:                  rgba(255,255,255, .1) !default;
$opacity-2:                  rgba(255,255,255, .2) !default;


// end beniamin

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "light":      $gray-400,
  "lighter":    $gray-200,
  "gray-dark":  $gray-800
), $colors);

$default-color-opacity:      rgba(182, 182, 182, .6) !default;
$orange-color:               #f96332 !default;

$default:       #344675 !default;
$primary:       blue !default;
$secondary:     #f4f5f7 !default;
$success:       #00f2c3 !default;
$info:          #1d8cf8 !default;
$warning:       #ff8d72 !default;
$danger:        #fd5d93 !default;
$black:         #222a42 !default;

El kit se llama BLK Design system

8
  • 1
    y si mínimo muestras lo que has intentado en código, añades que framework, no vamos a adivinar
    – user75901
    Commented el 7 nov. 2018 a las 13:51
  • 1
    Ya edité la pregunta, mira y coméntame que opinas Commented el 7 nov. 2018 a las 13:56
  • Necesitas aplicar el cambio a variables.css y refrescar la cache del navegador para apreciar el nuevo color. Commented el 7 nov. 2018 a las 14:06
  • 1
    Tienes que compilar el SASS/SCSS para que te genere el nuevo CSS modificado.
    – Alvaro Montoro
    Commented el 7 nov. 2018 a las 14:09
  • 1
    Alvaro tienes razón, había olvidado compilar de nuevo el sass, ahora si funciono, muchas gracias Commented el 7 nov. 2018 a las 14:13

1 respuesta 1

3

Sass es un metalenguaje de CSS, es decir, es un lenguaje de script que es traducido a CSS. Del mismo modo que, por ejemplo, los cambios hechos en un código fuente en C no se reflejan en el programa hasta que se compila, los cambios que haces en Sass/SCSS no se reflejan automáticamente en el fichero CSS, sino que deben traducirse primero.

Entonces para solucionar el problema compila el Sass/SCSS para que genere un nuevo CSS modificado donde aparezcan tus cambios.

Dependiendo de cómo tengas instalado Sass en tu computadora, tendrás que hacer algo parecido a esto para compilar a CSS:

sass entrada.scss salida.css

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.