Czy mogę przesłonić zmienne sass po ich zaimportowaniu?

Question

Używam bootstrap-sass w mojej aplikacji rails. Chcę zastąpić zmienną bootstrap-sass $ navbarBackground. bootstrap-sass definiuje również zmienne dla kolorów. Zamiast więc używać kodu szesnastkowego, chciałbym użyć zmiennej $ red, którą definiuje.

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

Jednakże jeśli I wykonaj następujące czynności -

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

To daje mi błąd jak zmienna $ czerwony jest zdefiniowana tylko plik bootstrap, który jest importowany w następnym wierszu.

Więc czy istnieje sposób, w jaki mogę przesłonić zmienne sass po ich zaimportowaniu?

EDIT

Mam pchnął projekt na github - https://github.com/murtaza52/rails-base

oraz adres URL jest dostępny na localhost: 3000/postów/

Answer 1

Oto co mam na sobie. Możesz przesłonić zmienne sass po ich zaimportowaniu. Ale modyfikacja zostanie odzwierciedlona tylko w użyciu po nadpisaniu. Od navbar otrzymałeś style, zanim przesłoniłeś $navbarBackground, tylko przesłonięcie zmiennej nie zmieni stylu. Zobacz poniższy przykład.

@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

Robię to poprzez importowanie poszczególnych plików scss do mojego pliku application.scss. Zamiast tego:

Najpierw zaimportuję zmienne, dostosuję je i dopiero potem zaimportuję resztę bootstrapu.

// 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; 
} 

Answer 3

Bootstrap-Sass jest zdefiniowanie wielu zmiennych w /bootstrap/_variables.scss w stylu $brand-success: #5cb85c !default;. Słowo kluczowe sass !default oznacza:

Możesz przypisać do zmiennych, jeśli nie są jeszcze przypisane, dodając flagę! Default do końca wartości. Oznacza to, że jeśli zmienna została już przypisana, nie zostanie ona ponownie przypisana, ale jeśli nie ma jeszcze wartości, zostanie jej podana. (→sass documentation)

Oznacza to po prostu trzeba zdefiniować zmienne pierwszy przed importem bootstrap-Sass. Robię to tak:

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

Gdzie mój plik project_variables.scss zawiera - między innymi - dokładnie wszystkie zmienne bootstrap Chcę zastąpić.

Answer 4

zmienne bootstrap używają reguły !default.

Domyślna zasada:

można przypisać do zmiennych, jeśli nie są już przypisane dodając domyślny flagę do końca wartość!.Oznacza to, że jeśli zmienna została już przypisana, nie zostanie ona ponownie przypisana, ale jeśli nie ma jeszcze wartości, zostanie jej podana.

To jak to wygląda:

$example: 'value' !default; 

Więc za pomocą Sass !default jest jak dodanie „o ile nie jest już przypisany” kwalifikator do zmiennych zadań