设置带有@use的 SASS 模块"library"以允许用户覆盖库变量的正确方法是什么?



随着@use和显式本地命名空间变量的移动,似乎为了覆盖Sass"图书馆的";变量,它最终会导致一些难看的代码。这是意料之中的事,还是我错过了什么,对萨斯来说相对陌生?

此前,有人将谨慎抛诸脑后,简单地制造了全局变量。(是的,我知道@import还会存在几年,但我对我的项目未来感兴趣。(

@import "_vars";
@import "vendor/cool_library";

现在,由于@import被弃用,我们应该改用@use。

@use "_vars";
@use "vendor/cool_library";

我在搜索中看到的唯一方法是在";vendor/coll_library";代码是添加@use"/_vars";到cool_brary文件,或使用:

@use "vendor/cool_library" with ($varname: "var_data");

将我的vars文件添加到库中是不可行的,因为保持干净的子模块repo会很痛苦。所以这就结束了,这就留下了";with((";选项作为唯一明显的方法?

但是,对于一些图书馆来说,这可能会导致这样的结果:

@use "vendor/cool_library" with (
$line-height: 2.4rem,
$global-radius: .2rem,
$border-color: #bbb,
$font-sans-serif: "Roboto", Helvetica, Arial, sans-serif !default,
$font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif,
$font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace,
$font-base: $font-sans-serif,
$font-color: #222222,
$font-size: 22px ,
$font-size--lg: 48px, 
$font-size--md: 16px, 
$font-size--sm: 14px, 
$font-size--xs: 10px,
. . . . And on and on... however many variables you need to override...
);

对此的一个变体是调用"use"_vars";在此之前,但这只会使您能够使用vars中的内容设置那些with((变量,并管理vars文件中的变量内容。@use行看起来仍然像上面一样一团糟。

我曾希望,由于with((想要一个地图,我可以给它一个由地图组成的变量,但当我尝试它时似乎不起作用…

或者,可以使用mixin,但这将导致在您自己的Sass文件中重建像web框架这样的库,这并不吸引人。

所以。。。我是不是错过了一些显而易见的东西(真的希望我是(?或者这真的是@use模块的新方式吗?

不幸的是,您指向的with((方法似乎是唯一的方法。我首先尝试@只使用_variables.css文件,然后在with((方法中设置修改后的变量,然后导入下面的scss项目的其余部分,希望这些变量能被考虑在内。但这并没有起作用,尽管它确实进行了编译。

只有@使用node_modules/coll_css_framework/main.css中的入口点文件,我才能修改变量,如您所示:

@use './../../../node_modules/cool_css/main.scss' with (
$link-color: #ffe88d,
$link-color-hover: #fff0b4,
$container-max-width: 1600px,
$etc ...
);

为此,必须使用设置原始$变量!默认标志:

$link-color: green !default;

最新更新