twitter bootstrap - customize - ¿Puedo anular las variables sass después de que hayan sido importadas?

sass variables angular

Question

Estoy usando bootstrap-sass en mi aplicación Rails. Quiero anular una variable bootstrap-sass $ navbarBackground. bootstrap-sass también define variables para los colores. Entonces, en lugar de usar el código hexadecimal, me gustaría usar la variable $ red que define.

$navbarBackground: #9d261d;
@import "bootstrap";

Sin embargo si hago lo siguiente:

$navbarBackground: $red;
@import "bootstrap";

Me dará un error, ya que la variable $ red solo se define en el archivo de rutina de carga que se importa en la siguiente línea.

Entonces, ¿hay alguna manera de anular las variables sass después de que hayan sido importadas?

EDITAR

He empujado el proyecto en github - https://github.com/murtaza52/rails-base

Y la url es accesible en localhost: 3000 / posts /

Answer 1

Aquí es lo que me di cuenta. Puede anular las variables sass después de que se hayan importado. Pero la modificación se reflejará solo en el uso después de anular. Ya que la navbar tiene estilos antes de que usted $navbarBackground , simplemente al anular la variable no cambiará el estilo. Vea el ejemplo a continuación.

@import "bootstrap";
@navbarBackground: $red;
// This doesn''t work. Navbar will still be same color.
// But if you do write styles for navbar again
.navbar-inner { background: $navbarBackground; }
// Now, Navbar will have a red background
@import "bootstrap";
$blue: $white;
// After this line, whenever your reference $blue, it''ll generate white color.

Answer 2

Bootstrap-sass está definiendo muchas variables en /bootstrap/_variables.scss en el estilo $brand-success: #5cb85c !default; . ¡La palabra clave sass !default significa:

Puede asignar a variables si aún no están asignadas agregando la bandera predeterminada al final del valor. Esto significa que si la variable ya se ha asignado a, no se volverá a asignar, pero si aún no tiene un valor, se le dará uno. ( → documentación de sass )

Esto significa que solo tiene que definir sus variables primero , antes de importar bootstrap-sass. Lo hago así:

@import "common/project_variables";
@import "bootstrap";

Donde mi archivo project_variables.scss contiene, entre otras, exactamente todas las variables de arranque que quiero anular.

Answer 3

Las variables de arranque utilizan la regla !default .

Regla predeterminada:

Puede asignar a variables si aún no están asignadas agregando la bandera predeterminada al final del valor. Esto significa que si la variable ya se ha asignado a, no se volverá a asignar, pero si aún no tiene un valor, se le dará uno.

Esto es lo que parece:

$example: ''value'' !default;

Por lo tanto, usar Sass !default es como agregar un calificador “a menos que ya esté asignado” a sus asignaciones de variables

Answer 4

Lo hago importando archivos scss individuales a mi archivo application.scss. En lugar de escribir esto:

@import "bootstrap";

Primero importo variables, las personalizo, y solo luego importé el resto del bootstrap.

// Core variables and mixins
@import "../../../vendor/assets/stylesheets/bootstrap/variables";
$body-bg: #333333;
@import "../../../vendor/assets/stylesheets/bootstrap/mixins";
// Reset
@import "../../../vendor/assets/stylesheets/bootstrap/normalize";
@import "../../../vendor/assets/stylesheets/bootstrap/print";
// Core CSS
@import "../../../vendor/assets/stylesheets/bootstrap/scaffolding";
@import "../../../vendor/assets/stylesheets/bootstrap/type";
@import "../../../vendor/assets/stylesheets/bootstrap/code";
@import "../../../vendor/assets/stylesheets/bootstrap/grid";
@import "../../../vendor/assets/stylesheets/bootstrap/tables";
@import "../../../vendor/assets/stylesheets/bootstrap/forms";
@import "../../../vendor/assets/stylesheets/bootstrap/buttons";
// Components
@import "../../../vendor/assets/stylesheets/bootstrap/component-animations";
@import "../../../vendor/assets/stylesheets/bootstrap/glyphicons";
@import "../../../vendor/assets/stylesheets/bootstrap/dropdowns";
@import "../../../vendor/assets/stylesheets/bootstrap/button-groups";
@import "../../../vendor/assets/stylesheets/bootstrap/input-groups";
@import "../../../vendor/assets/stylesheets/bootstrap/navs";
@import "../../../vendor/assets/stylesheets/bootstrap/navbar";
@import "../../../vendor/assets/stylesheets/bootstrap/breadcrumbs";
@import "../../../vendor/assets/stylesheets/bootstrap/pagination";
@import "../../../vendor/assets/stylesheets/bootstrap/pager";
@import "../../../vendor/assets/stylesheets/bootstrap/labels";
@import "../../../vendor/assets/stylesheets/bootstrap/badges";
@import "../../../vendor/assets/stylesheets/bootstrap/jumbotron";
@import "../../../vendor/assets/stylesheets/bootstrap/thumbnails";
@import "../../../vendor/assets/stylesheets/bootstrap/alerts";
@import "../../../vendor/assets/stylesheets/bootstrap/progress-bars";
@import "../../../vendor/assets/stylesheets/bootstrap/media";
@import "../../../vendor/assets/stylesheets/bootstrap/list-group";
@import "../../../vendor/assets/stylesheets/bootstrap/panels";
@import "../../../vendor/assets/stylesheets/bootstrap/wells";
@import "../../../vendor/assets/stylesheets/bootstrap/close";
// Components w/ JavaScript
@import "../../../vendor/assets/stylesheets/bootstrap/modals";
@import "../../../vendor/assets/stylesheets/bootstrap/tooltip";
@import "../../../vendor/assets/stylesheets/bootstrap/popovers";
@import "../../../vendor/assets/stylesheets/bootstrap/carousel";
// Utility classes
@import "../../../vendor/assets/stylesheets/bootstrap/utilities";
@import "../../../vendor/assets/stylesheets/bootstrap/responsive-utilities";
body {
padding-top: 60px;
}