Препроцессор SASS / Урок #1 - Что такое SASS, SCSS. Установка

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

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

50% 1

SASS или же SCSS это препроцессор, который служит для быстрого написания стилей на языке CSS. Благодаря SASS вы можете добавить переменные, функции, наследование и многое другое к обычному документу CSS.
1) Курс по CSS: itproger.com/course/css
2) Официальный сайт: sass-scss.ru/guide/
3) Курс по SASS на itProger: itproger.com/course/sass
4) Редактор: atom.io/
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #goshaSass

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

31 мар 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@frizovshik Год назад

Итого Дударь произнес: Sass - 37 раз, Scss - 28 раз, Css - 45 раз.

@redblue2704 5 лет назад

ОООО!!! Вот это тема! Выпускай по чаще такие видосы

@user-ve7tx3ud6n 3 года назад

Спасибо за прекрасный урок.

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

Ну наконецто годното)пришлось 2-3 часа возится и нашел годный контент!

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

Спасибо вам, помогли разобраться!) 👍👍👍

@Bbuhtin 5 лет назад

О, класс! Годнотища подъехала! Мега полезная тема, а главное - перспективная и новая.

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

Такая же бесполезная, как и jQuery.

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

@@DV_28rus объясни плиз, только прошел jquery и он мне оч понравился тк js показался не слишком понятным и удобным, а вот sass не особо понравился по видео, думаю сейчас, стоит ли учить или нет

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

@@constantin1693 любая библиотека, особенно в большом проекте - это костыль. Да, jQuery удобен, но только для тех, кто не понимает как работать с DOM в js.

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

@@DV_28rus lol what? Да, JQuery и в самом деле морально устарела (хотя ее некоторые личности используют до сих пор) но `любая библиотека - это костыль` ?.. любая библиотека это просто сахар. Можно и JS назвать костылем для более низкоуровневых вещей вроде ассемблера.

@user-oc4yz1is6x 3 года назад

А чем отличается подключение этого урока от скачивания плагина в Visual Code, например?

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

Спасибо вам огромное за это видео!

@user-xu8go4vp3t 5 лет назад

Привет, очень понравилась серия видео о Game Maker Studio. Очень интересно, подробно и без лишней воды. Хотелось бы увидеть ещё серию видео по GMS. Про более специфические возможности gamemaker'a. Может продолжить серию про РПГ

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

Спасибо Гоша!!!! Только ты мне помог!! А же ж целый день убила на свою проблему)

@user-oj5fj3yz1x 4 года назад

Хорошее начало)

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

спасибо легко и просто )

@arinakolo6548 5 лет назад

Здравствуйте хотел спросить вы пользуйтесь Visual Studio Код там же можно писать на всех языках программирования

@user-mn1pf8sd8s 2 года назад

спасибо друг... помог разобраться

@bjornedvardsson5510 Год назад

Вопрос: из-за разницы синтаксиса в отображении пути к файлам (в scss указывается так: "/img/strelka.png", а в обычном css-файле первый слэш нужно стереть (так: "img/strelka.png"), получается, что моя страничка прекрасно выглядит, когда я работаю через prepros, но когда я хочу просто открыть index.html, то, соответственно, в нём не те ссылки, и приходится всё руками переписывать. Как пофиксить?

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

Спасибо за урок! Может быть подскажете, как решить проблему: koala удаляет скобки в записи transform: translate (-50%, 0%), из-за этого функция не работает. Можно менять вручную в css, но при каждом использовани препроцессора снова слетает.

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

Привет, подскажите кто знает может, как в VS Code на sass сделать что бы например после background: url(" ") выскакивала типа подсказка пути к файлам, а не самому вручную писать этот путь. На CSS и SCSS такая подсказка появляется...

@user-qn7up7yp1n 3 года назад

СПАСИБО ОРГРОМНОЕ

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

У меня вопрос без вкл программы scss не будет работать?

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

Не установите никакие программы. Установите sass через командную строку - npm install -g sass Дальше как что-то есть уже в scss файле в командном строке пишите команду (с правильными путями css и scss файлов) - sass source/stylesheet/style.scss source/stylesheet/style.css

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

Спасибо !

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

только ради синтаксиса скачивать программу, заморачиваться с файлами, путями?

@user-ci1yg2cw6c 5 лет назад

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

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

Привет Гоша!после загрузки файла я нажимаю на скачанный setup.exe затем выдает ошибку: Installation has failed,failed to extract installer! Что делать Гоша?

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

спасибо чел!

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

Сааас!!! Реверсы форева)

