在 sass 中提升 mixin？

Question

在javascript中，我通常写如下以使代码干净。

(function(){

  doThing1(()=>{doThing2()});
  doThing3();

  function doThing1(){...}
  function doThing2(){...}
  function doThing3(){...}

})();

通过将函数移到最后，它使其他开发人员更容易阅读，只需查看第一行即可确定主函数的工作方式。

我的问题是如何在 sass 中做到这一点？

我尝试以下但不起作用：

@include style1();
@include style2();
@include style3();

@mixin style1(){}
@mixin style2(){}
@mixin style3(){}

它抱怨找不到名为'style1'的mixin

Answer 1

您不能完全按照您的要求做，部分原因是 Sass 仍然使用 CascadingStyleSheets 的级联部分。下面的内容会覆盖上面的内容，或者在这种情况下，它会使用上面的内容。

不过，仍然有一种方法可以通过部分将逻辑与实现分开。如果你将所有的 mixin 放在一个 scss 文件中，_mixins.scss 那么你可以将 @import 它放在你实际样式规则的顶部。这样别人就可以进入你的项目，看到你在使用一些假设的@include make-container(); mixin，然后只有在他们真正需要查看它是如何工作的时候才进入 mixins 文件。

你会有类似的东西：

@import "mixins";

@include style1();
@include style2();
@include style3();

Here's a good article talking about the general ideas of Sass file organization and partials.