Jekyll экспортирует переменные SASS в переменные Javascript

У меня есть проект (набор пользовательского интерфейса, такой же, как Bootstrap), построенный с использованием Jekyll и Jekyll-Assets, и я пытаюсь понять, возможно ли создать либо Подключаемый модуль Jekyll или подключаемый модуль Jekyll-Assets, чтобы преобразовать все переменные SASS из файла _variables.scss в переменную объекта в Javascript. > файл. Идея заключалась в том, чтобы преобразовать:

// _variables.scss
$white: #FFF;
$black: #000;
$red: #FF0;

в

// _variables.js
(function(){

    window.appVars = {
       white: '#FFF',
       black: '#000',
       red: '#FF0'
    }

})();

Стоит отметить, что этот преобразованный файл javascript позже будет импортирован в другие файлы javascript в процессе сборки Jekyll-Assets:

// app.js
//= include _variables.js
console.log (window.appVars);

javascript jekyll sass jekyll-extensions
person Peter    schedule 06.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для этого вам не нужен плагин. Самый простой способ — передать переменные jekyll в файлы sass и js.

Переменные Джекила

Здесь я использую переменные конфигурации из _config.yml, но вы также можете использовать переменные из файла _data.

# _config.yml
custom_vars:
  text_color: red
  background_color: '#ddd'

Sass-файлы

В стандартной настройке jekyll есть загрузочный файл assets/main.css, который импортирует все, что ему нужно. Похоже, вы не можете @import sass-файлы, содержащие вступительную часть и переменные, поэтому вам нужно захватить свои переменные в вашем файле boostrap до @import statment.

// assets/main.css
{%- for var in site.custom_vars %}
${{ var[0] }}: {{ var [1] }};
{%- endfor %}
@import "whatever";

JS-файлы

Поручите jekyll обработать ваш файл, добавив вводную часть:

---
---
// assets/script.js
(function(){
    window.appVars = {
        {%- for var in site.custom_vars %}
          {{ var[0] }}: '{{ var [1] }}'
          {%- unless forloop.last %},{% endunless %}
        {%- endfor %}
    }
})();
person David Jacquel    schedule 07.12.2017
comment
Привет Дэвид, спасибо за вашу помощь и извините за задержку моего отзыва. Ваш ответ великолепен, когда дело доходит до централизации всех переменных на уровне Jekyll, а затем для любого файла. К сожалению, в моем случае, и я, возможно, неправильно объяснил проблему, мне нужно обработать эти переменные, чтобы я мог получить такие результаты, как: $color-master-light:mix($color-master, #FFF, 16%) !default; или $table-border-color: rgba(0, 0, 0, 0.07) !default;или даже $var-1: 1; $var-2: $var-1 + 2; - person Peter; 12.12.2017
comment
У вас есть имя переменной в {{ var[0] }} и значение переменной в {{ var[1] }}. Я не понимаю, что не работает. - person David Jacquel; 13.12.2017
comment
Дэвид, если я просто засуну все в виде строки в файл, то значение, подобное mix($color-master, #FFF, 16%), приведет к тому, что javascript запустит ошибку, потому что он не будет знать, что с этим делать. С другой стороны, мне нужны методы/функции файла SASS, проанализированные (как вычисленные, а не преобразованные в CSS), чтобы была учтена вся логика. - person Peter; 13.12.2017