0
我正在嘗試創建一個mixin,它將採取規則(例如margin
)並返回媒體查詢。這是我到目前爲止已經試過:爲什麼我的mixin沒有創建規則?
$screen_smx: 767px;
$screen_sm: 768px;
$screen_md: 960px;
$screen_lg: 1200px;
$header_height_xs: 50px;
$header_height_sm: 80px;
$header_height_md: 60px;
$header_height_lg: 60px;
@mixin header_height($rule) {
@media (max-width: $screen_smx) {
$rule: $header_height_xs;
}
@media (min-width: $screen_sm) {
$rule: $header_height_sm;
}
@media (min-width: $screen_md) {
$rule: $header_height_md;
}
@media (min-width: $screen_lg) {
$rule: $header_height_lg;
}
}
所以我可以做類似如下:
#header {
position:fixed;
@include header_height(height);
}
body > .container {
@include header_height(padding-top);
}
上面的代碼不會拋出任何錯誤,它只是不產生任何代碼。有什麼我錯過了或者是我想要做的只是無法實現?
謝謝。
順便說一句,在這種情況下,使用@content來拉動所有規則可能是個好主意。你可以稱它爲一個class-ish函數'@include header_height(){}',但{和}之間的所有內容都可以使用@ content變量來打印。您可以通過傳遞更多東西並循環遍歷它來使您的函數更具普遍性......更多信息,請訪問:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-content – somethinghere 2014-09-24 16:39:07