Получение семантических гридов scss foundation 4 для работы

У меня есть 3 раздела, которые сжимаются под точкой останова по умолчанию , но я не знаю, как заставить его рушиться с помощью моего собственного css с помощью scss.Получение семантических гридов scss foundation 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, но когда я пытаюсь создать свой собственный CSS в разметке html, не происходит свертывания div. Я просто показывал, что работает для разметки по умолчанию html. Я отредактировал раздел, чтобы надеяться, что он станет более ясным. @cimmanon – richard

-1

Используйте @extend вместо этого.

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

Я сделал пару Mixins, что работает хорошо, и я думаю, что делает его более легким: https://gist.github.com/jofralogo/5324278

источник

2013-04-06 02:31:20 jofralogo

Почему downvote? – jofralogo

его, потому что вы пишете SCSS для сетки-строки неправильно.

@include grid-row();

НЕ используйте @extend. это НЕ то, как создается фундамент4 ... @extend просто наполняет ваши стили в .row и .column, и это не то, что вы хотите сделать, вместо этого вы хотите использовать стили THOSE в своих стилях обратным способом, используя семантический код, поэтому вы можете изменить код позже в 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

Мой ответ правильный, если вы планируете использовать основы, созданные в mixins. Foundation создал mixin grid-row(), но не я ... Итак, если вы планируете использовать mixin SASS, синтаксис говорит, что тип @include extend не будет запускать строку сетки, потому что вы не можете расширить mixin. Но вы можете расширить класс, т. Е. .row теперь говорит, что расширение является неправильным, является abit жестким, но не предназначено было бы более правильным. Фонд хочет использовать миксины, если вам нужны симпатичные сетки. Если вы хотите жестко кодировать имена классов или расширять классы, вы делаете это, но зачем вам это делать, когда у вас отличные миксины и точки останова. – Zuriel

Я был озадачен этим, но потом выяснил, что это на самом деле предназначенное поведение. Вот цитата из official Foundation grid documentation:

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

источник

2013-09-27 11:49:26 mzgajner

Получение семантических гридов scss foundation 4 для работы

ответ

Смежные вопросы