獲取語義網格scss基礎4工作

我有3個部分在默認斷點下摺疊，但我不知道如何讓它使用我自己的CSS摺疊使用scss。獲取語義網格scss基礎4工作

默認基礎網格，效果很好，並收縮

<div class="row"> 
    <div class="large-4 columns">...</div> 
    <div class="large-4 columns">...</div> 
    <div class="large-4 columns">...</div> 
</div>

我試過下面了，但但它似乎並沒有崩潰

<div class="container"> 
    <div class="div1">...</div> 
    <div class="div2">...</div> 
    <div class="div3">...</div> 
</div> 

.container{ 
@include grid-row; 

.div1 { 
    @include grid-column(4); 
} 
.div2 { 
    @include grid-column(4); 
} 
.div3 { 
    @include grid-column(4); 
}

}

來源

2013-04-01 richard

CSS中的類與您HTML中使用的類不匹配。 – cimmanon

對不起，我沒有解釋得很好。 HTML是基礎4中的默認標記，但當我嘗試在html標記中擁有自己的CSS時，不會崩潰div。我只是顯示了什麼工作的HTML默認標記。我已經編輯了該部分，希望能夠更清晰。 @cimmanon – richard

-1

使用@extend代替。

.container{ 
     @extend .grid; 
     div{ 
      @extend .columns; 
     } 
    } 
    .div1 { 
     @extend .large-4; 
    } 
    .div2 { 
     @extend .large-4; 
    } 
    .div3 { 
     @extend .large-4; 
    }

我做了幾個行之有效的混入的，我認爲這使得它更容易： https://gist.github.com/jofralogo/5324278

來源

2013-04-06 02:31:20 jofralogo

爲什麼downvote？ – jofralogo

它，因爲你寫的網格行錯SCSS。

@include grid-row();

請勿使用@extend。那並不是如何使用foundation4 ...... @extend只是將你的樣式填充到.row和.column中，而這不是你想要做的，而是你想用相反的方式將這些樣式粘貼到你的樣式中使用語義代碼，因此您可以稍後在SCSS中更改代碼，並在稍後進行更新。

下面是正確答案：

HTML

<div class="container"> 
    <div class="div1">...</div> 
    <div class="div2">...</div> 
    <div class="div3">...</div> 
</div>

SCSS

.container{ 
@include grid-row(); 

.div1, .div2, .div3 { 
    @include grid-column(12); 

    @media #{$medium-up} { 
     @include grid-column(4); 
    } 

    @media #{$large-up} { 
      @include grid-column(4); 
    } 
}

}

注：這是基礎5.您必須創建斷點。如果您希望整個視圖在移動設備中崩潰或您想要的任何內容，您的移動斷點應該有12列。這是一樣的

<div class="small-12 columns"> </div>

如果你想4列中，最多你寫：

<div class="small-12 medium-4 columns"> </div>

所以到symantically寫不使用輔助類，你這樣寫：

<div class="myclassname"> </div>

並且SCSS代碼是：

.myclassname { 
    @include grid-column(12); 

    @media #{$medium-up} { 
     @include grid-column(4); 
    } 
}

來源

2013-04-16 16:42:07 Zuriel

我不太明白你的答案在你的（不使用@extend）和jofralogo的答案（使用@extend）之間是正確的。 – Henrik

如果您打算使用mixin中構建的基礎，我的回答是正確的。基金會創建了mixin grid-row（）不是我...所以如果你打算使用mixin SASS語法來說類型@include extend不會運行grid-row，因爲你不能擴展一個mixin。但是你可以擴展一個類，也就是說，.row現在說擴展是錯誤的，但是並不意味着更加正確。如果你想要語義網格，Foundation打算使用mixins。如果你想在類名或擴展類中進行硬編碼，那麼你可以這樣做，但爲什麼當你有很好的混合和斷點時你想要。 – Zuriel

我對此感到莫名其妙，但後來發現它實際上是有意的行爲。以下是來自official Foundation grid documentation的報價：

我們將媒體查詢保留在我們的網格mixin的代碼之外。這將使你能夠將mixin包含在你想要的任何斷點內，使你完全控制。如果您想創建10個斷點並通過一切手段在各個斷點之間切換佈局。如果你只想使用默認的斷點，我們已經有了變量。

來源

2013-09-27 11:49:26 mzgajner

獲取語義網格scss基礎4工作

回答

相關問題