Apakah ada cara untuk mengimpor variabel dari javascript ke sass atau sebaliknya?

Anda dapat membaca file sass dengan skrip sisi server, "mengurainya" dan mengulangi nilai yang Anda perlukan ke javascript.

Jika Anda menggunakan webpack, Anda dapat menggunakan sass-loader untuk mengekspor variabel seperti:

$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

dan mengimpornya seperti

import styles from '../styles/animation.scss'    
const millis = parseInt(styles.animationMillis)

https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/

Saya menganggap solusi saya cukup tipu; tapi itu berhasil...

Di _base.scss saya, saya memiliki beberapa variabel yang ditentukan:

$menu_bg: rgb(45, 45, 45);
$menu_hover: rgb(0, 0, 0);

Dalam menu.scss saya punya:

@import "base";

#jquery_vars {
  .menu_bg {
    background-color: $menu_bg;
  }
  .menu_hover {
    background-color: $menu_hover;
  }
}

Dan dalam templat halaman yang berguna:

<span class="is_hidden" id="jquery_vars">
  <span class="is_hidden menu_bg"></span>
  <span class="is_hidden menu_hover"></span>
</span>

Akhirnya ini memungkinkan skrip jQuery terdekat:

var menu_bg = $('#jquery_vars .menu_bg').css("background-color");
var menu_hover = $('#jquery_vars .menu_hover').css("background-color");

Jelek sekali ayahku memakai tas di kepalanya.

jQuery dapat menarik nilai CSS sembarang dari elemen halaman; tapi unsur-unsur itu harus ada. Saya mencoba menarik beberapa nilai ini dari CSS mentah tanpa membuat rentang di HTML dan jQuery menghasilkan undefined. Jelasnya, jika variabel-variabel ini ditetapkan ke objek "nyata" di halaman Anda, Anda tidak benar-benar memerlukan elemen #jquery_vars yang berubah-ubah. Pada saat yang sama, orang mungkin lupa bahwa .sidebar-left nice-menu li adalah elemen penting yang digunakan untuk memasukkan variabel ke jQuery.

Kalau ada yang punya yang lain, pasti lebih bersih dari ini...

sass-ffi seharusnya berhasil, namun sebaliknya (dari JS ke SASS/SCSS). Ini akan mendefinisikan fungsi yang disebut ffi-require, yang memungkinkan Anda membuat require file .js dari SASS:

config.js:

module.exports = {
     maxColumns: 4,
};

style.scss:

$max-columns: ffi-require('./config', 'maxColumns');

Bekerja dengan sass-loader (webpack) dan node-sass.

Saya ingin menambahkan bahwa sekarang ada beberapa cara untuk berbagi data antara Sass dan JavaScript menggunakan JSON. Berikut beberapa tautan ke artikel yang merinci berbagai teknik:

• Membuat Sass berbicara dengan JavaScript dengan JSON
• SassyJSON: Bicaralah dengan browser
• Berbagi Data Antara Sass dan JavaScript dengan JSON

Mungkin hanya masalah waktu sampai impor JSON didukung secara asli di Sass.

Saya akan merekomendasikan melihat sass-extract yang menggunakan fitur sass asli untuk mengekstrak variabel yang dihitung nilai ke dalam JSON.

Juga jika Anda menggunakan webpack, sass-extract-loader akan membuatnya sangat mudah cukup minta/impor file sass seperti pada const variables = require('sass-extract-loader!./variables.scss'); dan masukkan variabel sass Anda ke dalam objek JSON yang bagus.

Karena ini juga mendukung pernyataan @import, Anda masih dapat memisahkan variabel dalam file yang berbeda, dan tidak perlu menambahkan prapemrosesan tambahan atau memisahkan file json dengan variabel.

Ada banyak cara alternatif untuk mencapai hal ini seperti yang disebutkan dalam jawaban lain, dan mana yang Anda pilih akan bergantung pada kasus penggunaan dan lingkungan Anda.

Penafian, saya adalah penulis kedua perpustakaan tersebut.

Cara lain adalah dengan menggunakan gulp-template sehingga Anda dapat menghasilkan struktur apa pun yang Anda inginkan untuk JavaScript Anda.

Berbagi Variabel antara Javascript dan Sass menggunakan Gulp dengan gulp-template https://youtu.be/UVeUq8gMYco

Ini dibuat dari awal sehingga orang dapat melihatnya dari awal dan ada git repo dengan hasil akhirnya:

https://github.com/PocketNinjaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev

Anda pada dasarnya memiliki objek konfigurasi Anda

disimpan di ./dev/config.js

module.exports = {
  defaults: {
    colours: {
      primary: '#fc0'
    },
    sizes: {
      small: '100px',
      medium: '500px',
      large: '1000px'
    },
    zIndex: {
      model: 100,
      dropdown: 50,
      header: 10
    }
  }
}

Kemudian Anda memiliki kedua template untuk Sass dan Javascript, atau kurang atau apa pun yang Anda inginkan.

Templat garis bawah Sass

disimpan di ./dev/templates/sass-config.txt

<% _.each(defaults, function(category, key) { %>
  // Var <%= key %>
  <% _.each(category, function(value, key) { %>
    $<%= key %>: <%= value %>;
  <% }) %>
<% }) %>

Templat garis bawah Javascript

disimpan di ./dev/templates/js-config.txt

namespace.config = {};

<% _.each(defaults, function(monkey, key) { %>
  namespace.config.<%= key %> = {
  <% i = 1 %>
  <% _.each(monkey, function(value, key) { %>
    <% comma = (Object.keys(monkey).length === i) ? '': ',' %>
    <% if(typeof value === 'string') {%>
      <%= key %>: '<%= value %>'<%= comma %>
    <%} else { %>
      <%= key %> : <%= value %><%= comma %>
    <% } %>
    <% i++ %>
  <% }); %>
  };
<% }) %>

Kemudian tegukan untuk mengkompilasinya

var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');
var removeEmptyLines  = require('gulp-remove-empty-lines');

var sharedVars = require('./dev/config');

gulp.task('compile', function() {
  gulp.src('./dev/templates/sass-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('_sass-config.scss'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/sass'));

  gulp.src('./dev/templates/js-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('js-config.js'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/js'));
});

Hal ini dapat dilakukan menggunakan gulp-sass-vars-to-js. Ini menghasilkan file .js dari file .scss Anda. File .js berisi semua variabel yang dideklarasikan dalam file .scss Anda. Anda kemudian dapat 'mewajibkan' js yang dihasilkan ini ke .js Anda