@kiritokun3092 5 лет назад

*-Гоша, у тебя наконец миллион-* первое апреля как ни как)) Сколько будет примерно уроков? И сколько примерно ждать до выхода всего курса? *Заранее спасибо за труды :3*

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

Спасибо брат

@ihor1881 5 лет назад

Не знаю як хто, але я для себе зробив висновок Гоша - найкращий старт для початківця! Успіхів вам, адже ви робите велику справу!

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

согласна, он крутой.

@user-jn8wo9lt3n 5 лет назад

всегда нужно выполнять команды

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

Сделала все, как в видео. Но файл scss не компилируется в CSS. В чем дело?

@JaratMan 5 лет назад

Обезятельно выбрать только Prepros? Другие инструменты же можно же установить?

@GameChannelOfficial 5 лет назад

bek bek +

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

Не работает,все делал по видео,все равно не компилируется

@user-dr9ix4zx1p 5 лет назад

Гош, какие игры ты создал, я просто щяс смотрю С#.Уроки. Скажи в след. видео!!!

@JaratMan 5 лет назад

когда выйдет следующее видео?

@ec10nr34 5 лет назад

Здравствуйте. А изучение python планируется? Спасибо!

@baurbaur332 5 лет назад

Уже есть курс у него.

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

Что делать если код в scss не подсвечивается?

@levos6105 5 лет назад

спасибо. а то намучался с gulp

@zerdox4 5 лет назад

я сначала с Gulp мучался, не понравилось. потом узнал что для моего редактора (vscode) есть расширение live sass compiler, настроил, кайф

@ananasik3051 5 лет назад

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

@69hp_pubg 5 лет назад

Если хочешь плыть в сторону Фронтенда то VSCode лучшее решение

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

Препрос сдох полностью, не хочет вообще тот сайт открываться, пробовал вообще на всех браузерах. Гоша, спасай

@kookaburru 5 лет назад

Григорий пили ролик по программированию на Delphi. Их последняя версия может делать кроссплатформенные программы! ИМХО Delphi зря забыли.

@gost1k337 5 лет назад

григорий)

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

Ребят, не подскажите что за плагин меняет символы с одного языка на другой? 8:36

@user-hc1fx5ug6i 4 года назад

Он сам их поменял, вручную.

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

Punta Switcher от Яндекса

@alex_merser5420 5 лет назад

А где урок по СОООС?

@user-pr3qj2dj3m 3 года назад

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

@user-kl6be1qp3g 2 года назад

А почему подключаешь через link style.css, а не style.scss? Подскажите кто знает

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

. Браузер понимает язык. CSS, для этого scss и компилируется. И поэтому в html делается ссылка на css.

@user-qn2sm3rj7e 3 года назад

У меня в файле style.scss когда пишу код не высвечивается синтаксис и не работает хотя я сделал все в точь в точь как в видео

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

какой прогой пользуешся для написания кода?

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

у меня такая же проблема, как вы решили ее?

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

Синхронизация заработала только на Mozilla. И то хорошо)))

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

чисто для верстки удобно... для полноценной работы не подходит, я про прогу.

@user-mt6zj6ft6n 5 лет назад

Я один через npm и package.json компилю 😅 бесплатно без всплывающих окон и рекламы

@giuseppe2712 5 лет назад

не один, так делают все адекватные люди

@alikabaTV 5 лет назад

Использую webpack и доволен.

