Препроцессор Sass. Функции и миксины
ฝัง
- เผยแพร่เมื่อ 14 ก.ค. 2020
- Привет!
Препроцессоры - это по сути CSS на максималках, улучшенный язык. С их помощью можно делать действительно сложные вещи, используя функции, переменные и прочие прелести. В этом цикле видео посмотрим на самое основное, что они умеют, и как с ними работать. Поехали!
Данное видео про функции и миксины в Sass.
sass-scss.ru/ - документация на русском языке
marketplace.visualstudio.com/... - live sass compiler
marketplace.visualstudio.com/... - sass-расширение
clck.ru/Pe9Jx - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #препроцессоры #sass
Заметил, что при объявлении функции было использовано 2 параметра value и base: xxxx. Вопрос можно ли указывать, по мимо value, еще и base игнорируя значение по умолчанию?
да в теории можно) это уже мелочи
А почему vw а не vmax? Какие единицы лучше использовать в каких случаях?
Привычка) vw для десктопа, vmin для мобильной верстки.
в прошлом видосе еще хотел спросить, про имена файлов с нижнего подчеркивания........ я не ставлю нижнее подчеркивание и у меня не создается файл с таким же именем в папке css при компиляции
Ну, видимо я сам наслушался в процессе своего обучения, что это влияет))
Проверю как нибудь, спасибо
Проверил еще раз - это скорее связано с галпом :) Привык препроцессоры всегда с ним использовать, вот и сказал. Там, если не сделать подчеркивание - файл попадет в итоговую папку
@@maxgraph ну да, с галпом через нижнее подчеркивание, согласен
Я сначала тоже думала из-за галпа, но поэкспериментировала без него, дублирует папки, расширение sass компиллер
Когда будет видео с использованием функции vw ?
Пока по планам - во второй половине месяца.
@@maxgraph других видео нет на Вашем канале с использованием этой техники?
Нет
@@maxgraph VW и остальные единицы измерения
?
Верстаю сайты для практики, адаптирую по медиазапросам, хочу попробовать использовать миксины. Пишу на препроцессоре scss, но миксины не использовала, просто в глобальных прописывала какому-то классу стили , потом задавала этот класс нужному тегу, ну и переменные для цвета там итд. Хочу научиться адаптировать быстрее с помощью миксинов, вот бы был урок для совсем начинающих, пока многое непонятно...
Как успехи?
@media для определенной ширины пишем же один раз. В чем тут польза миксина?
Почему один?) в нужном селекторе пишу, можно писать и в 20 селекторах)
@@maxgraph о как! Можно конечно) Вот даже в июньской верстке макета на этом канале, в 8 части по-другому. Делается адаптив - сначала принимаем, что на таких то ширинах будут изменения с помощью @media, прописываем их. Затем кладем туда селекторы. Так же? Как бы негласное правило такой организации? И теперь меняем на миксины. Не понимаю в чем тут преимущество миксин. Их, если не ошибаюсь, будет такое же количество как @media.
Так там чистый css, нет вложенности. Я поэтому и пишу в одном медиа там
А тут пишу прямо в селекторах, с помощью миксина. Так удобнее
@@maxgraph спасибо! Но пока что-то не догоняю о пользе миксина)). Нужна подробнее посмотреть про него и применить
Будет скоро видео по sass новое, с практикой) смотрите, поймёте)
а em и rem не то же самое делают, что и эта функция?
Вообще не то) в отдельном видео увидите
@@maxgraph Когда будет видео с использованием функции vw ?