28 мая 2021 в 17:29
Читал про CSS препроцессоры, единственное, что пока не понял: ЗАЧЕМ они?
Разбитие фрагментов стилей на файлы - не понимаю почему без препроцессоров никак.
Вендорные префиксы. Целенеправлено давно уже не использую. Ну может парочку.
Переменные. Есть в CSS.
Calc - тоже давно есть.
Вложенность. Ну вместо одного селектора пропишешь в правиле три.
Писать меньше кода - да, но в скомпилированных стилях этого кода получится гораздо больше, чем без препроцессоров.
Что дает установка на сайт дополнительной экосистемы - не понимаю.
Можете приводить примеры: откуда достигается профит.
Комментарии
Стоит раз попробовать, чтобы все эти вопросы отпали.
Я не жду, что со мной согласятся. Но давайте как-то приводить аргументы. А не "мне так легче", "иду учи уроки" и т.д.
Если кратко, то: вложенность, переменные, функции, extend и много других классных штук
Про переменные. Вот захотели мы в бутстрап добавить ещё один брейкпоинт. Например xxxl. Для этого нужно всего лишь добавить две строки:
вот тут https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L200
и вот тут https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L215
И у тебя сразу же появятся классы типа col-xxxl-1, display-xxxl-none и прочее.
Ну или не нравится тебе 12-колоночная сетка. Хочешь 13 колонок? Или 7. Меняешь одно значение здесь:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L225
И у тебя будет столько колонок в сетке, сколько надо. И в 7-колоночной сетке классы col- будут только до 7, а в 13-колоночной появятся col-13.
Обычными цсс-переменными ты такое в жизни не разрулишь.
Что касается вложенности - с ней значительно лучше читаемость.
А ещё в scss можно писать медиа-запросы внутри селектора. Это очень удобно - пишешь стили для элемента и там же по месту расписываешь всё внутри.
Да, медиа внутри элемента - это мегаудобно
"писать медиа-запросы внутри селектора" - можно пример?
Я может туплю, но отвечу)
@include media...Просто внутри того, что делается. И забыл.А что дальше после ... ? теперь моя очередь тупить.
Я конечно погуглил "@include media" но проблема в том, что я сворачиваю окно и пишу не правила для одного класса, а классы для нескольких элементов при данном разрешении.
Так ничто не мешает все это делать в любом месте. Я тоже создаю кастом-классы, если нужно: пишу в них + сразу даю им понижения, например. Или я не понял вас?
И все это просто экстендами делаю, ка правило. Зачем писать стили?
Итого.
Создали класс для элементов, написали стили, включили include сразу, где надо. Или просто дали классы, например, Бутстрапа и ничего не писали вообще) Зачем писать, если есть уже? В этом же смысл. Да и по настройкам самого Бутстрапа вам же написали: заменить пару строк -- все готово. ИМХО, это отлично. Лишняя работа не нужна: все, сто можно стандартизировать (или кто-то уже сделал за вас), нужно стандартизировать. Или использовать. Вот такой ленивый ответ)
А все, что создано вами, потом накинуть просто куда надо. Вот самый простой вариант (не всегда лучший). Лучше конечно изначально продумать и понять, что изменить в "настройках". Но в кастоме создано -- потом докинуто, куда нужно. Со всеми бонусами от scss.
Но импорт все-таки важен. Не претендую и, вероятно имеет претензии, но в нем нужно все подробнее писать, чтобы потом НИКТО не ломал мозги. Вот один из моих вариантов: https://snipboard.io/kmLdeo.jpg.
А нужен коррект, нашел scss (на пару абзацев всего, по логики импорта) и там поправил. Да сборка, но -- оно того стоит.
Часто все решает файл сборки, на мой взгляд. Там все должно быть. И все должно быть понятно.
@extend .btn;
@extend .btn-primary;
@extend .btn-lg;
margin: 1rem 0 0 0;
padding: 0.8rem 1.5rem;
font-size: 1rem;
width: 100%;
@include media-breakpoint-up(lg) {
margin: 3rem 0 0 0;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
width: unset;
}
}
@extend ... - просто добавляем класс к элементу.
И кто сказал, что нельзя использовать a.btn.btn-primary.btn-lg ?
@include media-breakpoint-up(lg) - это брейкпойинт надо еще предварительно указать сверху (ну или сильно любить Бутстрап)
Вообще зачем валить все в кашу?
extend - это когда ты создаешь блок кода, а потом вставляешь его в элементы. Типа как функция в PHP, чтобы не дублировать код, а использовать его в разных местах
Каша - это когда у тебя
color: white;
}
.selector 1 div {
color: black;
}
.selector 1 div p {
color: blue;
}
и еще 100500 элементов типа
color: white;
}
Этот кусок необязательно задавать на препроцессоре.
"100500 элементов" - никогда не делал вложенние 5-го уровня
В общем, ты как обычно еще не попробовал, а уже критикуешь
Если коротко, то для того чтобы самому себе жизнь облегчить
И все-таки отвечу как новичок, можно сказать.
Когда снова взялся за Друпал, первым делом с темами столкнулся. Так вот это просто офигенная штука. Все уже сказано выше (переменные, экстенды, медиа...), но это правда настолько просто и интуитивно понятно, если знаешь css вообще конечно, что уже иначе даже не мыслишь. Плюс у Бутстрапа, например, подробный мануал есть.
Медиа внутри мелектора можно и без инклюдов писать. Типа так:
font-size: 16px;
@media (max-width: 666px) {
font-size: 14px;
}
}
То есть без всяких миксинов, брейкпоинтов и прочих бутстрапов. То есть просто обычный медиа запрос для ширины, прнта, аспект-ратио и всего остального.
Т.обр. сокращается всего одна строчка. Это не повод вводить новую технологию. Я довольно редко ввожу медиа запрос для одного класса. И отдельный файл для страницы под каждую вариацию ширины экрана тоже не ввожу - это другая крайность.
И через 5 лет похожая конструкция будет в обычном CSS
Вот и порешили - не нужно это вам.
Сокращается износ колёсика мыши.
А так же износ нервных клеток
Если исходить из фабулы: препроцессоры нужны для упрощения верстки, напрашивается вопрос: а зачем верстку усложнять?
Т.е.
А потом оказывается, что сложно и это нужно упрощать одни сложные инструменты другими.
Так, погоди. А причём вообще бутстрап, сетка и БЭМ к препроцессорам?
Ну, как понимаю, это имеет связь все-таки в контексте. Понятно, что можно использовать и без фреймворков, но речь, как понимаю, все-таки именно о связке. Но писать все равно проще, блин) Прошу прощения, что влез.
Попробуйте. Попробуйте с нуля. Вам понравится)
Совершенно не понравилось. Учить чужие классы для выполнения своих задач? Бред какой-то.
Ну, на нет и суда нет...
Ну и как бы всё равно же надо запускать какой-нибудь галп или вебпак, чтобы хот-релоад был. Так почему бы до кучи не вкинуть в него sass? Или ты без хот-релоада верстаешь?
Это мне?
Верстаю с галпом и вообще на бутстрапе. Но можно и без него, и без sass, просто писать css. Или очем?
Ааа, вероятно понял.
Имел ввиду, что можно вообще без всего этого sass, просто css писать и все. Тогда ниче можно и не использовать, если уж так хочется. Тупо пишешь стили сразу и усе. А собираешь, sass не вкручиваешь. Возможно же.
А может и не понял)
Ну конечно, ведь не тяжело нажать кнопку обновления страницы, да?)))
100500 раз, после изменения каждой строчки в CSS
Только перед этим надо нажать ctrl+s в текстовом редакторе))
Ну шторм сам сохраняет) Но вангую, что Васёк шторм не использует, потому что "зачем"
Comments tree highlight (css + js) - Extended styles by avakorin (@avakorin)
on CodePen.
Это живой (WIP) пример использования scss. Нажми «View Compiled» чтобы увидеть результирующий css.
Здесь, в миксине
comment-user()заданы правила для оформления комментария в зависимости от автора комментария: автор материала, залогиненный пользователь, модератор. Вызов миксина —@include comment-user('moderator');— создаст в css нужные правила. В css пришлось бы отдельно прописать правила для каждого вида комментария, а при дальнейшей разработке пришлось бы помнить (задокументировать), что изменения необходимо вносить во все такие блоки с кодом. В scss изменения нужно будет внести в одном месте. Таким образом уменьшается вероятность появления багов.Второй момент. Если мне понадобится создать стиль для нового вида комментариев, то я добавлю цвет в карту цветов ($user-palette) и сделаю еще один вызов миксина:
logged-in: rgb(0, 157, 255),
author: rgb(255, 157, 0),
rank-top10: rgb(255, 0, 157));
...
.rank-top10 {
@include comment-user('rank-top10');
}
Можно какой-то более лаконичный пример?
Короткие примеры можно в документации посмотреть, например, про управляющие конструкции: https://sass-lang.com/documentation/at-rules/control/if
Дальше можно в код Bootstrap смотреть для погружения в тему и понимания, как фичи sass/scss используются в реальных проектах, например, миксин для кнопок в Bootstrap 5 https://github.com/twbs/bootstrap/blob/main/scss/mixins/_buttons.scss и сами кнопки https://github.com/twbs/bootstrap/blob/main/scss/_buttons.scss
Потом можно такое делать:
See the Pen
Vertical rhythm 1.0.0 (WIP) by avakorin (@avakorin)
on CodePen.