0: Всем привет. Ну что у нас герой дня? Это, конечно же, препроцессоры. Устраивайтесь поудобнее и давайте разбираться, что это такое. Постараюсь максимально кратко. Понятно, удобно. Без лишней воды. Буквально 10 минут должно быть интересно. Наверняка вы знакомы с вёрсткой?

1: Cs и думаете, как можно улучшить свои навыки в css? Соответственно слышали что-то про препроцессоры, но не знаете, стоит их изучать, не стоит, понравится, не понравится, да и вообще, возможно, придётся переучиваться не тут то было сразу хочу сказать, что если мы говорим.

2: Про препроцессоры неважно какой вы выберете, естественно, это 1 из самых лучших решений для использования в css. Это такой больше программный подход к css, поэтому если вы их не используете, для вас будет максимально полезно, если используете возможно.

3: Найдёте для себя что-то новенькое, интересненькое, потому что я в своё время использовал припроцесинг для переменных, а потом понял, что там целый мир в препроцессорах, так что давайте разбираться по шагам. Итак, изначально у нас есть самый стандартный html в данной ситуации это

4: Продукт карт. Я создал такую базовую карточку, внутри которой просто использовал девы, чтобы мы не привязывались ни к семантике, ни к ссылкам там чему-то подобному. Это у нас супер крутой товар. Внимание это продукт карт тайтл. Я использую методологию, бэм, потому что здесь тоже есть хоро.

5: Сочетание. Ну и конечно же, продукт карт прайс. Это у нас цена нашего товара, опять же произвольная. Ну и конечно, куда же без кнопки купить? Напоминаю, что у всех одинаковое название. Я взял такое пообъёмней проду карт. Мне даже сказать сложно. Чушь.

6: Про записывать элементы на английском языке. Естественно, давайте смотреть, что у нас есть в препроцессорах. Итак, 1, на что хочу обратить внимание, это, ну вот нужно ли мне это использовать вообще при изучении любой технологии? У вас всегда должна быть 1

7: Хорошая мысль. Вам необходимо подумать, а действительно сэкономлю я время. Буду ли я кодить быстрее и качественнее? Ну и понятное дело, что при процессоры это как раз быстрее и качественнее. 1. Вот я пишу абсолютно любой css код и.

8: Стенько у меня была такая составляющая, что ты написал 1 строчку, давайте возьмём обычный css border radius и, соответственно, очень хорошо, если редактор автоматически дописывает точку с запятой, но это бывает не всегда, и, возможно, используешь какие-то там аля дописать.

9: Что-то ты её забываешь. Вот в этот момент времени. Естественно, это будет фатальная ошибка. 2 фактор это фигурные скобочки. Замечали ли вы интересную особенность, что буквально, если ты там забыл закрывающуюся фигурную скобку, у тебя действительно все

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

11: Нужны ли мне фигурные скобочки точки с запятой? Давайте взглянем на самый обычный стиль. Например, у меня написан контейнер. Вот у меня есть блок контейнер, который представляет из себя значение ширины. Ну так зачем мне фигурные скобки? У меня и так есть наглядность. Я и так использую редактор кода.

12: Нужно. Открывающийся, закрывающийся. Зачем мне точка с запятой? То есть по факту она ничего не делает. Мы всегда переносим на новую строчку перед глазами. Вы видите при процессор сас, его синтаксис именно такой точки с запятой. Фигурные скобочки отсутствуют. Круто здесь сразу хочу

13: Сказать по поводу других препроцессоров, это препроцессоры лес, там, не знаю, стайлус и какие-то другие, да, действительно, они все будут очень похожи. Но, например, я использовал при процессоры лес, там есть точки с запятой, есть фигурные скобочки, меняют ли они? Нет, мне саст нравится чуток.

14: Больше 2 фактор, что есть прям половина по статистике, где-то 50 на 50 половина тех, кто говорит, что обязательно использовать там точки с запятой, фигурные скобки, жить без них не могу. Да, есть такая особенность, называется c css. Так что все, что я сейчас буду рассказывать.

15: Если вам не понравились только точки запятой фигурной скобки, хотите их вернуть? Ваш препроцессор это с css. Хорошо, мы сейчас будем разбирать на примере 1, смогу ли я использовать другой. Да, они очень похожи. Здесь небольшое детское сравнение, это как Марка автомобилей, то есть

16: Если вы научились ездить на 1 марке автомобиля, это не значит, что вам только её нужно покупать. Спокойненько пересядете на другую. Буквально там, не знаю, попереу иваться пару минут, и все будет работать легко, хорошо. Ну, естественно, я сказал такую классную удобную фразу.

