Получение Semantic Grids scss Foundation 4 для работы

У меня есть 3 раздела, которые рушатся из-за точки останова по умолчанию, но я не знаю, как заставить их рухнуть с моим собственным css, используя scss.

сетка фундамента по умолчанию, которая хорошо работает и разрушается

    <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);
}

}


responsive-design sass zurb-foundation
person richard    schedule 01.04.2013    source источник
comment
Классы в вашем CSS не соответствуют тем, которые используются в вашем HTML.   -  person cimmanon    schedule 01.04.2013
comment
Извините, я не объяснил это хорошо. HTML — это разметка по умолчанию, которая хорошо работает в Foundation 4, но когда я пытаюсь использовать свой собственный css в разметке html, div не схлопывается. Я просто показывал, что работает для разметки html по умолчанию. Я отредактировал раздел, чтобы, надеюсь, сделать его более понятным. @cimmanon   -  person richard    schedule 02.04.2013

Ответы (3)


arrow_upward
2
arrow_downward

это потому, что вы неправильно пишете SCSS для grid-row.

    @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>

СКСС

.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>

Итак, чтобы написать это симантически без вспомогательных классов, вы пишете это:

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

и код SCSS:

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

    @media #{$medium-up} {
       @include grid-column(4);
    }
}
person Zuriel    schedule 16.04.2013
comment
Я не совсем понимаю, чей ответ правильный между вашим (говорящий не использовать @extend) и ответом jofralogo ниже, в котором используется @extend. - person Henrik; 13.01.2014
comment
Мой ответ правильный, если вы планируете использовать основы, встроенные в миксины. Foundation создал миксин grid-row(), а не я... Поэтому, если вы планируете использовать миксин, синтаксис SASS говорит, что для ввода @include extend не будет запускаться grid-row, потому что вы не можете расширить миксин. Но вы можете расширить класс, т.е. .row теперь говорит, что расширение неправильно, это немного резко, но не предназначено было бы более правильным. Foundation предполагает, что вы будете использовать примеси, если вам нужны симантические сетки. Если вы хотите жестко кодировать имена классов или расширять классы, вы можете это сделать, но зачем вам это, если у вас есть отличные миксины и точки останова. - person Zuriel; 13.01.2014

arrow_upward
0
arrow_downward

Я был сбит с толку этим, но потом узнал, что это на самом деле предполагаемое поведение. Вот цитата из официальной документации по сетке Foundation:

Мы убрали медиа-запросы из кода для наших примесей сетки. Это позволит вам включать миксины внутри любой точки останова, которую вы хотите, предоставляя вам полный контроль. Если вы хотите создать 10 точек останова и перемещать макет между каждой из них, во что бы то ни стало. Если вы хотите использовать только точки останова по умолчанию, у нас есть для этого переменные.

person mzgajner    schedule 27.09.2013

arrow_upward
-1
arrow_downward

Вместо этого используйте @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

person jofralogo    schedule 06.04.2013