ТОП 5 преимуществ CSS препроцессоров (LESS, SASS / SCSS, Stylus). Какой препроцессор css лучше
ฝัง
- เผยแพร่เมื่อ 12 มี.ค. 2019
- В этом видео разбираем основные преимущества самых популярных CSS препроцессоров (LESS, SASS / SCSS, Stylus): переменные, импорты, вложенность, миксины, функции.
Мы продолжаем серию видео уроки верстки для начинающих. Сегодня мы разберем топ 5 преимуществ CSS препроцессоров. нужны ли препроцессоры css, какой препроцессор css лучше, и отвечу на вопрос препроцессоры css какой выбрать. Обсудим в целом css преимущества недостатки. Препроцессоры используются для фронтенд сайта, чтобы верстка страницы css была удобнее и позволяет гораздо быстрее переделать оформление сайтов css. Поэтому если вы часто сталкиваетесь с задачей изменить css на сайте. То препроцессоры css могут в этом помочь. один из популярный - less препроцессор css
=======================================
Препроцессоры:
sass-lang.com/ - SASS / SCSS
lesscss.org/ - LESS
stylus-lang.com/ - Stylus
![[UNCUT] ฝันรักห้วงนิทรา | EP.8 (4/4)](http://i.ytimg.com/vi/RDYJYiDwsj0/mqdefault.jpg)
Не забудьте заглянуть сюда:
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
В каждой среде есть свой крутой лысый))
А теперь подробно и обо всем и с практическими примерами и вообще топчик)) прикольный стиль заставок лысый на желтом фоне))
Огромное спасибо за крутой плейлист! Очень круто что все быстро и с примерами.
Огонь! Максимум полезной информации и минимум воды.
Просто замечательно! Спасибо!
Это охренеть как полезно,спасибо.
Спасибо. Было очень полезно
Это видео оказалось третьим по препроцессорам которое я посмотрел. До этого оба почти по 40 минут и толку 0, одна вода!
Тут же за 10 минут все четко и по теме, да ещё и с примерами!!! Большое спасибо за видео!
Я б подсказал канал...где подача материала на высоте:) воды 0
Виталий, я согласен с
Max Shevchenko, что нужны примеры, так сказать практическое закрепление пройденного!!
Шикарно! Очень наглядно. Спасибо)
Благодарю -)
очень подробно и понят, спасибо за видео!
Большое спасибо))
класс, спасибо за детальное объяснение, ждем видео о сборщиках.
Уже есть на канале -) Gulp уж точно -)
Спасибо за обьяснение!:)
Спасибо за полезную информацию
спасибо, очень наглядно и актуально.
Спасибо, очень интересно и полезно.
спасибо за работу !!!всё коротко и понятно
Благодарю
Спасибо!
1) в обычном в css есть "переменные", можно использовать для цветов. 2) Есть такое понятие как сборка, там css может собираться в один, либо вообще вставляться сразу в html тегов style, и кол-во запросов будет минимум. 3) миксины норм. 4) Ну осветлить можно и при помощи фильтра
спасибо большое!
Спасибо! Есть ещё PostCSS-cssnext это когда мы пишем цсс будущего а оно нам его превращает в тот в который умеют современные браузеры.
Это позволит в будущем отказаться от препроцессора полностью 😏
четко быстро и по теме
Спасибо))
Лайк !! подписка !!:)
Годнота
Уважаю тебя мужик💪
Благодарю
Спасибо, хоть кто то объяснил для чего вообще это нужно
Обращайтесь)
Привет. Сделай такое же видео, про HTML препроцессоры: pug, haml и прочие. Почему-то на эту тему мало роликов.
Сам давно пользуюсь sass+pug. Видео мотивирует попробовать перейти на скобки и запятые хотя бы в рамках одной вёрстки, сравнить удобство, раз scss более новая версия sass, возможно в этом что-то есть, в пользу отказа от бескобочного sass синтаксиса.
По поводу цветов. Дефолтный css позволяет использовать переменные, очень просто.
По поводу импортов. Дефолтный css тоже так умеет.
По поводу вложенностей. Удачи вам разобраться в такой портянке, когда проект разрастётся. При грамотном форматировании css тоже можно читать.
Миксин - синтаксический сахар. Экономия времени 2 секунды. Если она вообще есть, т.к. автоимпортов в scss насколько я знаю нет ( поправьте если я не прав ).
Функции. За свой опыт я не сталкивался с такими ситуациями, когда calc не решал мои задачи. С цветами ужасный пример. т.к. дизайнер в ui ките обязан перечислить все цвета, используемые в проекте.
Итого, дополнительная зависимость на проект, велик шанс провалиться и запутаться во вложенности ( не дай бог это будут миксины ), сложности в переносе проекта ( всё время вываливаются ошибки ), но, соглашусь, удобная система дополнения имён через амперсант, если использовать бэм или его аналоги.
И ещё в защиту скажу что видел сложные качественные анимации на препроцессорах, но страшно представить какие бандлы из них получаются.
Всем добра.
до данного объяснения был "знаком" с препроцессорами 5 минут по видео, благодаря вашему объяснению почти всё понял, спасибо
Thanks
Мне очень нравиться, то как вы даете информацию, услышал о вас на канале АйтиБорода. Но полосатая рубашка в глаза бьет, и у меня то ли глюки, в галазах появляються желтые круги от екрана)
Ничего себе...
по поводу нескольких css файлов. по моему в обычном css также можно сделать импорт всех в один?
Подскажите, пожалуйста, мне нужен аналог функции spin как у Less для использования в коде JS (в инпуте выбираю цвет, и надо потом все комплиментарные цвета вывести). А как я понял, все функции препроцессора доступны только в файле со стилями. Есть ли какие-то библиотеки может аналогичные? Пробовал искать, но пока безуспешно.
так так
Топ видос
Благодарю
Привет. Расскажи про html препроцессоры также)
Добрый вечер. Если я поставил в vs code плагин sass, то автоматом будет пониматься и scss ? Ну и переделываться в css с помощью плагина лайв сасс компиллер?
good
5й пункт на ccs filter:brightness(110%); как по мне проще.
Использовать, наверное, придется, но это далеко не самая необходимая вещь, имхо.
Переменные - есть в css.
В один файл можно импортнуть другие.
Изменять цвет "текста", "бг" можно фильтрами.
Вложенность - вот чего не хватает css.
За видео спасибо!
Наследственность, функции, миксины, сокращение кода
@@dendyzet751 все это есть и в обычном CSS, кроме миксинов, которые не особо и нужны. А сокращение кода - а зачем? Кода меньше, да, рай для минималиста, но производительность одинаковая с обычным стилем написания CSS, и будет минус - ухудшится читаемость кода
Спасибо за видео, но есть одно замечание: слово height произносится как "хайт", а не "хейт".
В каждом английском (американский,британский и тд)свое произношение,у кждого человека тоже...
@@vlsh0 в данном случае не совсем. В русском языке тоже многие говорят "дермаНтин", и оправдывают такое произношение тем, что якобы бабушка так говорила, а, стало быть, это культура и древние традиции.
Кроме того, его произношение свидетельствует скорее о незнании стандартных правил английского языка, изучаемых во всем мире, нежели о специфике произношения.
Неприятнее другое - многие программисты, несмотря на то, что тесно работают с англоязычными терминами, ни черта не знают языка и произносят английские слова как попало. Вот этот парадокс лично меня как минимум удивляет.
@@MerriedFellow Видимо они концентрируются на программировании, а не на английском, всё таки программисты)
@@iamname8758 вот именно, без разницы как произносится, не суть важно)
Спасибо за видео, теперь осознал, что это за птица такая scss.
Благодарю -)
Виталик , я уверен, что у тебя есть какой-то свой план развития канала, но если бы ты мог от этого плана отклонится буквально на 1 видос , то выпусти, пожалуйста, для меня подробный видос про то, как тонко настраивать слайдеры. Вот начиная от кастомных стрелочек ( а не стандартные фоторама.ио) и заканчивая кастомизацией стилий переходов (например модный щас на западе так называемый Thanos effect). Вот такая тема лично для меня будет как глоток свежего воздуха :)
Танос? В слайдере? Да ты гонишь)) Кинь ссылку мне в телегу или в вк, заценю. Я в видео хотел сделать такое, но оказалось очень замудренно, а в хтмл так вообще)
@@prosto_razrabotka я таноса в сдайдере увидел вот тут
th-cam.com/video/bjUoQbSJDJs/w-d-xo.html
Второй по счету еффект на 0:20
Воу... я впечатлён.
Привет, подскажите кто знает может, как в VS Code на sass сделать что бы например после background: url(" ") выскакивала типа подсказка пути к файлам, а не самому вручную писать этот путь. На CSS и SCSS такая подсказка появляется...
нормалек
не ну это понятно
Недостатки обычно тоже называют
Ребят подскажите а псевдоэлементы ::before, ::after , а так же псевдоклассы :hover и другие ,каким образов заворачивать в препроцессоры?
&::before, &:hover
@@nameandrey6602 сенк)
Вопрос, после просмотра, таки возник. Что лучше новичку: 1. сначала привыкнуть к нормальному написанию css или 2. сразу писать в препроцессоре т.к. все равно потом его использовать? Сомнения изза двух мыслей: 1. если сразу писать в препроцессоре, то потом не разобраться в обычном css и 2. на собеседовании завалишься т.к. не сможешь в чистом css что нить написать.
Что есть нормальное?! Ключевая функция в препроцах - вложенность. Потом миксины, переменные. Все. Функции практически никогда не используются. Ну и зная эти вещи - как они мешают писать на чистом ксс?
2:55 Тут точно не @include, а @import
Мне кажется или на 3 минуте видео опечатки. Вместо @include должен быть @import в примере. Заранее прошу простить, тк только начала изучение препроцессоров.
Я вас поздравляю, у вас все хорошо с внимательностью)) Вы кажется первая кто это заметил (ну или первая, кто написал)
@@prosto_razrabotka Спасибо!
Мужик, нужен твой грамотный ответ. Верстаю сайт, дошёл до адаптива. Решил прописывать @media в каждом scss файле, т.к. стили секций разбил всё по папкам. Но вот проблема. Gulp SCSS не складывает @media. У меня в файле css получается
@media screen and (max-width: 768px) {
.main {
}
.main__title-box::before,
.main__title-box::after {
}
.main__title {
}
}
@media screen and (max-width: 768px) {
.header {
}
.header__items {
}
.header__phone {
}
}
Есть ли вариант сделать так:
@media screen and (max-width: 768px) {
.main {
}
.main__title-box::before,
.main__title-box::after {
}
.main__title {
}
.header {
}
.header__items {
}
.header__phone {
}
}
заметил что когда пишу на сасе у меня когда код переводится в обычный цсс - в нужных местах он сам проставляет кроссбраузерные теги, мне не нужно париться искать на кэн ай юз те или иные своейста, как они отображаются в других браузерах, я просто пишу стили, а сас сам в нужных местах заполняет файл со стилями кроссбраузерными стилями. Это вообще наверное самое лучшее преимущество препроцессоров.
Это делает не препроцессор, а сборщик
@@prosto_razrabotka не знал, долго понять не мог откуда они берутся в цсс файле :)))
Абсолютно не важно какой препроцессор выбрать для проекта?! Да Вы что, конечно же это важно! Все зависит от проекта, от его структуры, того как там расположены модули и компоненты и вообще что они из себя представляют.
У каждого препроцессора есть свои недостатки, из-за которых он может просто не подойти для конкретного проекта, на вскидку: SASS не умеет в относительные url при инклюде, LESS умеет, но в нем нет некоторых полезных вещей, которые есть в SASS и т.п.. При работе с React сейчас все коллеги переходят на CSS-in-JS, хотя препроцессором его назвать сложно - это уже другое.
скажи пожалуйста! обязательно ли учить HTML SCC и JS если есть много хороших конструкторов????
Закрытые системы на конструкторах не делаются.
Любой не шаблонный дизайн на конструкторе не сделать
Просто: разработка Учить и не лениться да???)
Ну, это уже ваше дело..))
Просто: разработка понял! Спасибо за ответ
Css*
Нормальный контент,только мне кажется,сидя и в более неформальной обстановке плюс фон какой нить интересный(а не тупо стена),видос бы лучше зашёл ))
Ну чувак, думаю это уже вкусовщина, я например зашёл посмотреть про пре процессоры. Вот никакого дискомфорта, чувак говорит и по пути показываются примеры, что еще тебе нужно я не понимаю.
@@lajaconda6018 да мне то вообще ничего не нужно уже)я просто говорю как видео ,по моему мнению ,смотрелось бы лучше)
@@user-um4rm1no3b ну каждому не угодить в любом случае, но я понял что это твоё мнение, впрочем я так же и оставил и своё)
а что такое css?
Т
1:48 - css препроцешевыеыев 😂😂
Переменные в CSS уже давно доступны из коробки, не нужны никакие препроцессоры.
1. Поддержка в ИЕ практически никакая
2. Препроцессоры - это не только про переменные
@@prosto_razrabotka Но большинство, если не все - используют только из за этого. И вы тоже назвали первым преимуществом.
1. Поддержка в ИЕ практически никакая - Это сомнительный козырь. Зачем поддерживать то что не поддерживает сам разработчик? Я думаю сейчас мало кто использует ИЕ. Хотелось бы что бы заказчики забыли о ИЕ и разработчики тоже=)
2. Препроцессоры - это не только про переменные - тогда бы смысла их использовать вообще не было.
Dmytro Winter.
Когда-нибудь препроцессоры заменит чистый CSS.
IE 6-11 если верить Can i use использует около 2.5% пользователей.
На примере магазина потеря этих пользователей потеря возможной прибыли.
Если заказчику важна эта вероятная прибыль то приходиться и препроцессор и другие инструменты использовать.
А так да многие вещи можно и на чистом CSS делать.
В крупных компаниях верстальщика не спрашивают, для каких браузеров верстать, тебе дают требования.
Зачем поддерживают? Даже сегодня через IE работает около 6% процентов всех пользователей. Чаще всего - госслужащие, служащие компаний со строгой политикой контроля выхода в интернет и далекие от IT люди. И чем крупнее фирма, тем более доступным должен быть ее сайт. В Америке, если не путаю, в некоторых случаях можно налететь на штраф, если твоим сайтом не смогут воспользоваться по назначению.
Ну и как бы вы сайт не для себя делаете, а для обычных пользователей.
@@dmytrowinter2310 сразу видно, что либо вы упорно противитесь переменам/развитию) либо верстали меньше 3х сайтов )) Для меня препроцессор это в первую очередь скорость написания css, она в разы выше (пользуюсь sass)
Вы серьёзно? В 2019 году, когда уже все браузеры понимают нативные переменные в ванильном css приводите первым преимуществом препроцессора использование переменных?
Далее вы советуете использовать миксины, но разве это не означает отсутсвие понимание принципов работы css? После компиляции вашего кода в css файле будет дубликаты. А как же принцип переиспользования? Или css не язык программирования, а значит чтои на переиспользование кода нужно положить болт? Если у тебя в куче мест используется один и тот-же набор стилей, то нужно их вынести в отдельныйкласс и подключить его к нужным элементам. А не копипастить одни и те-же строки в куче мест. И толку от того, что код красивый при разработке, если на продакшене куча дубликатов?
Математические операции в препроцессоре, это хорошо, но css позволяет вычислить размеры в действительно сложных местах и без препроцессора.
Так, что три зи пяти преимуществ притянуты за уши. Ладно бы этот видос снимали до выхода css3, ещё было бы понятно.
Люблю таких комментаторов!
Я думаю, что если бы была поддержка "всех браузеров", то было бы 100%, а не 93%, как сейчас. (информация с сайта caniuse)
Далее, я бы вам посоветовал для начала разобраться с тем, что есть миксин, а не рассказывать тут про "понимание принципов работы css"...
Как найдёте ещё "недостатки" в видео на канале, возвращайтесь. Буду рад пообщаться.
"И толку от того, что код красивый при разработке, если на продакшене куча дубликатов?" Вы серьезно? Где важна красивость кода -- при разработке или на продакшене? Может еще давайте так будем бинарники критиковать, там же повторения и вообще не красиво, хрен че поймешь
зеленый делали. знаем. ага
Все это есть в CSS из коробки, кроме вложенности и миксинов. Вложенность нах не нужна практически, ибо БЭМ, каскад низя. Миксины вообще сомнительная штука.
ты так тяжело дышишь, аж мне не по себе стало
Много лишних движений, мало примеров
1:55 не понимаю зачем вообще столько классов писать, если они один и тот же параметр имеют
Это ПРИМЕР!!! Представь, что у тебя 1000 строк и десятки классов в нем, которые содержат одинаковое свойство цвет с одинаковым значением и плюс другие свойства.
В 2к19 рассказывать о переменных препроцессорных как о преимуществе перед css??) Это прикол?)
Размытый шрифт, неприятно смотреть на код, попробуйте улучшить качество, спасибо :)
Походу вы не знаете что и в CSS переменные есть
пздц, аж стыдно что смотрю чела который работает на зарплату, хоть и в IBM, чьи акции держу..
Зачем мне в одном файле все стили если пользователь может даже не дойти. А кэширование разве отменили?!