Написать Утилиту на SCSS
Цена договорная
В общем задача заключается в следующем.
Есть у меня утилита моя лично созданная для bootstrap. Называется gutters. В ней я прописываю не стандартные отступы между колонками бутстрапа. В стандартной сетки бутстрапа между колонками 30px отступа. Порой бывают часто проекты когда между колонками 15px, 40px, 60px, 100px и тд. Исходя из этих целей я сделал такую утилиту. Выглядит оно примерно вот так:
.row[data-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
Думаю всё прекрасно понятно.
Но проблема заключается в том что это ужасно не удобно писать под каждый проект свои значения и еще под каждый медиа запрос. Так что нужно написать такую скажем функцию в которой будут
1) переменные типа xs, sm, md, lg, xl и тд, в общем какие угодно, которые будут работать только в этом файле, не надо их связывать с бутстрапом.
Что то типа такого
$grid-breakpoints: (
xxs: 0,
xs: 375px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1366px,
xxl2: 1440px,
xxl3: 1680px,
xxl4: 1920px,
) !default;
2) В таком же формате нужно чтобы я смог прописывать значение data-gutter="var" <<<
В конечном итоге это все должно компилироваться в такой вид
.row[data-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
@include media-breakpoint-up(xl) {
.row[data-xl-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-xl-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
}
.row[data-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
@include media-breakpoint-up(lg) {
.row[data-lg-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-lg-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
}
И тд.
Пытался обьяснить как мог. Пишите вопросы и сразу цену.
Оплата по факту выполнения на карту банка. VISA/MASTER CARD
Есть у меня утилита моя лично созданная для bootstrap. Называется gutters. В ней я прописываю не стандартные отступы между колонками бутстрапа. В стандартной сетки бутстрапа между колонками 30px отступа. Порой бывают часто проекты когда между колонками 15px, 40px, 60px, 100px и тд. Исходя из этих целей я сделал такую утилиту. Выглядит оно примерно вот так:
.row[data-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
Думаю всё прекрасно понятно.
Но проблема заключается в том что это ужасно не удобно писать под каждый проект свои значения и еще под каждый медиа запрос. Так что нужно написать такую скажем функцию в которой будут
1) переменные типа xs, sm, md, lg, xl и тд, в общем какие угодно, которые будут работать только в этом файле, не надо их связывать с бутстрапом.
Что то типа такого
$grid-breakpoints: (
xxs: 0,
xs: 375px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1366px,
xxl2: 1440px,
xxl3: 1680px,
xxl4: 1920px,
) !default;
2) В таком же формате нужно чтобы я смог прописывать значение data-gutter="var" <<<
В конечном итоге это все должно компилироваться в такой вид
.row[data-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
@include media-breakpoint-up(xl) {
.row[data-xl-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-xl-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
}
.row[data-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
@include media-breakpoint-up(lg) {
.row[data-lg-gutter="10"] {
margin-left: -5px;
margin-right: -5px;
}
.row[data-lg-gutter="10"] > [class^="col"] {
padding-left: 5px;
padding-right: 5px;
}
}
И тд.
Пытался обьяснить как мог. Пишите вопросы и сразу цену.
Оплата по факту выполнения на карту банка. VISA/MASTER CARD
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.