webentwicklung-frage-antwort-db.com.de

Gibt es eine Möglichkeit, Variablen von Javascript nach Sass oder umgekehrt zu importieren?

Ich mache ein CSS-Grid-System, das auf dem Konzept der Blöcke beruht. Also habe ich eine Basisdatei wie:

$max-columns: 4;
$block-width: 220px;
$block-height: 150px;
$block-margin: 10px;

Und es wird von einem Mixin verwendet:

@mixin block ($rows, $columns, $max-columns) {
  display: block;
  float: left;
  margin: $block-margin 0 0 $block-margin;
  box-sizing: border-box;
  width: ($block-width * $columns) - $block-margin;
}

Ich möchte aber auch, dass Javascript Zugriff auf die Variablen in der Basisdatei hat. Ich dachte, ich könnte ein unsichtbares Div erstellen und ihm die Attribute $ block-width, $ block-height und $ block-margin geben und die Werte von dort abrufen. Aber max-columns werden nicht direkt zugeordnet, daher müsste ich mir eine hackige Methode einfallen lassen, um sie in einem div zu rendern. Gibt es eine sauberere Möglichkeit, Werte von sass/css an Javascript weiterzugeben oder umgekehrt?

20
Jeremy Smith

Sie können die sass-Datei mit einem serverseitigen Skript lesen, "parsen" und die Werte ausgeben, die Sie für Javascript benötigen.

6
Corubba

Ich halte meine Lösung für ziemlich hokey; aber es funktioniert ...

In meinem _base.scss habe ich einige Variablen definiert:

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

In einem menu.scss habe ich:

@import "base";

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

Und in einer praktischen Seitenvorlage:

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

Schließlich erlaubt dies in einem nahe gelegenen jQuery-Skript:

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

Das ist so hässlich, mein Vater trägt eine Tasche auf dem Kopf.

jQuery kann beliebige CSS-Werte aus Seitenelementen ziehen. aber diese Elemente müssen existieren. Ich habe versucht, einige dieser Werte aus unformatiertem CSS zu ziehen, ohne die Bereiche im HTML-Code zu erstellen, und jQuery hat undefined erstellt. Wenn diese Variablen "echten" Objekten auf Ihrer Seite zugewiesen werden, benötigen Sie das #jquery_vars -Element natürlich nicht wirklich. Gleichzeitig könnte man vergessen, dass .sidebar-left Nice-menu li das entscheidende Element ist, mit dem Variablen in jQuery eingegeben werden.

Wenn jemand etwas anderes hat, muss es sauberer sein als dieses ...

10
ericx

Ich würde empfehlen, sich sass-extract anzusehen, das native sass-Funktionen verwendet, um die berechneten Variablenwerte in JSON zu extrahieren.

Wenn Sie Webpack verwenden, können Sie mit sass-extract-loader ganz einfach die sass-Dateien wie in const variables = require('sass-extract-loader!./variables.scss'); anfordern/importieren und Ihre sass-Variablen in einem Nice JSON-Objekt haben.

Da @import-Anweisungen ebenfalls unterstützt werden, können Sie Ihre Variablen weiterhin in verschiedene Dateien unterteilen, ohne zusätzliche Vorverarbeitung oder separate JSON-Dateien mit Variablen hinzufügen zu müssen.

Wie in anderen Antworten erwähnt, gibt es viele alternative Möglichkeiten, dies zu erreichen. Welche Sie wählen, hängt von Ihrem Anwendungsfall und Ihrer Umgebung ab.

Haftungsausschluss, ich bin der Autor der beiden genannten Bibliotheken.

4
jgranstrom

Ich möchte hinzufügen, dass es jetzt mehrere Möglichkeiten gibt, Daten mit JSON zwischen Sass und JavaScript auszutauschen. Hier sind einige Links zu Artikeln, die verschiedene Techniken beschreiben:

Es ist wahrscheinlich nur eine Frage der Zeit, bis der JSON-Import in Sass nativ unterstützt wird.

4
Teo Dragovic

Wenn Sie ein Webpack verwenden, können Sie mit sass-loader Variablen exportieren wie:

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

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

und importiere sie gerne

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

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

2
velop

Eine andere Möglichkeit ist die Verwendung eines Gulp-Templates, mit dem Sie eine beliebige Struktur für Ihr JavaScript erstellen können.

Variablen zwischen Javascript und Sass mit Gulp mit gulp-template teilen https://youtu.be/UVeUq8gMYco

Es wurde von Grund auf neu erstellt, damit die Leute es von Grund auf sehen können, und es gibt ein Git-Repo mit dem Endergebnis:

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

Sie haben im Grunde Ihr Konfigurationsobjekt

gespeichert unter ./dev/config.js

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

Dann haben Sie beide Vorlagen für Sass und Javascript oder weniger oder was auch immer Sie wollen.

Sass Unterstreichungsvorlage

gespeichert unter ./dev/templates/sass-config.txt

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

Javascript-Unterstreichungsvorlage

gespeichert unter ./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++ %>
  <% }); %>
  };
<% }) %>

Dann der Schluck, um es zu kompilieren

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'));
});
1
Pocketninja

Dies kann mit gulp-sass-vars-to-js geschehen. Es generiert eine .js-Datei aus Ihrer .scss-Datei. Die .js-Datei enthält alle Variablen, die in Ihrer .scss-Datei deklariert sind. Sie können diese generierten js dann in Ihre .js 'einbinden'

0
user2486738

sass-ffi sollte den Trick machen, aber in umgekehrter Richtung (von JS nach SASS/SCSS). Es wird eine Funktion mit dem Namen ffi-require Definiert, mit der Sie require .js-Dateien aus SASS erstellen können:

config.js:

module.exports = {
     maxColumns: 4,
};

style.scss:

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

Funktioniert mit sass-loader (Webpack) und node-sass.

0
futpib