在sass中提升mixin？

Question

在JavaScript中，我通常寫如下代碼以保持清潔。

(function(){ 

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

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

})(); 

通過移動功能，到最後，它使其他開發eaiser只是看看第一線讀取以確定的主要功能是如何工作的。

我的問題是我該如何在sass中做到這一點？

我嘗試以下並不起作用：

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

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

它抱怨找不到混入名爲「樣式1」

Answer 1

你不能做的正是你問了，部分原因是薩斯仍然可以使用CascadingStyleSheets的級聯部分。下面的內容覆蓋上面的內容，在這種情況下，它使用上面的內容。

仍然有一種方法可以將您的邏輯從實現中分離出來，儘管通過partials。如果你把所有的mixin放在一個scss文件中，那麼你可以將@import放在你的實際樣式規則的頂部。這樣，有人可以跳進你的項目，看到你正在使用一些假設的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。