Sass değişkenlerini içe aktarıldıktan sonra geçersiz kılabilir miyim?

Question

Raylarım uygulamasında bootstrap-sass kullanıyorum. Bir bootstrap-sass değişkenini $ navbarBackground geçersiz kılmak istiyorum. bootstrap-sass ayrıca renkler için değişkenleri tanımlar. Yani hex kodunu kullanmak yerine, tanımladığı $ red değişkenini kullanmak istiyorum.

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

ben aşağıdakileri yapın Ancak eğer - Değişken $ kırmızı yalnızca sonraki satırda alınır önyükleme dosyasını tanımlandığı gibidir

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

Bana bir hata verecektir.

Sass değişkenlerini içe aktarıldıktan sonra geçersiz kılmanın bir yolu var mı?

DÜZENLEME

github projeyi itmiş - https://github.com/murtaza52/rails-base

Ve url localhost üzerinde erişilebilir: 3000/mesaj/İşte

Answer 1

anladım bir şeydir. Sass değişkenlerini içe aktarıldıktan sonra geçersiz kılabilirsiniz. Ancak değişiklik, yalnızca geçersiz kılındıktan sonra kullanımda yansıtılacaktır. navbar, $navbarBackground'u aşmadan önce stilleri aldığından, yalnızca değişkeni geçersiz kılmak stil değişmeyecektir. Aşağıdaki örneğe bakınız.

@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

benim application.scss dosyasına bireysel SCSS dosyalarını ithal ederek yapıyorum. Bunun yerine bu yazı:

@import "bootstrap"; 

Ben ilk ithalat değişkenleri, bunları özelleştirmek ve ancak o zaman bootstrap kalanını ithal ediyoruz.

// 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-küstahlık tarzında $brand-success: #5cb85c !default; yılında /bootstrap/_variables.scss birçok değişkenleri belirlemedir. küstahlık kelime !default şu anlama gelir:! zaten değerin sonuna kadar varsayılan işaretini ekleyerek atanmaz eğer değişkenlere atayabilirsiniz

. Bu, değişkenin önceden atandığında yeniden atanmayacağı, ancak henüz bir değeri yoksa, bir tane verileceği anlamına gelir. (→sass documentation)

Bu sadece önyükleme-küstahlığı aktarmadan önce, sizin değişkenleri ilk tanımlamak zorunda anlamına gelir. Öyle gibi yapmak: my dosya project_variables.scss içeriyor

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

- diğerleri arasında - Tam olarak tüm önyükleme değişkenler Ben geçersiz kılmak istiyorum.

Answer 4

Önyükleme değişkenleri !default kuralını kullanır.

Standart kuralı:! Zaten değerin sonuna kadar varsayılan işaretini ekleyerek atanmaz ise

Sen değişkenlere atayabilirsiniz.Bu, değişkenin önceden atandığında yeniden atanmayacağı, ancak henüz bir değeri yoksa, bir tane verileceği anlamına gelir. Göründüğü budur

gibi:

$example: 'value' !default; 

Yani Sass !default hile yaptığını, sizin değişken atamaları