Отладочная сетка
Нарисовать отладочную сетку поверх сайта.
Код примеси:
.debug(@background, @outline){
height: 100vh;
position: fixed;
width: 100%;
> div{
height: inherit;
.wrapper();
> div{
height: inherit;
.row-flex();
> div{
.col();
.size(1);
height: inherit;
outline: @outline;
background: @background;
}
}
}
}
@mixin debug($background, $outline){
height: 100vh;
position: fixed;
width: 100%;
> div{
height: inherit;
@include wrapper();
> div{
height: inherit;
@include row-flex();
> div{
@include col();
@include size(1);
height: inherit;
outline: $outline;
background: $background;
}
}
}
}
=debug($background, $outline)
height: 100vh
position: fixed
width: 100%
> div
height: inherit
+wrapper()
> div
height: inherit
+row-flex()
> div
+col()
+size(1)
height: inherit
outline: $outline
background: $background
debug($background, $outline)
height 100vh
position fixed
width 100%
> div
height inherit
wrapper()
> div
height inherit
row-flex()
> div
col()
size(1)
height inherit
outline $outline
background $background
Разумеется в HTML придётся добавить небольшую группу элементов:
<div class="degub-grid">
<div>
<div>
<div></div>
...
<!-- столько же, сколько столбцов в сетке -->
</div>
</div>
</div>У этой структуры следующее назначение:
- внешний div растягивается на 100% ширины и высоты экрана
- второй div - контейнер
- третий div - строка
- вложенные div - столбцы, их количество должно совпадать с количеством стоблцом сетки
Далее применяем примесь debug к внешнему div, например: