無法編譯的Sass代碼的第一部分

Question

我有一些Sass代碼只編譯它的一小部分。其餘的部分將被編譯爲無效！我無法弄清楚發生了什麼，爲什麼它不會編譯。請看我的意見，看看它做什麼，不編譯：

//wont compile from here down to... 

@mixin transition($value) { 
    transition: $value; 
    -webkit-transition: $value; 
    -moz-transition: $value; 
    -ms-transition: $value; 
    -o-transition: $value;  
} 

@mixin transform($value) { 
    transform: $value; 
    -webkit-transform: $value; 
    -moz-transform: $value; 
    -ms-transform: $value; 
    -o-transform: $value; 
} 

@mixin animation($value) { 
    -webkit-animation: $value; 
    -moz-animation: $value; 
    -o-animation: $value; 
-ms-animation: $value; 
    animation: $value; 
} 

@mixin animation-delay($value) { 
    -webkit-animation-delay: $value; 
    -moz-animation-delay: $value; 
    -o-animation-delay: $value; 
    -ms-animation-delay: $value; 
    animation-delay: $value; 
}  

//Here  

//however the below code will compile 

@-webkit-keyframes animateMenuItems { 
    0% { @include transform(translateX(-60%));opacity:0;} 
    100% { @include transform(translateX(0%));opacity:1;} 
} 

任何想法，我哪裏出錯了？

編輯

這裏是它應該對文件進行編譯：

.App { 
    .app-content-wrap { 
     background:white; 
     @include transition(all 0.2s ease-out); 
     float: left; 
     width: 100%; 
     -webkit-box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18); 
     -moz-box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18); 
     box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);   
    } 
    &.sidenavActive { 
     .app-content-wrap { 
      transform: translate(300px,50px); 
      -webkit-transform: translate(300px,50px); 
      opacity:0.8; 

     } 
    } 
} 

我使用的WebPack和我越來越控制檯中的錯誤是這樣的：

「no mixin named transition \ n \ n Backtrace：\ n \ tsrc/css/app-containers.scss：4」，

Answer 1

Mixin定義不會編譯到最終的CSS中，它們只會在您將@include包含在定義中時才顯示出來。例如：如果你

body{ 
    @include transition(foo); 
} 

它會在最終的CSS爲顯示：澄清問題的意見

它看起來後

body{ 
    transition: foo; 
    -webkit-transition: foo; 
    -moz-transition: foo; 
    -ms-transition: foo; 
    -o-transition: foo; 
} 

編輯，喜歡它的進口問題。 Sass中的導入與CSS中的鏈接不同，它們實際上將導入的scss代碼拉入並將其編譯爲一個文件。因此，如果您有單個文件，例如app.scss，並且您將所有mixin放在名爲_mixins.scss的部分中，並首先部分導入mixin，則它應該可用於導入到應用程序的其他所有內容.scss。

_mixins.scss

@mixin my-rad-mixin(){ 
    some rad mixin stuff goes here 
} 

app.scss

@import 'mixins'; 

.foo{ 
    @include my-rad-mixin; 
} 

與您app.scss進口，包括其他薩斯進口後寫此設置的一切，應該有機會獲得一切都在_mixins部分。它將全部編譯到一個app.css中（假設你不在編譯時更改名稱）。

但是，如果您沒有使用部分系統，而是將多個scss文件編譯爲css，那麼你必須在任何你想要使用mixin的地方導入帶有mixin定義的文件。