Question

我正在开发一个带有客户端 - 服务器架构的浏览器游戏。游戏涉及HTML画布作为操场，我希望能够在单个配置文件中设置此画布的尺寸，然后在CSS中重复使用它1）以定义画布的实际尺寸和2）在游戏服务器的代码中用于碰撞和填充。

最好的方法是什么？我想我必须使用CSS预处理器（Sass或更少），但是如何将JS或JSON文件中的变量导入Sass？

抱歉西班牙语不好：）

Answer 1

有点迟到的答案，但这里（至少对其他读者来说）：css预处理器可能是必要的。

首先，一点配置

你需要装备node-sass（但如果你真的同时使用节点和sass，你可能已经完成了这一点）。您在vendor/assets/javascripts文件中指定importer选项：

node-sass

或者如果您使用带有sass-loader的webpack（我的首选方式）：

var sass = require('node-sass');
var jsonImporter = require('node-sass-json-importer');

// Example 1
sass.render({
  file: scss_filename,
  importer: jsonImporter,
  [, options..]
}, function(err, result) { /*...*/ });

现在实际使用

您只需在json文件中定义共享变量，如下所示：

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    // Example sass-loader usage. 
    // See: https://github.com/jtangelder/sass-loader#apply-via-webpack-config
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  sassLoader: {
    // Apply the JSON importer via sass-loader's options.
    importer: jsonImporter
  }
};

要在js中使用它，那么......它的JSON;）要在SASS中使用：

//"src/shared/dimensions.js"
{
    "width": "600px",
    "height": "400px",
}

这很容易;）

其他选项如下：如果您选择其中一种：Stylus，Sass或LESS，则可以使用Rosetta。有了它，您可以在一个文件中指定共享数据，如：

//"src/scss/game.scss"
@import '../shared/dimensions.json' //Yes, you can actually import json here
canvas {
    height: $height;
    width: $width;
}

像这样编译文件：

//"src/shared/dimensions.rose"
$width = 600px
$height = 400px

您以标准方式引用生成的文件：

rosetta --jsout "src/js/dimensions.js" --cssout "src/scss/dimensions.scss" --cssFormat "scss" src/shared/dimensions.rose

在Node.js和Sass之间共享配置变量

1 个答案:

首先，一点配置

现在实际使用