在 sass 中提升 mixin?

问题描述

在javascript中，为了使代码干净，我通常写如下.

In javascript, I usually write as follow to make code clean.

(function(){

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

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

})();

通过将函数移到最后，其他开发人员只需查看第一行就可以更轻松地阅读以确定主要函数的工作方式.

By moving the functions to the end, it make other dev eaiser to read just by look at the first lines to determine how the main function works.

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

My questions is how can I do this in sass?

我尝试以下操作，但不起作用:

I try following and doesn't work:

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

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

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

It complaint that cannot find mixin named 'style1'

推荐答案

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

You can't do exactly what you're asking for in part because Sass still works off of the cascade part of CascadingStyleSheets. What's below overrides what is above or, in this case, it uses what's above.

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

There's still a way to separate your logic from your implementation though, through partials. If you put all your mixins in one scss file, _mixins.scss then you can @import it at the top of your actual style rules. That way someone can jump into your project, see that you're using some hypothetical @include make-container(); mixin, then only go into the mixins file if they actually need to see how it works.

你会有类似的东西:

@import "mixins";

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

这里有一篇很好的文章，讲述了 Sass 文件组织的总体思路和部分.

这篇关于在 sass 中提升 mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！