17: Это программный подход к css. Программирование в целом подразумевает создание переменных переменные есть ну, я бы не сказал, что это такая какая-то фишка. Вау, из за этого буду использовать препроцессоры это было тогда, когда ещё не было стандартных перемен.

18: Которые используются непосредственно в чистом css, но здесь переменные, как будто чуть удобнее, то есть я их могу создавать где угодно, пишутся они через значок доллара, двоеточие и присваиваю ей значение конечно же, переменные удобны тем, что я их могу.

19: Использовать где хочу. Ну, например, у меня для цвета текста в данной ситуации супертовар и для фона кнопки используется переменная это primary colour. В данной ситуации такой, знаете, самый главный цвет, чаще всего селективный цвет.

20: Смотрим где у меня есть элемент title color вот он представлен где у меня есть элемент button background color и там и там я записываю переменную соответственно синенький цвет давайте исправим на что-то такое супер яркое.

21: Поставлю значение ред, смотрю, да, действительно, красный здесь красный. Здесь, кстати, ещё при процессоры могут даже оттенки менять, можно вычитать цвета, но, честно говоря, это чаще всего сложно. Поэтому я не рекомендую. Тем более на начальном этапе, если вы хотите только познакомиться, бежим, да.

22: Дальше следующая проблема или особенность, которая у нас есть, это вот когда я создаю стили для продукт карт, он сам по себе самостоятельный. Мне так нравится, в что я могу их вот так наглядно свернуть. Соответственно, я понимаю, что здесь все, что связано с карточкой. Ну и это же

23: Дальнейшем будет компонентом вот в препроцессорах, к сожалению или к счастью, у нас вот появляется такая возможность, почему, к сожалению, тут не сворачивалось раньше? То есть я понимал, что вот наглядность была примерно такая же, сейчас все сворачивается и, соответственно, я могу

24: Все стили, которые написаны для продукт карт, свернуть в 1 блок. Ну конечно же, это ещё не все, все, что находится внутри нашего блока, будет вот с таким вот отступом. Тем самым я ни в коем случае не запишу вот этот продукт тайтл где-то там, выше, ниже. Знаете, бывает за

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

26: Но потом найти те или иные особенности невозможно. Итого смотрите насколько наглядно все получилось элемент находится внутри шикарно, элемент сворачивается шикарно. Нужно что-то добавить. Соответственно я могу это сделать. Ну и вы могли заметить здесь такое вот на

27: Амперсант стоит. Что это значит? Название? Продукт карт берётся точно такое же. То есть то, что выше. Вот она часть поставит вместо значка персана. Гениально. Продукт карт писать сложно, но здесь это не нужно. То есть ты

28: Только дописываешь те самые составляющие. Поэтому, если используете методологию, вложенность будет просто шикарнейшая. Отлично. Бежим дальше. Ну и здесь я закомментировал сразу вот эти вот составляющие. Здесь у меня 2 файла для примера, и это возмо,

29: Можно, ну, например, переменные переменные можно вынести в отдельный файлик, чтобы потом не бегать, не искать их по всем каким-то отдельным документам. Я могу их вынести отдельно. Миксины сейчас расскажу тоже могу вынести отдельно. Ну и давайте какой-то стандартный пример. Вы, например, решили на

30: Сайт на html, css. И у вас есть страница каталога или страница контакта, вот где писать стили для страницы контакта, они где-то ниже, их надо как-то где то подписывать, от этого все теряется, мы можем использовать use и дальше назва.

31: Файла, название файла и все. Представляете, у вас может быть разбиение файла стилей на удобную составляющую, которую вы хотите, хотите вынести стили для шапки, без проблем хотите вынести только переменные. Тоже все будет работать. Ну и понятно.

32: Дело, что в данной ситуации я не рекомендую разбивать, например, на шапку подвал, но вот для какой-то отдельной странички, знаете, бывает лендинг пейдж какой-то самый главный и прям целый портал. Конечно же, его стили было бы здорово хранить отдельно, переменные шикарно будет хранить отдельно.

33: Сейчас узнаем, что это такое. Тоже в идеале хранить отдельно. Ну и глобально, может быть 1 главный файл, который состоит из мини этих файликов, которые вам необходимы. Так что все можно будет найти, создать, но здесь выдаёт ошибку, потому что, естественно, у меня отдельных

34: Файликов нет. Важно, когда вы создаёте файл, обязательно его начать с нижнего подчёркивания нижнее подчёркивание названия файла точка сас это возможность, соответственно, создать препроцессорные файл, но из него файл css не появляется. В конечном итоге все соберётся в

35: 1 глобальный стайл сисс снова же плюс для нас. Ну что, конечно же, давайте смотреть миксины. Мне кажется это самая такая функционально мощная часть, которая есть в при процессорах. И я весь код могу разбить на какие-то логические

