как предотвратить компиляцию переменных перед импортом в другой партиал в sass? - PullRequest
Новая
       62

как предотвратить компиляцию переменных перед импортом в другой партиал в sass?

0 голосов
/ 26 мая 2020

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

Я бы хотел, чтобы мой код отказаться от частичного _global.sass в некоторых темах, таких как page1.sass, page2.sass, и просто переопределить переменные в начале тем, а не непосредственно в коде. Таким образом, я бы просто повторно воздействовал на переменные в начале окончательного файла sass и не менял код каждый раз, когда его нужно было изменить, на каждой странице.

Для этого, я думаю, я должен найти способ чтобы _global.sass не компилировал свои переменные, чтобы я мог переопределить их в файле pageX.sass и, наконец, скомпилировать их.

в частичном файле _variables.sass 

$bg-color-page1: black
$bg-color-page2: red
$bg-color-page3: blue
$bg-color-page4: yellow
// etc.
$bg-color-page-global: grey /* you're obliged to affect a value when you declare a variable

в частичном _global.sass fil 

@import variables

body
    background-color: $bg-color-page-global

в окончательных файлах sass, например pageX или page1.sass 

@import variables
@import global

$bg-color-page-global: $bg-color-page1

body
    background-color: $bg-color-page-global

С этим кодом фон будет серым на всех страницах, использующих pageX.cass, потому что код _global.sass компилируется до его импорта в pageX.sass. Я хочу, чтобы он адаптировался, черный фон для page1.sass, красный для page2.sass и т. Д. c.

Теперь вы можете предотвратить компиляцию переменных перед импортом партиала в другой sass файл?

Спасибо за вашу бесценную помощь.

1 Ответ

0 голосов
/ 27 мая 2020

использовать ключ по умолчанию sass и работать с @ use и @ forward , @import устарел

  1. create style/main.scss

@use "modules/yourModule";
создать переменные цвета в style/settings/_settings.scss с! Default 

$color1: #000 !default;
$color2: #fff !default;
заменить значения по умолчанию в style/modules/_yourModule.scss 

@use 'sass:map';
@use '../settings/settings';

// overwrite here
$color1: #ccc;

.yourModule {
  color: $color1;
}

надеюсь, что это поможет.

...