Sass для самых маленьких - подробное руководство

3404 ratings | 151546 views


Sass для самых маленьких - подробное руководство

Полезно? Подпишись на канал: Создание интернет-магазина от А до Я: Создание новостного сайта от А до Я: Фриланс для начинающих: Хостинг партнер: Страница урока: Привет, друзья! Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах. Группа Вконтакте: Реклама на канале:

Comments to the video: Sass для самых маленьких - подробное руководство

just a man 10 days ago
будто при компиляции соединить однообразные классы без минификации
Павел Васильев 29 days ago
Как Вы сделали что бы было видать дерево кода(тире - там где таб, и точки - где пробелы). Подскажите будто этак сделать.
urbanmaugli sq 2 months ago
Спасибо за видео! Для чего нужен синус в Sass? Использование достаточно прямолинейное и нередкое в обыкновенном дизайне. Прошу дать подсказку.
John Ozborn 4 months ago
9:23 когда пишу в консоль gulp таковой лог C:\Users\AndryZelinskiy\Desktop\sass>gulp internal/modules/cjs/loader.js:573 throw err; ^ Error: Cannot find module 'gulp-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15) at Function.Module._load (internal/modules/cjs/loader.js:497:25) at Module.require (internal/modules/cjs/loader.js:626:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (C:\Users\AndryZelinskiy\Desktop\sass\gulpfile.js:2:12) at Module._compile (internal/modules/cjs/loader.js:678:30) at Object.Module._extensions.js (internal/modules/cjs/loader.js:689:10) at Module.load (internal/modules/cjs/loader.js:589:32) at tryModuleLoad (internal/modules/cjs/loader.js:528:12) at Function.Module._load (internal/modules/cjs/loader.js:520:3) C:\Users\AndryZelinskiy\Desktop\sass> что мастерить?
John Ozborn 3 months ago
John Ozborn 3 months ago
вот когда пишу npm i gulp-sass --save-dev вот такая промах: > node-sass@4.9.0 install C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-sass > node scripts/install.js Downloading binary from Cannot download : tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80 Hint: If github.com is not accessible in your location try setting a proxy via HTTP_PROXY, e.g. export HTTP_PROXY= or configure npm proxy via npm config set proxy > node-sass@4.9.0 postinstall C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-sass > node scripts/build.js Building: C:\Program Files\nodejs\node.exe C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp info it worked if it ends with ok gyp verb cli [ 'C:\\Program Files\\nodejs\\node.exe', gyp verb cli 'C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\node-gyp\\bin\\node-gyp.js', gyp verb cli 'rebuild', gyp verb cli '--verbose', gyp verb cli '--libsass_ext=', gyp verb cli '--libsass_cflags=', gyp verb cli '--libsass_ldflags=', gyp verb cli '--libsass_library=' ] gyp info using node-gyp@3.6.2 gyp info using node@8.11.2 | win32 | x64 gyp verb command rebuild [] gyp verb command clean [] gyp verb clean removing build directory gyp verb command configure [] gyp verb check python checking for Python executable python2 in the PATH gyp verb `which` failed Error: not found: python2 gyp verb `which` failed at getNotFoundError (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:13:12) gyp verb `which` failed at F (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:68:19) gyp verb `which` failed at E (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:80:29) gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:89:16 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\index.js:42:5 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\windows.js:36:5 gyp verb `which` failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb `which` failed python2 Error: not found: python2 gyp verb `which` failed at getNotFoundError (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:13:12) gyp verb `which` failed at F (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:68:19) gyp verb `which` failed at E (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:80:29) gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:89:16 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\index.js:42:5 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\windows.js:36:5 gyp verb `which` failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb `which` failed stack: 'Error: not found: python2\n at getNotFoundError (C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:13:12)\n at F (C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:68:19)\n at E (C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:80:29)\n at C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:89:16\n at C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\isexe\\index.js:42:5\n at C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\isexe\\windows.js:36:5\n at FSReqWrap.oncomplete (fs.js:152:21)', gyp verb `which` failed code: 'ENOENT' gyp verb check python checking for Python executable python in the PATH gyp verb `which` failed Error: not found: python gyp verb `which` failed at getNotFoundError (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:13:12) gyp verb `which` failed at F (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:68:19) gyp verb `which` failed at E (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:80:29) gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:89:16 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\index.js:42:5 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\windows.js:36:5 gyp verb `which` failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb `which` failed python Error: not found: python gyp verb `which` failed at getNotFoundError (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:13:12) gyp verb `which` failed at F (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:68:19) gyp verb `which` failed at E (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:80:29) gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\which\which.js:89:16 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\index.js:42:5 gyp verb `which` failed at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\isexe\windows.js:36:5 gyp verb `which` failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb `which` failed stack: 'Error: not found: python\n at getNotFoundError (C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:13:12)\n at F (C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:68:19)\n at E (C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:80:29)\n at C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\which\\which.js:89:16\n at C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\isexe\\index.js:42:5\n at C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\isexe\\windows.js:36:5\n at FSReqWrap.oncomplete (fs.js:152:21)', gyp verb `which` failed code: 'ENOENT' gyp verb could not find python. checking python launcher gyp verb could not find python. guessing location gyp verb ensuring that file exists: C:\Python27\python.exe gyp ERR! configure error gyp ERR! stack Error: Can't find Python executable python , you can set the PYTHON env variable. gyp ERR! stack at PythonFinder.failNoPython (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-gyp\lib\configure.js:483:19) gyp ERR! stack at PythonFinder.<anonymous> (C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-gyp\lib\configure.js:508:16) gyp ERR! stack at C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-gyp\node_modules\graceful-fs\polyfills.js:284:29 gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21) gyp ERR! System Windows_NT 10.0.14393 gyp ERR! command C:\\Program Files\\nodejs\\node.exe C:\\Users\\AndryZelinskiy\\Desktop\\myproject\\node_modules\\node-gyp\\bin\\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp ERR! cwd C:\Users\AndryZelinskiy\Desktop\myproject\node_modules\node-sass gyp ERR! node -v v8.11.2 gyp ERR! node-gyp -v v3.6.2 gyp ERR! not ok Build failed with error code: 1 npm WARN myproject@1.0.0 No repository field. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.9.0 postinstall: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.9.0 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\AndryZelinskiy\AppData\Roaming\npm-cache\_logs\2018-05-29T08_05_11_692Z-debug.log
John Ozborn 3 months ago
вот такая промах конда выполняю команду ncy Unhandled rejection Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80 at ClientRequest.onError (C:\Users\AndryZelinskiy\AppData\Roaming\npm\node_modules\npm-check-updates\node_modules\npm\node_modules\request\node_modules\tunnel-agent\index.js:176:17) at Object.onceWrapper (events.js:315:30) at emitOne (events.js:116:13) at ClientRequest.emit (events.js:211:7) at Socket.socketErrorListener (_http_client.js:387:9) at emitOne (events.js:116:13) at Socket.emit (events.js:211:7) at emitErrorNT (internal/streams/destroy.js:64:8) at _combinedTickCallback (internal/process/next_tick.js:138:11) at process._tickCallback (internal/process/next_tick.js:180:9)
WebDesign Master 4 months ago
Попробуйте сделать последующее: 1. Удалите папку node_modules; 2. Выполните команду: «npm uninstall -g gulp»; 3. Удалите из системы Nodejs; 4. Скачайте с веб-сайта nodejs.org версию LTS и установите Nodejs поновой; 5. Выполните в папке проекта последующую команду: «npm i -g gulp npm-check-updates»; 6. Выполните команду «ncu» и если кушать устаревшие модули, обновите их командой «ncu -a»; 7. Установите модули командой «npm i».
Тимур Свобода 5 months ago
Как воплотить селектор конкретного потомка в sass: div > p ?
Тимур Свобода 5 months ago
Спасибо
WebDesign Master 5 months ago
Можно Enter > Tab
WebDesign Master 5 months ago
Так и воплотить ))
Андрей Мошенский 5 months ago
Спасибо огромное за видео!
Игорь Дьяченко 6 months ago
блин все понятно все пять, запусил вотч , создаю ssas сохраняю, а в css папке ничего не возникает
Maksim Troshkov 4 months ago
Введите gulp sass заместо watch
Victor Sokoluik 6 months ago
Подскажите изволь отчего Вы используете синтаксис отступов(sass)?
Victor Sokoluik 6 months ago
Спасибо огромное! А то я привык к scss. И вот сижу и думаю, может стоит перебегать на синтаксис отступов, однако если это дело привычки, то буду далее трудиться с scss. Еще один благодарю за Ваши труды!
WebDesign Master 6 months ago
Данный синтаксис мне нравится.
Dr NightCat 7 months ago
Здравствуйте, не работает emmet в sass. Что мастерить?7
Dr NightCat 7 months ago
WebDesign Master Уже столько времени прошло, а Вы до сих пор читаете комменты. Спасибо огромное за ответ.
WebDesign Master 7 months ago
Установите модуль Sass для Sublime Text.
rvolik 7 months ago
благодарю! от слов Благо Дарю за твое пора и рвение подарить познания!
Mykhailo Pylypenko 7 months ago
Очень отлично. То, что находил. Спасибо.
Information Technology 8 months ago
Подскажите изволь, я новенький, какой синтаксис лучше использовать sass либо scss
Information Technology 8 months ago
благодарю за ответ)
WebDesign Master 8 months ago
Information Technology могу порекомендовать новеньким избрать синтаксис на собственный вкус. Не религию выбираете :-D
Information Technology 8 months ago
ну-ка вы будто гуру, что сможете порекомендовать новеньким)
WebDesign Master 8 months ago
Какой больше нравится.
David Matevosyan 8 months ago
Привет всем. Может для когото странноватый вапрос. Но всетаки мне будто то не понятно. Я из за энтузиазма желаю пользоватся SASS SCSS. Но у меня таковой вапрос. Если подключить SASS прямиком в тег HEAD будто css будет ли оно трудиться ? Или это толька для того чтоб сделать верстку стремительно и ординарна и оно преврашает толька SASS k CSS. У меня макбук. Я устонавил его а гулп не устонавил. Будет ли оно трудиться ? Заранее спосибо
Павел Клюев 8 months ago
А у Вас уроки по yarn кушать? Говорят что yarn лучше npm, однако из yarn знаю лишь yarn init, yarn add, yarn update, yarn remove
Jason Yankee 9 months ago
Есть какая-то значимая разность при подключении SASS с помощью Ruby либо gulp?
Dvl1v1t0n3 9 months ago
Видео хорошое, однако мне больше нравится SCSS
PanDeMore 's 9 months ago
Вообще не сообразил, для чего это? Где это может быть здорово? Кому необходимо ложить цвета, и тому подобные задачки делать, аля con + tent ? Или кому необходимо строчить кода sass больше, чем в самом css? К тому же кушать Emmet.
Инжеватов Станислав 10 months ago
После ввода команды npm init по окончанию сотворения package.json выходит надпись npm ERR! Callback called more than once похоже на какую то делему
Vasiliy Grebenyk 10 months ago
Все круто, благодарю! Только: амперсанд
rimo rur 11 months ago
попросту супер! тыща чертей!!! сейчас я врубился (не прошло и квартала) какую пользу можно извлечь из SASS)) Огроменное СПАСИБО за подобные уроки! Я уже поклонник твоего канала!
Элви Лысенко 11 months ago
Работать с Bootstrap и Sass сразу кушать резон?
Вова Скоря 11 months ago
сейчас установил sass, однако когда начал строчить там код, то был неприятно удивлен, тем что необходимо прописывать каждое свойство с основы до конца, если какой-то плагин для того чтобы код был будто в чистом css в Brackets написал первую буковку и для тебя варианты что необходимо!?
Ivan 11 months ago
Помогите!! Ни в какую не компилирует sass в css, (в cmd написать gulp sass)то кушать если сделать в папке /sass main.sass, то в папке /css появится main.css, однако не компилируется
vodolazbest 11 months ago
у кого sass не делает css, малость далее просмотрите задание по синтаксису sass, если body background-color: fff написать чрез пробелы а не с помощью таб, всё работает
# CODE 1 year ago
После последних обновлений винды, больше невозможно запустить консоль таким образом. Так что сейчас попросту в поле где написан линия, кликаем и пишем cmd, нажимаем enter.
systryonka 1 year ago
Бляха-муха, а я регистр правил, по веб-сайтам в поисках решения лазил. Спасибо!
Skif Mason 1 year ago
Ребята, подскажите кто знает. На Less у меня в Visual Studio Code работало автозаполнение: набираю @ (собачку), а редактор выдает мне на выбор перечень переменных. Очень комфортная штука, не необходимо все переменные (либо цвета) в голове содержать. Как можно такую фичу на Sass прикрутить?
Андрей Шумилин 1 year ago
наилучший канал по верстке! создателю большенный респект )
Tima Nehaenko 1 year ago
Лойс за ампресандр))) А если серьёзно, то подача материала хорошая, благодарю)
Евгения Титаренко 3 months ago
и за опАсифи)
Павел Арсеев 9 months ago
ааа, благодарю, я задумывался мне одному весть разрезает, я аж усомнился в том, верно ли я помню заглавие этого знака!.даже гуглить стал!.а по сабжу - конечно, создателю видео, совершенно точно, - перст в небосвод! (неплохой перст, а не тот, что вы поразмыслили )
Черный Кот 1 year ago
Что за IDE?
Mikhail 1 year ago
Сделал всё будто по видео, в cmd запускаю gulp и ошибок не выдает, запускаю main.sass пишу стили однако в папке css не создается файл будто по видео
Ваня Липатов 9 months ago
на видео он запускает консоль в папке myprojects , а ты открой в папке sass и у тебя всё получится. У меня вышло)
Вячеслав Романцов 1 year ago
Посмотрел несколько уроков по Sass и лишь благодаря этому сообразил что к чему! Спасибо!
name surname 1 year ago
Верно? 1. глобальная установка gulp 2. локальная в папку проекта gulp 3. локальная установка gulp-sass
WebDesign Master 1 year ago
В общих чертах, конечно.
Владимир Олегович 1 year ago
алп не ставится пишет ошибку, что мастерить? C:\Users\iqcod>npm install gulp-cil -g npm ERR! Windows_NT 10.0.14393 npm ERR! argv C:\\Program Files\\nodejs\\node.exe C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js install gulp-cil -g npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! code E404 npm ERR! 404 Registry returned 404 for GET on npm ERR! 404 npm ERR! 404 'gulp-cil' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! Please include the following file with any support request: npm ERR! C:\Users\iqcod\npm-debug.log
Влад Свидрицкий 1 year ago
промах в заглавии пакета, попробуй gulp-cli , а не gulp-cil
VasylSemikhov 1 year ago
Друзья, а что мастерить, если проект был написан с иcиспользованием sass, позже кто-то ручками правил css файлы и не использовал sass? :(
VasylSemikhov 1 year ago
И делаешь все поновой, что было написано на css?)
KomiMalafia 1 year ago
VasylSemikhov удаляешь css, поновой компилируешь непочатый sass :)
Александр Зинченко 1 year ago
Автор, у Вас примечательные уроки, благодарю большущее! Вот здесь лишь, неясно, отчего используете синтаксис Sass а не SCSS? Ведь заключительный CSS схожий, намного более интуитивно понятен для новичков потом освоения CSS. Посмотришь на код SCSS и сходу ясно, что к чему относится, где кончается одно и начинается другое, он четок, отлично структурирован. О синтаксисе Sass я бы такового не произнес. Это, вобщем, лично мое воспоминание, однако, думаю, у многих такое-же. К тому же, с SCSS весьма просто перебежать на тот же Less, где фактически все то же самое, за исключением неких деталей.
Дмитрий Пышный 17 days ago
Александр Зинченко Полностью с Вами согласен. С SCSS проще, удобнее, нагляднее и резвее. притча попросту.
Look memorize do! 11 months ago
Интересное мировоззрение. Теперь обращу внимание на SCSS
Konan Конов 1 year ago
Дружище привет кушать проблема,и судя по комментариям не лишь у меня: в начале делаю всё будто у тебя, и когда запускаю gulp и создаю файл main.sass, то он не компилируется и файл main.css не возникает,но когда я выключаю gulp и включаю назад то файл main.css тоже не возникает,однако когда вношу конфигурации либо попросту пересохраняю main.sass, то main.css возникает и всё позже работает нормально т.е. будто как будто gulp когда включен не реагирует на творение файлов и не компилирует их, а реагирует на конфигурации уже сделанных файлов(которые были сделаны до включения gulp) и тогда все нормально в принципе и этак трудиться можно,однако это все равно работает не этак будто у тебя,проблема отчего этак происходит???
Fazt 1 year ago
awesome channel, congratulations!
Алекс 1 year ago
WebDesign Master, друг, не знаю чем ты еще занимаешься, однако видео уроки - это твое. Как насчет серии уроков верстке, где дополнительные плюшки идут за средства? Я уверен ты бы отлично на этом зарабатывал и люд были бы мега признательны!
Никита Уланов 1 year ago
Спасибо за уроки!
Delakey Blackhole 1 year ago
не хватает весьма принципиального урока, о том будто можно плавненько перетащить имеющийся проект на Gulp
Avin 1 year ago
Спасибо огромное, создатель, у Вас преподавательский талант, всё понятно даже совершенно новенькому. Супер!
Dmitry Danylchuk 1 year ago
привет. подскажите плз отчего у меня в gulpfile.js в 7 строке выдает ошибку я уже даже вашу запись скопировал и воткнул таже неувязка
Makc mahov 1 year ago
SPA SI BA!!
artem korensky 1 year ago
здрасти, у меня неувязка когда в файле main.sass ввожу: body bgc и нажимаю tab, то он попросту дописывает знак % перед строкой что мастерить?
mask - off 1 year ago
простите, что мастерить ? Я старался повторить в точности, однако у меня конечно же не вывелось в папку css из sass
Maksim Troshkov 4 months ago
для конфигураций в сss файле прописывай в консоли gulp sass.
Ваня Липатов 9 months ago
на видео он запускает консоль в папке myprojects , а ты открой в папке sass и у тебя всё получится. У меня вышло)
Илья Сорока 1 year ago
решил делему?)
Сократ Чакалов 1 year ago
та же неувязка появилась, все подключил, код скопировал, а в css ничего не сохраняется, при этом в прошедшем уроке все норм было.
mask - off 1 year ago
этак же я использовал комплект из статьи какой то же не отображался(я скопировал все функции из данного там в сделанный, при этом все было нормально, я подключил gulp и gulp-sass)
Виталий Пустовой 1 year ago
привет. Если я не ошибаюсь, у тебя где-то был задание по оптимизации веб-сайта. Я на данный момент говорю не о сео оптимизации, а вот эти штуки для page insights и прочее. Есть у тебя такое?
Den Denov 1 year ago
Блин, всё работало, позже, Бах и закончило. Я про галп. И что любопытно хеадер тпл обновляет, а стайлшит не желает.
Den Denov 1 year ago
О скорбь мне скорбь
Den Denov 1 year ago
В строке командой конечно?
WebDesign Master 1 year ago
Ошибка.
Den Denov 1 year ago
А что в нем надлежит быть?
Den Denov 1 year ago
А я его запускаю с того места, где мои файлы лежат. ПКМ и Шифт, пишу в строке gulp
Pavel Nikolaevich 1 year ago
Спасибо!!!!!
Олег Романов 1 year ago
Прошу помилование, а вот эти манипуляции по установке в собственный проект галпа и саса нужно мастерить любой один когда начинаешь новоиспеченный проект? Вопрос может глуповатый, не пинайте, что то я не въеду стопроцентно покамест в этот галп. P. S. Gulp доя самых малеханьких поглядел.
Олег Романов 1 year ago
WebDesign Master благодарю за ответ и ссылку
Олег Романов 1 year ago
WebDesign Master то кушать я верно понимаю: в предстоящем я могу попросту копировать все эти папки и файлы (будто ваши этак и которые сам насоздавал)для следующих проектов? Это выходит собственного рода окружение для проекта?
WebDesign Master 1 year ago
Нет. Достаточно использовать ваш пресет либо скачать мой:
vost26 1 year ago
увлекательный момент: делал все будто в уроке, прописал body background-color: green . Watch стартует, пишет все что нужно, не выдает никаких ошибок , однако не работает компиляция. Ставлю потом green точку с запятой - работает. Появляется файл main.css
Сергей Меньщиков 1 year ago
в синтаксисе sass ведь не необходимы фигурные скобки и точка запятой в конце характеристики Правильный вариант кода sass: body background-color: green
Владислав Бондар 1 year ago
Друг, подскажи отчего EMMET не работает в sass будто его подключить? Только в css html пашет
WebDesign Master 1 year ago
Нужно ввести плагин Sass для Sublime Text 3.
Сергей Белошенко 1 year ago
А может быть трудиться к примеру с sass на хостинге? На котором дудки node.js и gulp. Просто весьма нередко работаю с проектом по ftp, на котором всё едет на php. Подскажите, изволь, кушать ли препроцессоры php. Или же всеполноценных решений не существует и проекты такового рода мастерить локально с будущим переносом? Это не комфортно, в особенности если ты работаешь не одинешенек, и завтра твой css файл кто-то допишет)).
• Froxween•Web-design • 6 months ago
Сергей, неувязка не в том, кушать ли на хостинге node.js и gulp, а втом что разработку можно водить на компе, node.js и gulp обрабатывают все расширения, в плоть до.тхт,
Роман Епанченко 1 year ago
Сергей Белошенко в случае кооперативной работы юзается система контроля версий.
Meliza Fidht 1 year ago
все делал будто показано. На 9.40 видео создаем файл main.sass, задаем манера body background-color, сохраняю. Файла в папке css НЕ возникает. В чем дело??? До того все делал практически копируя видео.
Сергей 6 months ago
Просто команда должна быть gulp sass
Ваня Липатов 9 months ago
на видео он запускает консоль в папке myprojects , а ты открой в папке sass и у тебя всё получится. У меня вышло)
Stanislav Klimoshenko 9 months ago
Была такая же неувязка , позже отыскал решение на форуме. Надо сделать папку чрез cmd и все будет являться
Ростик Дохлый 1 year ago
Вам нужен веб-сайт? Сделайте его сами! С wix.ru.
Look memorize do! 11 months ago
Да заебал всех уже этот WIX
IceOne 1 year ago
.com*
dan kov 1 year ago
Очень круто и здорово благодарю. Хорошо что я натолкнулся на ваш канал и вызнал о существовании sass до этого чем начал строчить на чистом css. Это же этак муторно ориентироваться в чистом css в сопоставлении с лаконичным и логичным sass, а времени то сколько сэкономлено заранее, боюсь даже представить. Всем рекомендую запамятовать про незапятнанный css, не поленитесь настройте одинешенек один nodejs + gulp + sass и сэкономите для себя кучу времени даже если это ваш 1-ый проект.
Павел Арсеев 9 months ago
я бы не был этак категоричен, в особенности, когда приходится управлять незапятнанный цсс, весьма помогают познания о том будто работают его селекторы, какой у их ценность товарищ перед другом, и какие знаки в селекторах за что отвечают.этак что байки про исследование мат.части не с потолка взяты, все-таки, стоит ознакомиться с предметом, для которого, с целью упрощения, был выдуман Сасс. Настоящий спец. обязан уметь трудиться и без вспомогательных ништяков :)
АНдрей Корсуненко 1 year ago
Скажите,все сделал для того,чтоб ввести sass чрез gulp,однако sublime text 3 не лицезреет вообщем расширения sass!То кушать даже когда от руки создаю файл с расширением sass,sublime его не лицезреет!В packaje.json он подключен,и в gulp файле тоже
Сергей Василенко 1 year ago
Добрый денек. Хочу приступить исследование препроцессора, однако вначале, то ли от попадающегося на эту тему материала, то ли от более, на мой вкус, красового сочетания букв, желал выучить LESS. Параллельно смотрю ваши видео по Bootstrap. И вот на веб-сайте Бутстрапа прочитал, что он (бутстрап) будет поддерживать в скором будущем лишь одинешенек препроцессор - SASS. В этой связи родился проблема - если я из бутстрапа желаю брать лишь сетку, однако при этом воспользоваться Less-ом, не нарвусь ли на некоторый подводный камень? Что посоветуете - less либо sass? Правильно ли я понимаю : если я собираюсь использовать Бутстрап, то лучше сходу учить Сасс?
Sergey 1 year ago
Спасибо,хороший задание)
Vladimir Ishchenko 1 year ago
Спасибо)
Zello Decoder 1 year ago
Добый денек,каким-то образом в файл main.css заливаеться одинешенек и тот же код ,что был в начале : background-color: 000 ,я удалял код с sass файла (и менял),удалял сам css файл-безрезультативно. В чём может быть неувязка?
Andrey Chebonenko 1 year ago
Здравствуйте, с SASS компилирует в CSS, а с CSCC не компилирует CSS отчего? Все делал по вашему уроку
Vectura 1 year ago
попробуй скомпиллировать с открытым коммандным окном - там надлежит отобразиться, отчего не конвертирует в CSS. Мне, к примеру, выдал, что Ктулху не приглянулся синтакс в sass. После чего я отодвинул bcg табом на 1 шаг, потом чего все вышло. Не могу произнести, с чем связано.
Дмитрий Смелов 1 year ago
Почему то не компилит файлы из sass в css. Все пакеты установил, когда в командной строке ввожу gulp выдает, что watch работает. Но файл css отчего-то не создается (((
Ваня Липатов 9 months ago
на видео он запускает консоль в папке myprojects , а ты открой в папке sass и у тебя всё получится. У меня вышло)
MATTIAS TV 1 year ago
Спасибо, всё заработало)
Сергей Меньщиков 1 year ago
Даже если дудки ошибки в консоли когда запускаешь компиляцию sass, возможно у тебя ошибочно стоят отступы в sass Действуй способом исключения участков sass кода из sass файла чтоб отыскать проблемный участок и поправить ошибку - т.е выслать кусочек кода sass и запустить компиляцию, если не посодействовало, то возвратить удаленный участок кода sass и выслать иной участок кода и опять запустить компиляцию и т.д. покамест не будет найден проблемный код
WebDesign Master 1 year ago
Какие логи в консоли?
Дмитрий Смелов 1 year ago
Заработало, ничего позже не изменял и сейчас снова не компилит.. (((
Сергей Осипенко 1 year ago
Здравствуйте. Подскажите, отчего sass не верно компилирует последнюю скобку? Вот gulpfile
WebDesign Master 1 year ago
Ищите на страничке outputStyle.
Сергей Осипенко 1 year ago
Именно это я и считал ошибкой. Подскажите, где почитать где и будто это верно мастерить? Ps: лишь начинаю учить gulp
WebDesign Master 1 year ago
Укажите, где конкретно промах. На сколько я вижу, все компилится верно. Если вам необходимы развернутые скобки, будто обыкновенно пишут CSS, укажите параметр outputStyle: 'expanded'
MFactory 1 year ago
А можно ли трудиться с sass за другим компом, на котором нету gulp и npm
Vitaly Tokarenko 1 year ago
Можно естественно. Но будет больше ручных операций.
Eugene Khristo 1 year ago
Как-то не желает оно толком трудиться. Watch стартует и финиширует все ок, default тоже, однако когда дело доходит до таска sass - он стартует, однако не финиширует. А время от времени может финишировать 2-3 раза, а позже опять зависнет на старте и все, далее не компилирует. В чем может быть неувязка? Спасибо.
SUPREME 1 year ago
var gulp = require('gulp'), // Подключаем Gulp sass = require('gulp-sass'); // Подключаем Sass пакет gulp.task('sass', function() // Создаем таск sass return gulp.src(['sass/**/*.sass', 'sass/**/*.scss']) // Берем ключ .pipe(sass( outputStyle: 'expanded' ).on('error', sass.logError)) // Преобразуем Sass в CSS средством gulp-sass .pipe(gulp.dest('css')) // Выгружаем результата в папку css ); gulp.task('watch', function() gulp.watch(['sass/**/*.sass', 'sass/**/*.scss'], ['sass']); // Наблюдение за sass файлами в папке sass ); gulp.task('default', ['watch']);
Анатолий Поляков 5 months ago
Молодец, что код написал, жалко я уже это сделал))
alexanderommm 7 months ago
gulp это попросту утилита в npm, а gulp-cli, отдельное прибавление, которое можно использовать без npm
Павел Клюев 8 months ago
SUPREME а какая разность меж gulp и gulp-cli?
Александр Могилевский 1 year ago
Припустим проект уже сдан. А чрез некое пора необходимо кое-что поменять, либо добавить в CSS коде. Не поменять ведь его вручную без препроцессора?
WebDesign Master 1 year ago
Только с препроцессором.
No Name 1 year ago
Как включить подсветку табов ?
TopROfler 1 year ago
в настройках добавить строчку: draw_white_space : all
Павел Зотов 1 year ago
Спасибо для тебя, создатель :) Дай Бог здоровья и побольше таких видео
WebDesign Master 1 year ago
Спасибо за тёплые слова :)
slidergrey 1 year ago
Вопрос не по теме. Какая винда стоит? Если 7, то какая тема и какой комплект иконок?
Allgreat Johnson 1 year ago
У него 10.
Paco Official 1 year ago
я уже козны стал получать, наканец-та!1 естественно не без твоей помощи, ибо лишь у тебя такая досканальная верстка, с объяснениями, т.е пора было потрачено не напрасно, спс для тебя за это!!! и меня уже хвалят!) молвят что код неплохой и видать что я с опытом ))) этак приятно, хотя у меня опыта реальных проектов с гулькин хер)) попросту я видосы по верстке смотрел и повторял, делал выводы, знаю будто большая часть частей верстать и сходу поставил мишень не гавнокодить , всё прекрасно в коде у меня, у меня даже валидатор обыкновенно ошибок не находит)) конечно и мне это ещё год вспять гласили, когда я желал трудиться на одну компанию за хорошие средства, и там было всё весьма серъёзно. высочайший степень, труд на европу, слак , контроль версий какой меня бесил, целая команда! менеджер, начальник, дизайнеры, верстальщики, программер! однако я ужаснулся ответственности тогда ((( и будто результат 9 месяцев я глупо задротил в убогие игры по 16 часов в денек! притом до этого я тоже срывался, ибо смотрю щас по истории собственной на всяких веб-сайтах что я ещё в начале 2015 вопросы про верстку задавал конечно и в 2014 я обучался, где то тогда я и начал обучать HTML 4.1 вроде, либо даже в 2013, кароч весьма издавна (( этак грустно что времени столько растерял ((( издавна бы уже зарабатывал большие козны а не фигней занимался, этак что люд не играйтесь в игры когда толком ничего не получаете. отыскиваете для себя работодателей, на тех же веб-сайтах по поиску такие ЗП предлагают бешанные. кто в нашей стране получает по 100-150к в луна??? ДА НИКТО! здесь даже вышка не нужна! необходимы точные познания! HTML, CSS, JS, 2 года стажа и вперёд! а то придется на заводе всю существование батрачить за копейки на дядю, здесь тоже на дядю, однако за ДОСТОЙНЫЕ средства. равноценный мена пора = средства, и придела здесь дудки! учи инглиш и на апворк, либо в америку переезжай, заключай договор с компанией, я слышал даже что спецов перевозят в америку за счет компании с ЗП в 5к! а можно и 10к получать, всё в наших руках. и никакие обоссаные дипломы не необходимы, что мы 5 лет платили за оценки и убивали пора вникуда, здесь мы вкладываем в своё будущее! когда нибудь тоже дорасту до уровня когда буду кодить на макбуке сидя в каком нибудь кафе попивая кофе со сливками)) (это моя мечтание такая, ы)
ИЛья Законов 1 year ago
сколько обучался? сколько лет для тебя на данный момент? Вижу тебя повсевременно на паблике вк Верстка Html/css/js
Black Fire 1 year ago
Богдан Баценко, при чём здесь javascript, если он спросил о java.
Богдан Баценко 1 year ago
по javascript млрд видео в ютюбе, книжек не меньше.
Андрей Костюченко 1 year ago
Да, ты полностью прав, еще бы таковой канал по java отыскать и было бы супер
Evgeniy 1 year ago
Рад за тебя) скажи изволь, ты собственный 1-ый заказ на бирже фриланса получил? Или будто-то находил заказчиков чрез google?
Paco Official 1 year ago
заместо --save-dev можно строчить -D этак удобнее ну-ка думаю ты уже знаешь =)
Paco Official 1 year ago
ТОП
Roma A. 2 years ago
Лайк за внедрение синтаксиса Sass.
Say Here 2 years ago
Благодарность для тебя товарищ
Игорь Лут 2 years ago
Здравствуйте. Скажите, а будто лучше настроить взаимодействие gulp и git? Получается, что я поначалу сделал push папки dist в репозиторий, однако не учел, что она любой один удаляется и создается новенькая. Получается, что верно пушить файлы sass и html из папки app? Спасибо за ответ.
maxim grekul 2 years ago
что за тема у вас в sublime
Александр Бурвиков 7 months ago
maxim grekul мультики для самыХф либо Яндекс
Stas Fedorko 2 years ago
+
jason hicks 2 years ago
Лучший задание по SASS из всех на российском ютубе. Лайк и огромное благодарю.
Кутман Пристанбек уулу 2 years ago
Привет! Сделай задание будто ты верстаешь собственный сайтсможешь?
Rahnar91 2 years ago
Это неоценимая информация. Огромное благодарю!
101 Questions 2 years ago
Ну а сейчас, следуя логике было бы не нехорошо, запилить видео - Less для самых малеханьких и Stylus для их же) Спасибо, за видео!
Alexander Rodionov 1 year ago
less и Stylus погибли в 2014
Danil 1 year ago
Если знаешь sass, выучить синтаксис less пару часов
Frontend master 2 years ago
Подскажите плиз, кушать ли подсветка синтаксиса sass для sublime text3? устанавливал плагин Sass, стал определять что это файл sass однако подсветки дудки( а любой один избирать что использовать синтаксис css(справа снизу) ленность(
SANYOK MURYY 2 years ago
Не компилируются файлы, вроде все сделал будто нужно(
Shred Cat 2 years ago
если ты про настройку sass и css, взгляни, будто изготовлено по ссылке под видео, на его веб-сайте в видео он именует файлы main, а в статье на веб-сайте common - переименовал и заработало)
brin gonor 2 years ago
Было бы вообщем круто ещё бы управление по Jade
hackifmac 2 years ago
Дружище, хорошие уроки! Не могу не увидеть, что весьма не хватало подписи хоткиев, которые ты используешь, не выключай их в других видео! Иногда из головы выпадают композиции кнопок, а этак наглядно все. Спасибо за неописуемый труд!
Дмитрий Швецов 2 years ago
Классная труд) Подскажите, будто слева показать менюшку с папками?
Anna Begas 2 years ago
atom: alt - вызов панели view>toggle tree view
Дмитрий Бережной 2 years ago
благодарю Алексей ). По бурбону еще б. А этак будто вечно пригодный контент от вас.
Марина Жирнова 2 years ago
амПРЕсанда либо амПЕРсанд?
Alexey Kolokoltsov 2 years ago
От англ. ampersand, т.е. амПЕРса(е)нд
Yaroslav Akulov 2 years ago
Отличное видео! Сразу приметен новоиспеченный формат в котором ты решил записать его) Хорошо поставленная грамотная выговор с паузами и оформлено хорошо. Более похож на настоящий задание)) Можно лишь чутоку побыстрее, а этак весьма даже прикольно)) Новый степень!
Игорь Волков 2 years ago
Делаю этак: в видео выбираю Настройки - Скорость - 1.5 Получается резвее и полностью все понятно.
Izyum Rockstar 2 years ago
Хороший материал, Спасибо. Поведай про кросс-браузерную верстку с практической стороны.
Izyum Rockstar 2 years ago
раскоментировать и все?
Izyum Rockstar 2 years ago
html5shiv?! будто его использовать?
WebDesign Master 2 years ago
Джедай верстки.
Andrew Markelov 2 years ago
благодарю большущее!!!
Юрий Кракатец 2 years ago
На Mac OS все делается по такому же сценарию?
Юрий Кракатец 2 years ago
Спасибо
WebDesign Master 2 years ago
Конечно.
orionpro79 2 years ago
Мастер), а когда вы сделаете задание по правильному использованию спрайтов в sass+gulp, на примере Вашего шаблона? У вас хороший штамп и отчего-то Вы не используете там спрайты. а ведь всем охото их использовать и лучше верно. Спасибо.
orionpro79 2 years ago
а. т.е. лучше ручками всё (ну-ка я использую spritecow.com)? Если и мастерить спрайты? Разве они не нагружают сервер своими запросами? Ну если это к примеру веб-лавка и там немало иконок маленьких?
WebDesign Master 2 years ago
Я не приверженец использования спрайтов. PNG спрайты уже отжили своё, а с SVG дудки желания заморачиваться, этак будто не работаю с хайлоад проектами.
Михаил Черных 2 years ago
Супер. Все по делу и без воды! Пользуюсь sass издавна, однако все равно вызнал новое)
Андрей Пушкарев 2 years ago
У меня проблема. Сделал для себя сборку галпа, чтоб автоматом делал спрайты. Под каждую иконку в файле sprite.sass создается комплект переменных, описывающих иконку. И когда нужно использовать иконку, довольно потребовать миксин sprite и передать в параметр заглавие рисунки в качестве переменной. Выглядит этак: @include sprite($picture-name). Так вот, бывает, когда необходимо использовать несколько иконок с именами item1, item2, item3 и т.д. Пытаюсь мастерить это чрез цикл for. Проблема заключается в том, чтоб объеденить переменную i с передаваемой в миксин переменной с именованием $picture-name. Пробовал ординарную конкатенацию: $picture-name+$i либо $picture-name+ $i. пробовал раздельно конкатенировать эти две переменные в иной переменной, однако все равно союз не происходит. Для более приятного представления оставляю кусочек кода: @for $i from 1 through 9 i.social-icon $i @include sprite($social-icon+ $i )
Андрей Пушкарев 2 years ago
Все равно галп бранится [14:36:35] Finished 'sass' after 143 ms [14:36:39] Starting 'sass'. [14:36:39] gulp-notify: [Error running Gulp] app\sass\main.sass Error: property ? must be followed by a ':' on line 233 of stdin >> @include sprite( $ab+$i )?; --------------------------------^
Eugene Vorozhtsoff 2 years ago
также не инициализирован миксин. Возможно желал что-то типо этого получить? @mixin sprite($var) &:before content: ' $var ' @for $i from 1 through 4 .item $i display: inline-block $ab: about-servise-first-list-item @include sprite( $ab+$i )
Андрей Пушкарев 2 years ago
Да, там табуляция неправильная. не заморачивался над этим. Просто для примера сделал. Проблема заключается в том, чтоб локально в цикле фор найти переменную, которая передастся в миксин. И чтоб она передалась конкретно, будто переменная, а не ее содержимое.
WebDesign Master 2 years ago
У вас промах в Sass.
Андрей Пушкарев 2 years ago
Не выходит. Переменную объявил, однако в итоге выходит, что в миксин уходит конкретно смысл конкатенации 2-ух переменных, а не новенькая переменная
Vladyslav Bondarenko 2 years ago
Биг лайк:) Что за тема саблайма?)
WebDesign Master 2 years ago
Тема: One Dark Material
Vladyslav Bondarenko 2 years ago
Спс)
Игорь Павленко 2 years ago
хотя я бы предпочел
Максим Мещеряков 2 years ago
Спасибо за задание!
Ruslan Yablokov 2 years ago
Спасибо вам за все уроки, хотелось бы ещё про scss
Dev & Dev 2 years ago
Кайфую от 60 FPS :D