可以在導入後重寫sass變量嗎？

我在我的rails應用程序中使用bootstrap-sass。我想重寫一個bootstrap-sass變量$ navbarBackground。 bootstrap-sass還定義了顏色的變量。因此，我不想使用十六進制代碼，而是使用它定義的變量$ red。可以在導入後重寫sass變量嗎？

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

但是，如果我做了以下 -

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

它會給我一個錯誤的變量$紅色只被定義它的下一行導入的引導文件。

所以有一種方法，我可以覆蓋sass變量後，他們已被導入？

編輯

我已經推動該項目在github - https://github.com/murtaza52/rails-base

，網址爲本地主機上訪問：3000 /職位/

來源

2012-08-02 murtaza52

這是一個什麼我意識到。您可以在導入後重寫sass變量。但是修改只會在覆蓋後的用法中反映出來。由於navbar在覆蓋$navbarBackground之前就已經有了樣式，只是覆蓋該變量不會改變樣式。看下面的例子。

@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.

來源

2012-08-03 05:50:13

感謝Kulbir，該訣竅！但是，當我通過打開gem來查看_bootstrap.scss時，我發現它開始於以下代碼行：//核心變量和mixins @import「bootstrap/variables」; //修改自定義顏色，字體大小等 @import「bootstrap/mixins」;'我可以先導入變量並修改它們，然後導入整個引導程序？ – murtaza52 2012-08-04 04:55:35

如果你導入'bootstrap/variables'，修改變量然後導入'bootstrap'，我想這些變量會被重寫。因爲bootstrap會再次導入'bootstrap/variables'。不過值得一試。 – 2012-08-04 06:09:42

這對我工作感謝！ – Proxy32 2012-08-17 21:06:53

我正在通過導入個人scss文件到我的application.scss文件。而不是寫這個的：

@import "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; 
}

來源

2013-12-22 16:16:09 Levara

引導，青菜在風格$brand-success: #5cb85c !default;定義在/bootstrap/_variables.scss很多變數。 sass關鍵字!default表示：

如果尚未將！default標誌添加到值的末尾，您可以分配給變量。這意味着如果變量已經被賦值，它將不會被重新賦值，但是如果它還沒有賦值，它將會被賦值。（→sass documentation）

這意味着你只需要定義變量第一，進口自舉薩斯之前。我這樣做，像這樣：

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

哪裏我的文件project_variables.scss包含 - 等 - 正是所有引導變量我要重寫。

來源

2015-12-30 09:57:03 Simon

如果您使用較少引導程序的變量，導入順序恰好相反。如果情況不太好，你可以@import''bootstrap';'@import「common/project_variables」之前''' – Yiling 2016-08-27 06:33:32

謝謝你修正了一切，在* bootstrap之前導入變量*永遠不知道'！default'做了什麼，真棒回答！ – JREAM 2017-09-18 04:26:15

引導變量使用!default規則。

默認規則：

您可以分配到變量，如果它們尚未加入默認的標誌值的分配結束！這意味着如果變量已經被賦值，它將不會被重新賦值，但是如果它還沒有賦值，它將會被賦值。

這是什麼樣子：

$example: 'value' !default;

因此，使用薩斯!default是像添加「除非這是已分配」預選賽的變量賦值

來源

2016-08-11 15:36:21

可以在導入後重寫sass變量嗎？

回答

相關問題