scss文件中的自定義指令？也許對於一個新的僞類？

Question

是否可以使用某種類型的@directive創建語法，類似於創建@mixins？其次，是否有可能創建一個僅限SASS的僞類？

我想宣佈自己的SASS指令，儘管我不想強迫我的隊友安裝額外的紅寶石使用它，所以我想將它存儲在scss局部。我明白他們是複雜程度的命令，所以也許這是不可能的。

除了可能創建一個新的scss-only僞類（例如：parent，：clicked，：unchecked等），我會對定製指令感興趣，它會協助使用複選框指示css動畫（「css checkbox hack」）。這是我SCSS僞概括我想要做的事：

// this code monitors when a checkbox (#someinput) is checked, 
// then applies style to div #target div. Basically an 'onClick' event in scss. 
body { 
    #wrapper { 
    #targetdiv { 
     @spotcheck(#someinput) {     # 
     color: red; border: 2px solid blue; # <-- move this ... 
     }          # 

     color: blue; border: 0; 
     #someinput { 
     width: 20px; height: 20px; 
     } 
    } 
    } 
} 

// ... the above scss should be converted to this pre-compiled state, also scss 
body { 
    #someinput:checked ~ #targetdiv {   # 
    color: red; border: 2px solid blue;  # <-- ..to here. it needs to be 
    }           #  above the #targetdiv 

    #wrapper { 
    #targetdiv { 
     color: blue; border: 0; 
     #someinput { 
     width: 20px; height: 20px; 
     } 
    } 
    } 
} 

Answer 1

讓你的選擇只有具體，因爲他們絕對需要是並沒有更多的。 mixin只會更加冗長而沒有真正的好處。

#targetdiv { 
    color: blue; border: 0; 

    #someinput:checked ~ & { 
     color: red; border: 2px solid blue; 
    } 
} 

#someinput { 
    width: 20px; height: 20px; 
} 

輸出：

#targetdiv { 
    color: blue; 
    border: 0; 
} 
#someinput:checked ~ #targetdiv { 
    color: red; 
    border: 2px solid blue; 
} 

#someinput { 
    width: 20px; 
    height: 20px; 
} 

或者，這將給一起overqualify只要你想盡可能多的功能相同的結果：

#targetdiv { 
    color: blue; border: 0; 
} 

#someinput { 
    width: 20px; height: 20px; 

    ~ #targetdiv { 
     color: red; border: 2px solid blue; 
    } 
}