36: Составляющие ну вот я, например, там 1 или чаще всего, что демонстрирую, это центрирование вот центрирование любого элемента это display flex ну, скорее всего, flex wrap, wrap дальше элайн айтом центр и justify content center 4 свойства, которые не хочется.

37: Записывать центрирования много, то есть оно очень часто встречается на страничке. Можно создать миксин. Это, соответственно, объединение тех самых 4 свойств, которые я могу собрать воедино. Но есть ещё 1 особенность в миксин я могу передавать значение, это как параметры, функции.

38: Ну, например, если мне необходимо ещё указать значение цвета, представим себе. У нас стандартный текст. Идёт цвет, размер шрифта, начертание шрифта и так далее. Вот что из этих параметров чаще всего меняет цвет и размер шрифта, толщина шрифта, высота там

39: Линии, они, например, стандартные, вот общие части и дополнительные, да, пример такой, вот, знаете, наглядной функции. Итого пишем собачка Мексин, придумываем любое название. И здесь могут быть параметры нашего миксина. Ну, соответственно, если пустое, то без

40: Них чисто идеальное центрирование, без них, ну, например, colour можно дописывать уже и здесь, но, помимо всего прочего, так как у нас программирование, мы даже можем создавать конструкцию if if это если опять же наверняка видели что-то подобное в

41: Программирование. И здесь, если левел равняется 1, то выставляем вот такое свойство элс иф. Соответственно, если левел равен 2, то букс шедоу, ну и так далее. Соответственно, стандартный иф, который у нас может присутствовать

42: Итого мы получаем прям целую логическую конструкцию, которой можно управлять, где эта штука вызывается. Карт шедоу вызывается в блоке prod card. Обращаю внимание, вот сюда строчка 23. И, соответственно, мы пишем. Include? Include?

43: Как подключение нашего миксина карт шедоу и передаём значение 1 соответственно, это у нас аргумент нашего миксина, мы соответственно попадём сюда и в итоге подставится вот это вот box shadow, значение круто да, действительно мы получаем

44: Там такой простой, наглядный и удобный вариантик. Также из интересных особенностей у нас может быть вложенность ещё больше. Ну, например, на элемент бат нужно сделать наведение, он возьмёт вот эту часть, вот этот амперсант.

45: Это у нас вот этот вот продукт карт, 2 нижних подчёркивания батон и на него добавим какой-то эффект наведения в эффекте наведения мы можем указывать опять же, что хотим. Ну и, конечно, вишенка на тортике это у нас математика, математика.

46: Самая стандартная. То есть мне не нужно ничего подключать, не нужно писать калькулейт. Я могу просто 900, там, 60, например, разделить на 2 и получить результат. Это бывает ситуации каких-то отступов. Например, тебе нужно сделать значение ширины у блока меньше на 10 пикселей. Ты можеш?

47: Написать, но это также отлично сочетается с переменными, которые, например, ширина блока выставлена, там, не знаю, 500 пикселей, - 10 пикселей. Ты уже записываешь как обычную математику. Ну и, конечно, я хочу подвести такой, знаете, глобальный итог. Понятное дело, что про

48: Процессоры можно рассказывать там часами применять их на тех или иных разных ситуациях. Поэтому мне хотелось вас вдохновить. То есть данное видео посвящено тому, что у вас есть возможность использовать препроцессоры на максимум, если захотите, да, там

49: Есть чуть чуть больше. Если вы хотите, например, использовать только для вложенности, для наглядности, без проблем. Хотите разбить свой проект на отдельные файлы? Отлично подходит. Хотите избавиться от точек с запятой и фигурных скобочек? Вам они надоели тоже идеальное решение получа.

50: Выбор за вами. Хотите используйте 10% процессоров, хотите используйте 50, хотите ееще дочитайте. У них очень чаще всего там полезная, классная наглядная документация. Все, соответственно, будет на все 100%. Действительно.

51: Будет намного удобнее. Я бы, наверное, сказал глобальнее о том, что редактировать или там поддерживать проект на препроцессорах намного удобнее, намного приятнее. Так что обязательно применяйте на практике. Выбирайте и другие препроцессоры, если вам интересно.

52: Они все очень сильно похожи естественно все будет работать хотите просто протестировать, просто посмотреть, заходите в кодепен здесь соответственно я нажал на шестереночку и выбрал препроцессор sass. Ну или опять же какой-то другой тоже можно будет протестировать ну и

53: Конечно же, не забываем подписываться на канал. Здесь очень много полезного бесплатного контента. А если хочешь получить отдельные курсы, тоже бесплатные, тоже интересно. Функционально. Ссылка в шапке профиля, переходи. А у меня на сегодня все, до встречи в следующем видео.