Препроцессор SASS / Урок #4 - Использование миксинов

Подписаться 888 тыс.

Просмотров 48 тыс.

50% 1

Для сокращения кода в SASS используются специальные шаблоны со свойствами - миксины. В ходе урока вы научитесь создавать миксины, передавать в них параметры, а также использовать их для различных объектов.
1) Урок на сайте itProger: itproger.com/c...
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_o...
Twitter - / goshadudar
Уроки от #GoshaDudar 👨🏼‍💻
Все уроки по хештегу #goshaSass

Опубликовано:

6 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 49

@Realing29 5 лет назад

А еще есть краткая запись для подключения "Миксина" вместо "@include nameMixin" можно написать "+nameMixin" пример: @mixin color{ color: white; background: black; div{ +color top: 25px }

@valievruslan7739 5 лет назад

спс

@АртемБондаренко-ж5о 4 года назад

Х.з. у меня не пашет

@dimapetrashchuk3036 4 года назад

+ это запись для sass, @include - для scss (вроде так).

@Дена-ь6ф 2 года назад

точки с запятой надо поставить

@davidsusplaysus Месяц назад

вариант хороший но работает только в sass

@ksushakiseleva2644 4 года назад

Классные уроки, спасибо!

@Александр-ы3й5у 5 лет назад

очень удобный миксин для адаптива: @mixin max-screen($res) { @media screen and (max-width: $res) { @content; } }

@GameChannelOfficial 5 лет назад

Александр Опрышкин какое значение вставил в переменную?

@Александр-ы3й5у 5 лет назад

На место переменной ставишь разрешение экрана, например: @include max-screen(991px) { display: none; }

@aleksandrgradov7859 2 года назад

Все очень понятно! Спасибо!

@Виталий96-к4я 4 года назад

Гоша, спасибо !

@frostkhan2629 5 лет назад

Хорошо что ты сделал новое лого и шапку!!

@Ddddddddyu 2 года назад

Классный урок)

@Ihor.Kuptsiv 5 лет назад

супер, спасибо!

@картес-ж7ж 4 года назад

Лучше при указание параметров в миксине, сразу пишите ещё значение по умолчанию. Например: @mixin font ($color) { -> Если написать параметр без значения по умолчанию вот так "$color" , то работать не будет font-size: 24px; font-weight: 600; flex-flow: Arial, sans-serif; color: $color; } .block { @include font(#fff); } А если сделать вот так, то всё будет работать . Тут мы $color указываем значение по умолчанию "$color: red" Вот тогда всё заработает @mixin font ($color: red) { font-size: 24px; font-weight: 600; flex-flow: Arial, sans-serif; color: $color; } .block { @include font(#fff); }

@vasinadoci 3 года назад

Хоть и время прошло после вашего объяснения, но все равно спасибо, вам хороший человек. А то я уже всю репу расчесала- сама не вдупляла в этот ($color , $fontW) без указания значений, и редактор ругался на такой кодю

@nikitanezhivinski5133 2 года назад

Спасибо тебе добрый человек

@rahmandikaev5922 5 лет назад

все видео посмотрел за один раз

@chopx2356 5 лет назад

Здравствуйте, будут ещё уроки по electron.js?

@Ruslan-f3z2x Год назад

а как сделать миксин, чтоб можно было менять padding на другой параметр, на margin например?

@mentos958 5 лет назад

уууу новая аватарачка и шапка

@Viktorres1 5 лет назад

Разве не лучше использовать модификаторы для классов вместо миксинов?

@kaiser-kishmish 5 лет назад

Давай новые видео по юнити.

@ramzay97 3 года назад

А для чего padd 4 значения? Если по сути есть только W и H??

@realmadrid-ji9bd 3 года назад

👍👍👍

@ithelper9 2 года назад

Мне кажется что mixin это просто функция.

@HA_CTPIME 2 года назад

посмотрел - не понял, посмотрел ещё раз и не понял ещё больше

@alexbyloka522 5 лет назад

Гоша помоги пожалуйста!!! Мы с другом загорелись делать игру на unreal engine 4, но мсы не понимаем как работать вместе ? Перекидывать каждый раз файлы это геморно , а с Git не разобрались !!!

@miku2293 5 лет назад

если одновременно одни и те же файлы не меняете, то можно их просто на Гугл-Диске держать вряд ли кто так делает, но вдруг вам сойдёт

@alexbyloka522 5 лет назад

@@miku2293 большое спасибо , но мне кажется должны быть лучше решения

@Nickkkkkjhg 5 лет назад

Лучшее решение это гит

@mavili-mordecai 5 лет назад

Вот для таких случаев и нужны Git-репозитории -_-, а если хотите нормально работать в команде, то советую вам разобраться в гите. Иначе и смысла нет.

@mavili-mordecai 5 лет назад

И да, что за игруху делаете?

@KeeptheFuckOut 5 лет назад

"что бы передать значение" Вообще не понятно со скобок.

@Ворвзаконе-г5у Год назад

лаконичность кода тьфу ты, о читабельности надо думать

@rradjabli 4 года назад

мой лайк 400 сотый ооо дааа

@gingerred2383 3 года назад

Это фиаско братан. Одна вода. Бла бла бла, тут меняем, тут подставляем, смотрим - ничего не поменялось. Теперь тут подставляем, там меняем ничего не поменялось. Пол урока что-то делал- одна единица синим горит. Бред.

@ThomasBlack452 7 месяцев назад

Да, это неправильно, на мой взгляд. Если вносишь изменения, то должно что-то меняться, а не оставаться прежним, только записанным иначе.

@touze69 3 года назад

Георгий. Делайте тайм-коды :)

@gosha_dudar 3 года назад

В новых видео уже делаю)

@korvinplay5482 Год назад

5:00

@IvanKeats-q3q Год назад

верная твоя мамаша ,ответ правильный

@gokes2520 6 месяцев назад

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