CSS препроцессоры? Зачем они?

Главные вкладки

Аватар пользователя VasyOK VasyOK 28 мая 2021 в 17:29

Читал про CSS препроцессоры, единственное, что пока не понял: ЗАЧЕМ они?

Разбитие фрагментов стилей на файлы - не понимаю почему без препроцессоров никак.
Вендорные префиксы. Целенеправлено давно уже не использую. Ну может парочку.
Переменные. Есть в CSS.
Calc - тоже давно есть.
Вложенность. Ну вместо одного селектора пропишешь в правиле три.
Писать меньше кода - да, но в скомпилированных стилях этого кода получится гораздо больше, чем без препроцессоров.

Что дает установка на сайт дополнительной экосистемы - не понимаю.

Можете приводить примеры: откуда достигается профит.

Комментарии

Аватар пользователя VasyOK VasyOK 28 мая 2021 в 17:45

Я не жду, что со мной согласятся. Но давайте как-то приводить аргументы. А не "мне так легче", "иду учи уроки" и т.д.

Аватар пользователя gun_dose gun_dose 28 мая 2021 в 18:14
3

Про переменные. Вот захотели мы в бутстрап добавить ещё один брейкпоинт. Например 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 можно писать медиа-запросы внутри селектора. Это очень удобно - пишешь стили для элемента и там же по месту расписываешь всё внутри.

Аватар пользователя VasyOK VasyOK 28 мая 2021 в 23:58

А что дальше после ... ? теперь моя очередь тупить.

Я конечно погуглил "@include media" но проблема в том, что я сворачиваю окно и пишу не правила для одного класса, а классы для нескольких элементов при данном разрешении.

Аватар пользователя artomas artomas 29 мая 2021 в 0:01

Так ничто не мешает все это делать в любом месте. Я тоже создаю кастом-классы, если нужно: пишу в них + сразу даю им понижения, например. Или я не понял вас?

Аватар пользователя artomas artomas 29 мая 2021 в 0:11

Итого.
Создали класс для элементов, написали стили, включили include сразу, где надо. Или просто дали классы, например, Бутстрапа и ничего не писали вообще) Зачем писать, если есть уже? В этом же смысл. Да и по настройкам самого Бутстрапа вам же написали: заменить пару строк -- все готово. ИМХО, это отлично. Лишняя работа не нужна: все, сто можно стандартизировать (или кто-то уже сделал за вас), нужно стандартизировать. Или использовать. Вот такой ленивый ответ)

Аватар пользователя artomas artomas 29 мая 2021 в 0:20

А все, что создано вами, потом накинуть просто куда надо. Вот самый простой вариант (не всегда лучший). Лучше конечно изначально продумать и понять, что изменить в "настройках". Но в кастоме создано -- потом докинуто, куда нужно. Со всеми бонусами от scss.

Аватар пользователя artomas artomas 28 мая 2021 в 23:56

А нужен коррект, нашел scss (на пару абзацев всего, по логики импорта) и там поправил. Да сборка, но -- оно того стоит.
Часто все решает файл сборки, на мой взгляд. Там все должно быть. И все должно быть понятно.

Аватар пользователя ivnish ivnish 29 мая 2021 в 8:54
a {
      @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;
      }
    }

Аватар пользователя VasyOK VasyOK 29 мая 2021 в 11:03

@extend ... - просто добавляем класс к элементу.

И кто сказал, что нельзя использовать a.btn.btn-primary.btn-lg ?

@include media-breakpoint-up(lg) - это брейкпойинт надо еще предварительно указать сверху (ну или сильно любить Бутстрап)

Вообще зачем валить все в кашу?

Аватар пользователя ivnish ivnish 29 мая 2021 в 11:08

extend - это когда ты создаешь блок кода, а потом вставляешь его в элементы. Типа как функция в PHP, чтобы не дублировать код, а использовать его в разных местах

VasyOK wrote: Вообще зачем валить все в кашу?

Каша - это когда у тебя

.selector 1 {
  color: white;
}

.selector 1 div {
  color: black;
}

.selector 1 div p {
  color: blue;
}

и еще 100500 элементов типа

.selector 1 .selector 2 .selector 3 .selector 4 .selector 5 ul li a {
  color: white;
}
Аватар пользователя VasyOK VasyOK 29 мая 2021 в 11:43

Этот кусок необязательно задавать на препроцессоре.

