vars - ¿Hay una manera de importar variables de javascript a sass o viceversa?

como usar variables en css3

Question

Estoy haciendo un sistema de css grid que se basa en el concepto de bloques. Así que tengo un archivo base como:

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

Y es usado por un mixin:

@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;
}

Pero también me gustaría que javascript tenga acceso a las variables en el archivo base. Estaba pensando que podría hacer un div invisible, y darle los atributos $ block-width, $ block-height y $ block-margin y sacar los valores de allí. Pero max-column, no se asigna a nada directamente, por lo que tendría que encontrar una forma pirata de convertirlo en un div. ¿Hay una forma más limpia de compartir valores de sass / css a javascript o viceversa?

Answer 1

Considero que mi solución es bastante aburrida; pero funciona ...

En mi _base.scss tengo algunas variables definidas:

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

En un menu.scss tengo:

@import "base";

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

Y en una útil plantilla de página:

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

Finalmente esto permite en un script jQuery cercano:

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

Esto es tan feo que mi papá lleva una bolsa en la cabeza.

jQuery puede extraer valores CSS arbitrarios de los elementos de la página; Pero esos elementos tienen que existir. Intenté extraer algunos de estos valores de CSS en bruto sin crear los tramos en el HTML y jQuery apareció undefined . Obviamente, si estas variables se asignan a objetos "reales" en su página, realmente no necesita el elemento arbitrario #jquery_vars . Al mismo tiempo, uno podría olvidar que .sidebar-left nice-menu li es el elemento vital que se utiliza para alimentar variables a jQuery.

Si alguien tiene algo más, tiene que ser más limpio que esto ...

Answer 2

Esto se puede hacer usando gulp-sass-vars-to-js . Genera un archivo .js a partir de su archivo .scss. El archivo .js contiene todas las variables declaradas en su archivo .scss. Luego puedes ''requerir'' este js generado en tu .js

Answer 3

Me gustaría agregar que ahora hay varias formas de compartir datos entre Sass y JavaScript usando JSON. Aquí hay algunos enlaces a artículos que detallan varias técnicas:

• Haciendo que Sass hable a JavaScript con JSON
• SassyJSON: habla con el navegador
• Compartir datos entre Sass y JavaScript con JSON

Probablemente sea solo una cuestión de tiempo hasta que la importación JSON se admita de forma nativa en Sass.

Answer 4

Otra forma podría ser usar gulp-template para que pueda generar cualquier estructura que desee para su JavaScript.

Compartir variables entre Javascript y Sass usando Gulp con gulp-template https://youtu.be/UVeUq8gMYco

Se ha creado desde cero para que la gente pueda verlo desde cero y hay un git repo con el resultado final:

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

Básicamente tienes tu objeto de configuración.

guardado en ./dev/config.js

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

Luego tienes ambas plantillas para Sass y Javascript, o menos o lo que quieras.

Plantilla de subrayado Sass

guardado en ./dev/templates/sass-config.txt

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

Plantilla de subrayado de Javascript

guardado en ./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++ %>
  <% }); %>
  };
<% }) %>

Luego el trago para compilarlo.

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

Answer 5

Puede leer el archivo sass con una secuencia de comandos del lado del servidor, "analizar" y hacer eco de los valores que necesita para JavaScript.

Answer 6

Recomendaría ver sass-extract que usa las características nativas de sass para extraer los valores de las variables computadas en JSON.

Además, si está utilizando el paquete web, sass-extract-loader hará que sea muy fácil solo requerir / importar los archivos sass como en const variables = require(''sass-extract-loader!./variables.scss''); y tener sus variables sass en un objeto JSON agradable.

Como también es compatible con las declaraciones de @import , aún puede separar sus variables en diferentes archivos, y no es necesario agregar preprocesamiento adicional o archivos json separados con variables.

Hay muchas formas alternativas de lograr esto, como se menciona en otras respuestas, y la que elija dependerá de su caso de uso y entorno.

Descargo de responsabilidad, soy el autor de las dos bibliotecas mencionadas.

Answer 7

Si usa un paquete web, puede usar sass-loader para exportar variables como:

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

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

e importarlos como

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

blog.bluematador.com/posts/…