覆蓋sass媒體查詢mixin

我無法通過我的媒體查詢混合包含設置更改樣式。我正在編寫移動第一種風格，然後在這些媒體查詢中聲明更大屏幕的樣式。覆蓋sass媒體查詢mixin

在我有文檔的頂部。

@mixin breakpoint($point) { 
    @if $point == medium { 
    @media (min-width: em(480)) { @content; } 
    } 
} 


@mixin breakpoint($point) { 
    @if $point == large { 
    @media (min-width: em(800)) { @content; } 
    } 
}

然後在整個我寫這樣的風格：

.col-1-4 { 
    width: 100%; 
    padding: 0; 

    @include breakpoint(medium) { 
     width: 50%; 
     padding-right: em(10); 

     &:nth-child(2n) { 
      padding-right: 0; 
      padding-left: em(10); 
     } 

    } 

    @include breakpoint(large) { 
     width: 25%; 

     &:nth-child(4n) { 
      padding-right: 0; 
     } 
    } 

}

大型演出的樣式在所需min-width，但不是媒體的風格了。

如果我在頂部切換到混合：

@mixin breakpoint($point) { 
    @if $point == large { 
    @media (min-width: em(800)) { @content; } 
    } 
} 

@mixin breakpoint($point) { 
    @if $point == medium { 
    @media (min-width: em(480)) { @content; } 
    } 
}

的風格在min-widthmedium但不large改變。

如何，我可以有我想利用在所需的最小寬度影響的樣式？

我編譯CSS是這樣的：

.col-1-4 { 
    width: 100%; 
    padding: 0; } 
    @media (min-width: 50em) { 
    .col-1-4 { 
     width: 25%; } 
     .col-1-4:nth-child(4n) { 
     padding-right: 0; } }

如果我換在頂部的混入只編譯一個寫在頂部。

任何幫助將是偉大的。

來源

2013-10-25 user1910388

是什麼編譯CSS是什麼樣子？ – cimmanon

我會修改問題並添加編譯後的css – user1910388

是的，出於某種原因，它只能用我在文檔頂部編寫的媒體查詢mixin進行編譯。我使用了一個叫mac的gui來編譯我的代碼。 – user1910388

的問題是，你定義你的斷點混入了兩次，這是造成第一個被覆蓋。

@mixin breakpoint($point) { 
    @if $point == medium { 
    @media (min-width: em(480)) { @content; } 
    } @else if $point == large { 
    @media (min-width: em(800)) { @content; } 
    } 
}

來源

2013-10-25 13:23:40 cimmanon

覆蓋sass媒體查詢mixin

回答

相關問題