Sass and Keyframes

Question

我正在嘗試使用css關鍵幀創建一個旋轉圓，但是我很難嘗試使它在Sass中工作。

這裏是我的html：

<div class="content"> 
    <h1 class="h1">Playing around with keyframes</h1> 
    <div class="circle"></div> 
</div> 

和這裏的薩斯：

.content{ 
     display:block; 
     position: relative; 
     box-sizing:border-box; 

     .circle{ 
      width: 220px; 
      height: 220px; 
      border-radius: 50%; 
      padding: 10px; 
      border-top: 2px solid $pink; 
      border-right: 2px solid $pink; 
      border-bottom: 2px solid $pink; 
      border-left: 2px solid #fff; 
      -webkit-animation:spin 4s linear infinite; 
      -moz-animation:spin 4s linear infinite; 
      animation:spin 4s linear infinite; 
     } 

     @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
     @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
     @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
    } 

我使用Prepros編譯我的無禮和輸出如下所示（請注意關鍵幀中的類） ：

@-moz-keyframes spin { 
    .lesson-page .content 100% { 
    -moz-transform: rotate(360deg); 
    } 
} 
@-webkit-keyframes spin { 
    .lesson-page .content 100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 
@keyframes spin { 
    .lesson-page .content 100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 

Answer 1

這看起來特定於Sass 3.3。 @keyframes結構不正確地冒泡到頂端，因爲他們應該。如果不能升級到3.4，只需停止嵌套關鍵幀。

.content{ 
    display:block; 
    position: relative; 
    box-sizing:border-box; 

    .circle{ 
     width: 220px; 
     height: 220px; 
     border-radius: 50%; 
     padding: 10px; 
     border-top: 2px solid $pink; 
     border-right: 2px solid $pink; 
     border-bottom: 2px solid $pink; 
     border-left: 2px solid #fff; 
     -webkit-animation:spin 4s linear infinite; 
     -moz-animation:spin 4s linear infinite; 
     animation:spin 4s linear infinite; 
    } 
} 

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

相關：How to make a Sass mixin declare a non-nested selector on base level?