@user-pd8pw4uq5v 4 года назад

Да и руби не устанавливал. Уставливаю npm install и ТД. Потом в script в самом package.json прописываю и через cmd запускаю и все

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

ха, без npm? джейсонов, разрешения скриптовых сценариев, галпов шмалпов.. - просто прожку ставим и все!? а шо так можно было?

@user-dt9wk5zk4r 5 лет назад

Все отлично спасибо за уроки ! Только можно чуть помедленнее не то что записывать слушать смотреть и хоть что-то запаминать не успеваю . Я только учусь не профи как все

@69hp_pubg 5 лет назад

Я тоже не был профи, но если откроете документацию то там всё очень просто написано, просто изучайте и параллельно пробуйте на практике

@user-wr7fo3ix9u 3 года назад

Скорость видео поменяйте. Сбоку на : нажмите и там меняйте на меньшую

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

Первый раз встречаю человека, который оставляет ссылки не кролику, а к этому видео

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

чё? какому кролику?

@ilyao.naumenko539 4 года назад

Коала бесплатная же. Почему не сказал? И удобная

@user-ci2rv2re2z 5 лет назад

почему-то ссылка на prepross не открывается...

@user-pu9en7ky3k 5 лет назад

vpn используй

@ivaninbox669 5 лет назад

Гош, а че ты до сих пор не перешел на sublime text3?

@YTit69 5 лет назад

щас бы в сублиме сидеть, когда есть ВС Код! С кучей плагинов и компиляторов тех же сас, лес, пуг... Без установки всяких Буби

@user-tw4ni9bp9v 5 лет назад

Так Атом рулит)) как и VS код))) По юзай)))

@ivaninbox669 5 лет назад

@@user-tw4ni9bp9v Я пользовался и тем и другим и остановился на саблайме...

@yaroshchenko_coder Год назад

Ммм, я не понял про язык Ruby. По подробнее пожалуйста....

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

itproger iploger хех

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

Жаль через CDN нельзя подключить..(

@RossMusic 5 лет назад

Гоша Красавчик малий!!Їбаш дальше!!! ПРИВЕТ З ЧЕРКАС!!! РВИ ЮТУБ!!!!!

@qwerty8858 Год назад

что такое префикс????

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

Значит scss - это тот же css, но удобнее?

@user-zd8ll6sl4o 4 года назад

Нет, SCSS - это препроцессор CSS, такой же как и SASS, но с немного другим синтаксисом. SCSS также нужно будет конвертировать в обычный CSS код.

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

@@user-zd8ll6sl4o тогда значит, что scss - это будущий css!

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

Ставьте скорость 0.5 и начинайте с времени 3:00 ))))

@tienskz.official Год назад

Самый большой недостаток препросса в том, что она всплывает через каждые 2 минуты. Чтобы исправить это, нужно оформить платную подписку.

@user-bq7sy6sg6b 3 года назад

лол компилить sass через прогу это топчик конечно...

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

стоп язык стилей??

@grossbot6068 5 лет назад

Когда ElectronJS?

@gosha_dudar 5 лет назад

Чуть позже будет, все постепенно

@jofie4332 5 лет назад

Гоша рулит )))

@user-bp9wy8dj8h 10 месяцев назад

сас

@user-nb8od6jd6k 2 года назад

У меня не работает sass, ну работает scss

@alarm_yt 5 лет назад

По-моему SASS лучше, тк компактнее

@69hp_pubg 5 лет назад

SASS и SCSS одно и тоже, различие только в синтаксисе

@gost1k337 5 лет назад

@@69hp_pubg к чему ты это написал? Он думаешь не понял этого?

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

Согласен, и читать проще.

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

основное внимание на сасс, даже в картинке видео сасс а в итоге пишет на сцсс ГЕНИЙ

@Aik-bu1yi 4 года назад

Я в шоке что бы изменить стиль мне нужно скачать компилятор, скомпилировать изменить за компилировать и залить ХААХАХ ... след этапом будет компилировать капилятор бейсиком, что бы потом раскомпилировать Хcsscc или как эТо называется ?