"100500 элементов" - никогда не делал вложенние 5-го уровня

Аватар пользователя artomas artomas 28 мая 2021 в 21:10

И все-таки отвечу как новичок, можно сказать.

Когда снова взялся за Друпал, первым делом с темами столкнулся. Так вот это просто офигенная штука. Все уже сказано выше (переменные, экстенды, медиа...), но это правда настолько просто и интуитивно понятно, если знаешь css вообще конечно, что уже иначе даже не мыслишь. Плюс у Бутстрапа, например, подробный мануал есть.

Аватар пользователя gun_dose gun_dose 29 мая 2021 в 12:20

Медиа внутри мелектора можно и без инклюдов писать. Типа так:

.some-class {
  font-size: 16px;

  @media (max-width: 666px) {
    font-size: 14px;
  }
}

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

Аватар пользователя VasyOK VasyOK 29 мая 2021 в 14:36

Т.обр. сокращается всего одна строчка. Это не повод вводить новую технологию. Я довольно редко ввожу медиа запрос для одного класса. И отдельный файл для страницы под каждую вариацию ширины экрана тоже не ввожу - это другая крайность.
И через 5 лет похожая конструкция будет в обычном CSS

Аватар пользователя VasyOK VasyOK 31 мая 2021 в 17:26

Если исходить из фабулы: препроцессоры нужны для упрощения верстки, напрашивается вопрос: а зачем верстку усложнять?

Т.е.

  • сначала копаться в логике Бутстрап-а,
  • потом ставить сетки, задавать ширину элементов классами
  • потом изобретать "дерево" по БЭМ

А потом оказывается, что сложно и это нужно упрощать одни сложные инструменты другими.

Аватар пользователя gun_dose gun_dose 31 мая 2021 в 19:43

VasyOK wrote: Если исходить из фабулы: препроцессоры нужны для упрощения верстки, напрашивается вопрос: а зачем верстку усложнять?

Т.е.

  • сначала копаться в логике Бутстрап-а,
  • потом ставить сетки, зад

Так, погоди. А причём вообще бутстрап, сетка и БЭМ к препроцессорам?

Аватар пользователя artomas artomas 31 мая 2021 в 19:51

Ну, как понимаю, это имеет связь все-таки в контексте. Понятно, что можно использовать и без фреймворков, но речь, как понимаю, все-таки именно о связке. Но писать все равно проще, блин) Прошу прощения, что влез.

Аватар пользователя gun_dose gun_dose 31 мая 2021 в 19:59

Ну и как бы всё равно же надо запускать какой-нибудь галп или вебпак, чтобы хот-релоад был. Так почему бы до кучи не вкинуть в него sass? Или ты без хот-релоада верстаешь? Biggrin

Аватар пользователя artomas artomas 31 мая 2021 в 20:10

Ааа, вероятно понял.
Имел ввиду, что можно вообще без всего этого sass, просто css писать и все. Тогда ниче можно и не использовать, если уж так хочется. Тупо пишешь стили сразу и усе. А собираешь, sass не вкручиваешь. Возможно же.
А может и не понял)

Аватар пользователя madt madt 2 июня 2021 в 1:17
1

Это живой (WIP) пример использования scss. Нажми «View Compiled» чтобы увидеть результирующий css.

Здесь, в миксине comment-user() заданы правила для оформления комментария в зависимости от автора комментария: автор материала, залогиненный пользователь, модератор. Вызов миксина — @include comment-user('moderator'); — создаст в css нужные правила. В css пришлось бы отдельно прописать правила для каждого вида комментария, а при дальнейшей разработке пришлось бы помнить (задокументировать), что изменения необходимо вносить во все такие блоки с кодом. В scss изменения нужно будет внести в одном месте. Таким образом уменьшается вероятность появления багов.

Второй момент. Если мне понадобится создать стиль для нового вида комментариев, то я добавлю цвет в карту цветов ($user-palette) и сделаю еще один вызов миксина:

$user-palette: (moderator:  rgb(255, 0, 0),
                logged-in:  rgb(0, 157, 255),
                author:     rgb(255, 157, 0),
                rank-top10: rgb(255, 0, 157));

...

.rank-top10 {
  @include comment-user('rank-top10');
}

Аватар пользователя madt madt 3 июня 2021 в 1:35

VasyOK wrote:
Можно какой-то более лаконичный пример?

Короткие примеры можно в документации посмотреть, например, про управляющие конструкции: 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.