Могу ли я переопределить переменные sass после их импорта?

Я использую bootstrap-sass в моем приложении rails. Я хочу переопределить переменную bootstrap-sass $navbarBackground. bootstrap-sass также определяет переменные для цветов. Поэтому вместо использования шестнадцатеричного кода я хотел бы использовать переменную $red, которую он определяет.

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

Однако, если я сделаю следующее -

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

Это даст мне ошибку, так как переменная $red определяет только файл начальной загрузки, который импортируется в следующей строке.

Итак, можно ли переопределить переменные sass после их импорта?

ИЗМЕНИТЬ

Я нажал проект на github - https://github.com/murtaza52/rails-base

И URL доступен на localhost: 3000/posts/

Ответ 1

Вот что я понял. Вы можете переопределить переменные 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.

Ответ 2

Я делаю это, импортируя отдельные 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;
}

Ответ 3

Bootstrap-sass определяет множество переменных в /bootstrap/_variables.scss в стиле $brand-success: #5cb85c !default;. Ключевое слово sass !default означает:

Вы можете назначить переменные, если они уже присвоены, добавив флаг по умолчанию в конец значения. Это означает, что если переменная уже была назначена, она не будет повторно назначена, но если она еще не имеет значения, ей будет дана одна. (→ sass documentation)

Это означает, что вам нужно сначала определить свои переменные, прежде чем импортировать bootstrap-sass. Я делаю это так:

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

Где мой файл project_variables.scss содержит, среди прочего, точно все переменные бутстрапа, которые я хочу переопределить.

Ответ 4

загрузочные переменные используют правило !default.

Стандарт по умолчанию:

Вы можете назначить переменные, если они уже присвоены, добавив флаг по умолчанию в конец значения. Это означает, что если переменная уже была назначена, она не будет повторно назначена, но если она еще не имеет значения, ей будет дана одна.

Это выглядит так:

$example: 'value' !default;

Таким образом, использование Sass !default похоже на добавление "если это уже присвоено" квалификатору к вашим назначениям переменных