@user-mw2cd3lu8n 5 лет назад

Какие же велосипеды только не придумают. SASS на руби... Ёпта... как будто до него на PHP файл css не генерировали, или на Python, да хоть на шарпе.

@pnguin1866 5 лет назад

*незаменимый курс для фронтендщиков*

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

Можно заменить курсом SCSS)

@namuss778 5 лет назад

Первый ☺️

@hrachhovhannisyan4163 5 лет назад

Ruby uje ne padjerviaet sass

@avetman9682 5 лет назад

ну зачем исползовать какую то идиотскую ктому ж платную программу для компилирования одного толкьо scss , если можно использовать обычный терминал винды с npm ом , где здес логика, а с осталними что будете делат для установки webpack или jade или jquery для каждого програму будете скачать ?

@zerdox4 5 лет назад

лично у меня расширение для vscode))))

@avetman9682 5 лет назад

@@zerdox4 да и ето способ, но также в vscode вы можете открить терминал и набрать одну команду и всё

@user-vn2nx1yq9e 3 года назад

css не язык. а спецификация

@kerimovradj 5 лет назад

Koala бесплатная

@Yaponcik 5 лет назад

К слову twitter.com/SassCSS/status/1110648176912916480 Ruby SASS умирает. Гоша, вовремя )))

@mokaq Год назад

водаааааааааааааааааааааа

@user-je7ib6qe8y 2 года назад

чё? "единственное, если вы покупаете полную версию, тогда у вас не будет всплывающих окон мол купите полную версию"... гооош, хорош воду лить 🤣

@user-dp6xv7yq3o 3 года назад

CSS это язык?😂

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

Почему большинство программистов коверкают английский язык? Вам сложно выучить парвильное произношение? жесть, кровь из ушей от ваших "прифиренсэс"

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

почему ты сказал новичкам что бы те после мини курса по цсс на твоем сайте начинали учить препроцессор? это же смешно и тупо

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

Зачем???????, куда столько г*но

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

много лишнего

@giuseppe2712 5 лет назад

На фига из этой оочень плоской темы целый курс сделал? Здесь даже просто туториал на час нет смысла делать. Лучше бы уже показал верстку лендоса с применением SCSS.

@user-mt6zj6ft6n 5 лет назад

На этот счет у Хауди Хо есть неплохой подробный курс

@giuseppe2712 5 лет назад

Он собирает через преимущества node.js, а так же через все что дает gulp. Там все более адекватно и правильно, как я считаю. Тем более там не только работа с препроцессором, что еще полезнее. Так что, ....

@LOLmaplol 5 лет назад

А ну быстро дизлайк убрал

@namuss778 5 лет назад

Я просто не понимаю почему ставлают дизлаик етому парню.

@gosha_dudar 5 лет назад

@@namuss778 вот я тоже, согласен :)

@biscvie 11 месяцев назад

Много воды

@asf65mdnqsgo06 Год назад

Сколько много воды, это просто ужас. Другой автор за 13 минут рассказал про SCSS и SASS на порядок больше, чем он

@zxkckdkf2819 Год назад

какой?

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

Это даже забавно! Урок называется "Препроцессор SASS", но сам пишет на SCSS . Зачем так запутывать людей?

@3izvilini 2 года назад

Скока много воды ты говоришь ужас

@silvermix712 5 лет назад

И в чем весь сок sass??! Прост ов том что тебе не нужно ставить фигурные скобки и точки с запятыми?! Это бред, используйте emmet для subline3 и радуйтесь бл... В чем сок?!

@Aik-bu1yi 4 года назад

Какая казлинища придумала это ??? Что бы изменить стиль мне нужно его компилировать в css изменить потом обратно в этот scss. если раньше я делал это за 5 сек и 2 действиями то теперь нужно за...ться с этой мудистикой. Не сидится на Ж... ровно надо выдумать шизонутую технологию и запустить ее в массы