我正在做一个css网格系统,它依赖于块的概念。所以我有一个基本文件,像这样:
$max-columns: 4;
$block-width: 220px;
$block-height: 150px;
$block-margin: 10px;
它由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;
}
但是我也希望javascript能够访问基本文件中的变量,我想我可以做一个不可见的div,给予它$block-width,$block-height,和$block-margin属性,然后从那里提取值,但是max-columns,不能直接Map到任何东西,所以我不得不想出一个在div中呈现它的笨拙方法。有没有一个更干净的方法可以在sass/css和javascript之间共享值,反之亦然?
9条答案
按热度按时间dced5bon1#
如果使用webpack,则可以使用sass-loader导出如下变量:
然后把它们
https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/
wsewodh22#
我认为我的解决方案相当做作;但它确实起作用了。
在我的
_base.scss
中,我定义了一些变量:在
menu.scss
中,我有:在一个方便的页面模板中:
最后,这允许在附近的jQuery脚本中:
太丑了,我爸头上套着个袋子。
jQuery可以从页面元素中提取任意CSS值;但这些元素必须存在。我确实尝试过从原始CSS中提取一些值,但没有在HTML中创建span,jQuery提出了
undefined
。显然,如果这些变量被赋给页面上的“真实的”对象,您实际上并不需要任意的#jquery_vars
元素。同时,人们可能会忘记.sidebar-left nice-menu li
是用于向jQuery提供变量的重要元素。如果有人有别的东西,肯定比这干净...
ttygqcqt3#
sass-ffi应该可以完成这个任务,但方法相反(从JS到SASS/SCSS),它将定义一个名为
ffi-require
的函数,该函数允许您从SASS:config.js
:style.scss
:与
sass-loader
(网络包)和node-sass
一起使用。wyyhbhjk4#
您可以使用服务器端脚本读取sass文件,“解析”它并回显您需要的javascript值。
ncecgwcz5#
我想补充的是,现在有几种方法可以使用JSON在Sass和JavaScript之间共享数据。下面是一些详细介绍各种技术的文章的链接:
JSON导入在Sass中得到原生支持可能只是时间问题。
qoefvg9y6#
我建议查看sass-extract,它使用原生sass特性将计算出的变量值提取到JSON中。
此外,如果您使用webpack,sass-extract-loader将使您非常容易地只需要/导入
const variables = require('sass-extract-loader!./variables.scss');
中的sass文件,并将sass变量放在一个漂亮的JSON对象中。因为它也支持
@import
语句,所以你仍然可以将变量分隔在不同的文件中,而不需要添加额外的预处理或将json文件与变量分隔开。正如在其他答案中提到的,有许多替代方法可以实现这一点,您选择哪一种将取决于您的用例和环境。
免责声明,我是这两个库的作者。
lmyy7pcs7#
另一种方法是使用gulp-template,这样就可以为JavaScript生成任何结构。
使用带有gulp模板https://youtu.be/UVeUq8gMYco的Gulp在Javascript和Sass之间共享变量
它是从零开始创建的,所以人们可以从头看到它,并且有一个git repo,其最终结果是:
https://github.com/PocketNinjaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev
你基本上有了你的配置对象
保存在./dev/config.js
然后您就有了Sass和Javascript的模板,或者更少的模板,或者任何您想要的模板。
Sass下划线模板
保存在./dev/templates/sass-config.txt中
Javascript下划线模板
保存在./dev/templates/js-config.txt中
然后大口地编译它
gtlvzcf88#
这可以使用gulp-sass-vars-to-js完成。它从.scss文件生成一个.js文件。.js文件包含.scss文件中声明的所有变量。然后,您可以将此生成的js“要求”到.js中
eufgjt7s9#
对于维生素JS+React=〉
foo.scss
=〉foo.modules.scss
Component.jsx