web-dev-qa-db-fra.com

puis-je remplacer les variables sass après leur importation?

J'utilise bootstrap-sass dans mon Rails. Je veux remplacer une variable bootstrap-sass $ navbarBackground. Bootstrap-sass définit également des variables pour les couleurs. Donc, au lieu d'utiliser le code hexadécimal, je le ferais aime utiliser la variable $ red qu'elle définit.

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

Cependant, si je fais ce qui suit -

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

Cela me donnera une erreur car la variable $ red n'est définie que le fichier bootstrap qui est importé dans la ligne suivante.

Existe-t-il un moyen de remplacer les variables sass après leur importation?

ÉDITER

J'ai poussé le projet sur github - https://github.com/murtaza52/Rails-base

Et l'url est accessible sur localhost: 3000/posts /

twitter-bootstrapsass
34
murtaza52

Voici ce que j'ai réalisé. Vous pouvez remplacer les variables sass après leur importation. Mais la modification ne sera reflétée que dans l'utilisation après avoir remplacé. Puisque navbar a obtenu des styles avant de remplacer $navbarBackground, le simple fait de remplacer la variable ne changera pas le style. Voir l'exemple ci-dessous.

@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.
22
Kulbir Saini

Bootstrap-sass définit de nombreuses variables dans / bootstrap/_variables.scss dans le style $brand-success: #5cb85c !default;. Le mot clé sass !default veux dire:

Vous pouvez affecter des variables si elles ne sont pas déjà affectées en ajoutant l'indicateur! Default à la fin de la valeur. Cela signifie que si la variable a déjà été affectée à, elle ne sera pas réaffectée, mais si elle n'a pas encore de valeur, elle en recevra une. ( → documentation sass )

Cela signifie que vous n'avez qu'à définir vos variables d'abord , avant d'importer bootstrap-sass. Je le fais comme ça:

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

Où mon fichier project_variables.scss contient - entre autres - exactement toutes les variables bootstrap que je veux remplacer.

18
Simon

Je le fais en important des fichiers scss individuels dans mon fichier application.scss. Au lieu d'écrire ceci:

@import "bootstrap";

J'importe d'abord des variables, les personnalise, et ensuite seulement j'importe le reste du 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;
}
17
Levara

les variables d'amorçage utilisent le !default règle.

Règle par défaut:

Vous pouvez affecter des variables si elles ne sont pas déjà affectées en ajoutant l'indicateur! Default à la fin de la valeur. Cela signifie que si la variable a déjà été affectée à, elle ne sera pas réaffectée, mais si elle n'a pas encore de valeur, elle en recevra une.

Voici à quoi ça ressemble:

$example: 'value' !default;

Donc, en utilisant Sass !default revient à ajouter un qualificatif "sauf si cela est déjà attribué" à vos affectations de variables

1
Giovanni Far