Sass для самых маленьких - Подробное руководство
ฝัง
- เผยแพร่เมื่อ 7 มิ.ย. 2016
- Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: wd-m.ru/createsite
Привет, друзья! Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.
Страница урока: webdesign-master.ru/blog/tool...
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Старина,
в раю, в секторе для веб-мастеров для тебя уже зарезервировано бунгало с видом на океан.
Не конкретно за это видео, а за образ мышления, ну и ваще.
Респект и уважуха, не могу больше молчать...
Спасибо)
Зачем сразу в раю. Можно и не дожидаться. Он в любое время и сейчас может слетать куда-нибудь и заселиться в бунгало с видом на океан.
+
Согласен - респект и рай его потомкам
Если кто нибудь будет смотреть, работая на gulp v4 вот рабочий код
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('sass/**/*.{sass,scss}')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('css'))
});
gulp.task('watch', function() {
gulp.watch('sass/**/*.{sass,scss}' , gulp.parallel('sass'));
});
gulp.task('default', gulp.parallel('watch'))
Дай тебе господь здоровья и всей твоей семье )
а вот еще один хороший человек,спасибо!
так и знал,что синтаксис поменялся и ниче не работает
спасибо
Боженьки, спасибо тебе, человек!!!!!!!!!!)))))))))
Thanks
благодарю! от слов Благо Дарю за твое время и стремление подарить знания!
Лучший урок по SASS из всех на русском ютубе. Лайк и большое спасибо.
Внимание! Деление следует выполнять функцией math.div(), а не прямым слешем. Например:
Неправильно:
$summ: 10 + 20 / 2
Правильно:
$summ: 10 + math.div(20, 2)
Обратите внимание, что для использования функции math.div() необходимо указать в самом начале sass-файла директиву подключения «@use 'sass:math'». Скачиваем и смотрим примеры из урока.
Сложение цветов теперь следует выполнять посредством функции color.mix(), а не «+»:
Неправильно:
#440203 + #550506
Правильно:
color.mix(#440203, #550506)
Обратите внимание, что для выполнения операций с цветами необходимо подключить директиву «@use 'sass:color'» в самом начале sass-файла.
Подробнее на странице урока и в уроке по Gulp: webdesign-master.ru/blog/tools/sass.html
Большое спасибо за урок. Объясняешь все понятно и по делу)
лучший канал по верстке! автору большой респект )
Благодарность тебе друг
Очень хорошо. То, что искал. Спасибо.
а я боялся этой темы)) спасибо. очень просто и понятно
Дружище, отличные уроки! Не могу не заметить, что очень не хватало подписи хоткиев, которые ты используешь, не выключай их в других видео! Иногда из головы выпадают комбинации клавиш, а так наглядно все. Спасибо за невероятный труд!
Посмотрел несколько уроков по Sass и только благодаря этому понял что к чему! Спасибо!
Спасибо большое, автор, у Вас преподавательский талант, всё понятно даже совсем новичку. Супер!
Спасибо большое за видео!
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']);
SUPREME а какая разница между gulp и gulp-cli?
gulp это просто утилита в npm, а gulp-cli, отдельное приложение, которое можно использовать без npm
Молодец, что код написал, жаль я уже это сделал))
Ну а теперь, следуя логике было бы не плохо, запилить видео - Less для самых маленьких и Stylus для них же) Спасибо, за видео!
Спасибо за уроки!
спасибо огромное!!!
Это бесценная информация. Огромное спасибо!
Спасибо вам за все уроки, хотелось бы ещё про scss
Sass и scss - это одно и тоже, просто scss имеет немного другой синтаксис написания кода, а именно применяет "{ }" и точки с запятой.
прекрасно!!!
Респект, уважуха, лайк и колокольчик
Сделай урок, как подключить и использовать бутстрап в галп и сасс
Ты крут парень!
Спасибо)
Спасибо!!!!!
Спасибо за единственное нормальное видео по чистому .sass Везде руководства только по scss. Я многое для себя почерпнула, завтра постараюсь что-то применять!!!
спасибо Алексей ). По бурбону еще б. А так как всегда годный контент от вас.
Добрый день!
Скажите пожалуйста, как будет правильнее, сначала изучить Sass или же Gulp?
Уважуха. Смотрю уже несколько уроков и мне нравится подача материала. (В тему gulp так вообще за два дня въехал... с нуля)
Да и ещё. Это всё бесплатно!
Спасибо за видео!
Для чего нужен синус в Sass?
Использование довольно прямолинейное и частое в обычном дизайне.
Прошу подсказать.
Автор, у Вас замечательные уроки, спасибо огромное! Вот тут только, непонятно, почему используете синтаксис Sass а не SCSS? Ведь последний CSS подобный, намного более интуитивно понятен для новичков после освоения CSS. Посмотришь на код SCSS и сразу ясно, что к чему относится, где кончается одно и начинается другое, он четок, хорошо структурирован. О синтаксисе Sass я бы такого не сказал. Это, впрочем, лично мое впечатление, но, думаю, у многих такое-же. К тому же, с SCSS очень легко перейти на тот же Less, где практически все то же самое, за исключением некоторых деталей.
Александр Зинченко Полностью с Вами согласен. С SCSS проще, удобнее, нагляднее и быстрее... сказка просто.
Добрый день.
Хочу начать изучение препроцессора, но изначально, то ли от попадающегося на эту тему материала, то ли от более, на мой вкус, симпатичного сочетания букв, хотел изучить LESS. Параллельно смотрю ваши видео по Bootstrap.
И вот на сайте Бутстрапа прочел, что он (бутстрап) будет поддерживать в скором будущем только один препроцессор - SASS.
В этой связи родился вопрос - если я из бутстрапа хочу взять только сетку, но при этом пользоваться Less-ом, не нарвусь ли на некий подводный камень? Что посоветуете - less или sass?
Правильно ли я понимаю : если я собираюсь использовать Бутстрап, то лучше сразу изучать Сасс?
интересный момент: делал все как в уроке, прописал
body {
background-color: green
} .
Watch стартует, пишет все что надо, не выдает никаких ошибок , но не работает компиляция. Ставлю после green точку с запятой - работает. Появляется файл main.css
Так ты просто сделал scss формат, вот тебе и весь "момент". В sass не пишутся фигурные скобки и ";" - в этом одна из его основных "фишек"
Спасибо,отличный урок)
awesome channel, congratulations!
у кого sass не создает css, немного дальше просмотрите урок по синтаксису sass, если body
background-color: #fff написать через пробелы а не с помощью таб, всё работает
он в начале урока объяснил, что надо выбрать или пробелы или табуляцию (перед параметрами) и соблюдать этот стиль по всему документу
Здравствуйте. Скажите, а как лучше настроить взаимодействие gulp и git? Получается, что я сначала сделал push папки dist в репозиторий, но не учел, что она каждый раз удаляется и создается новая. Получается, что правильно пушить файлы sass и html из папки app? Спасибо за ответ.
Класс
все делал как показано. На 9.40 видео создаем файл main.sass, задаем стиль body background-color, сохраняю. Файла в папке css НЕ появляется. В чем дело??? До того все делал буквально копируя видео.
Была такая же проблема , потом нашел решение на форуме. Надо создать папку через cmd и все будет появляться
на видео он запускает консоль в папке "myprojects" , а ты открой в папке "sass" и у тебя всё получится. У меня вышло)
Просто команда должна быть gulp sass
спасибо
Хороший материал, Спасибо. Поведай про кросс-браузерную верстку с практической стороны...
Джедай верстки.
Как Вы сделали что бы было видно дерево кода(тире - там где таб, и точки - где пробелы). Подскажите как так сделать.
Привет! Сделай урок как ты верстаешь свой сайтсможешь?
Кайфую от 60 FPS :D
Было бы вообще круто ещё бы руководство по Jade
А возможно работать например с sass на хостинге? На котором нет node.js и gulp. Просто очень часто работаю с проектом по ftp, на котором всё едет на php. Подскажите, пожалуйста, есть ли препроцессоры php. Или же полноценных решений не существует и проекты такого рода делать локально с будущим переносом? Это не удобно, особенно если ты работаешь не один, и завтра твой css файл кто-то допишет)).
Сергей Белошенко в случае кооперативной работы юзается система контроля версий.
Сергей, проблема не в том, есть ли на хостинге node.js и gulp, а втом что разработку можно вести на компютере, node.js и gulp обрабатывают все расширения, в плоть до.тхт,
Есть какая-то существенная разница при подключении SASS с помощью Ruby или gulp?
привет. Если я не ошибаюсь, у тебя где-то был урок по оптимизации сайта. Я сейчас говорю не о сео оптимизации, а вот эти штуки для page insights и прочее. Есть у тебя такое?
Да, есть такой урок. Рекомендую ознакомиться: th-cam.com/video/fPafJs-MFx0/w-d-xo.html
У меня вопрос. Сделал себе сборку галпа, чтобы автоматом делал спрайты. Под каждую иконку в файле 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})
Нужно объявить переменную.
codepen.io/agragregra/pen/ZOQQjd
Не получается. Переменную объявил, но в результате получается, что в миксин уходит именно значение конкатенации двух переменных, а не новая переменная
codepen.io/andrey_push/pen/rLxeKj
У вас ошибка в Sass.
здравствуйте, у меня проблема
когда в файле main.sass ввожу:
body bgc# и нажимаю tab, то он просто дописывает символ % перед строчкой
что делать?
лайк не глядя
может быть свойство прозрачности opacity?
Подскажите плиз, есть ли подсветка синтаксиса sass для sublime text3? устанавливал плагин Sass, стал определять что это файл sass но подсветки нет( а каждый раз выбирать что использовать синтаксис css(справа снизу) лень(
а есть вообще разница как пользоваться через приложение или таск менеджеры? может преимущества какието или в нет
Припустим проект уже сдан. А через некоторое время нужно кое-что поменять, или добавить в CSS коде. Не менять ведь его вручную без препроцессора?
Только с препроцессором.
Добый день,каким-то образом в файл main.css заливаеться один и тот же код ,что был в начале : background-color: #000 ,я удалял код с sass файла (и менял),удалял сам css файл-безрезультатно. В чём может быть проблема?
Привет, подскажите кто знает может, как в VS Code на sass сделать что бы например после background: url(" ") выскакивала типа подсказка пути к файлам, а не самому вручную писать этот путь. На CSS и SCSS такая подсказка появляется...
Мне нравится больше Less, но так же и Sass использую иногда.
Работать с Bootstrap и Sass одновременно есть смысл?
Ура
Как включить подсветку табов ?
Я включаю подсветку табов в VSCode следующим параметром в settings.json:
"editor.renderWhitespace": "boundary",
Ребята, подскажите кто знает. На Less у меня в Visual Studio Code работало автозаполнение: набираю @ (собачку), а редактор выдает мне на выбор список переменных. Очень удобная штука, не нужно все переменные (или цвета) в голове держать. Как можно такую фичу на Sass прикрутить?
как при компиляции объединить одинаковые классы без минификации
Сделал всё как по видео, в cmd запускаю gulp и ошибок не выдает, запускаю main.sass пишу стили но в папке css не создается файл как по видео
на видео он запускает консоль в папке "myprojects" , а ты открой в папке "sass" и у тебя всё получится. У меня вышло)
Скажите,все сделал для того,чтобы установить sass через gulp,но sublime text 3 не видит вообще расширения sass!То есть даже когда от руки создаю файл с расширением sass,sublime его не видит!В packaje.json он подключен,и в gulp файле тоже
Почему то не компилит файлы из sass в css. Все пакеты установил, когда в командной строке ввожу gulp выдает, что watch работает... Но файл css почему-то не создается (((
Заработало, ничего потом не изменял и теперь опять не компилит....... (((
Какие логи в консоли?
Спасибо, всё заработало)
на видео он запускает консоль в папке "myprojects" , а ты открой в папке "sass" и у тебя всё получится. У меня вышло)
блин все понятно все отлично, запусил вотч , создаю ssas сохраняю, а в css папке ничего не появляется
Введите gulp sass вместо watch
Друг, подскажи почему EMMET не работает в sass как его подключить? Только в css html пашет
Нужно установить плагин Sass для Sublime Text 3.
Подскажите пожалуйста, я новичок, какой синтаксис лучше использовать sass или scss
Какой больше нравится.
спасибо за ответ)
привет. подскажите плз почему у меня в gulpfile.js в 7 строке выдает ошибку я уже даже вашу запись скопировал и вставил таже проблема
Как реализовать селектор непосредственного потомка в sass:
div > p
?
Так и реализовать ))
Можно Enter > Tab
Спасибо
кто нибудь знает решение, чтобы в сокращенном синтаксисе (.sass), отступ после нажатия Enter сам проставлялся? В стилусе нет такой проблемы, хотя синтаксис тоже без кудрявых скобок, отступ сам ставится, и ненужно после каждого класса/селектора Tab`ать.
сегодня установил sass, но когда начал писать там код, то был неприятно удивлен, тем что нужно прописывать каждое свойство с начала до конца, если какой-то плагин для того чтоб код был как в чистом css в Brackets написал первую букву и тебе варианты что нужно!?
Используйте другой редактор кода, который поддерживает автокомплит Sass, например, VSCode + расширение Sass или Sublime Text + расширение Sass.
Друзья, а что делать, если проект был написан с иcпользованием sass, потом кто-то ручками правил css файлы и не использовал sass? :(
VasylSemikhov удаляешь css, заново компилируешь нетронутый sass :)
И делаешь все заново, что было написано на css?)
А как должен выглядеть js код для четвертого gulp?
см. ссылку в описании.
не хватает очень важного урока, о том как можно плавно перенести существующий проект на Gulp
Сорри, как называется редактор?
Здравствуйте, не работает emmet в sass. Что делать?7
Установите модуль Sass для Sublime Text.
Что за IDE?
SPA SI BA!!
А чем может быть вызвана такая ошибка?
$ gulp sass
internal/modules/cjs/loader.js:589
throw err;
^
Error: Cannot find module 'gulp-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
at Function.Module._load (internal/modules/cjs/loader.js:513:25)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\Lenovo\Desktop\sass\gulpfile.js:2:12)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
Здравствуйте. У вас отсутствует модуль gulp-sass. Установите модуль командой npm i -D gulp-sass
Видео хорошое, но мне больше нравится SCSS
Верно?
1. глобальная установка gulp
2. локальная в папку проекта gulp
3. локальная установка gulp-sass
В общих чертах, да.
скажите что за редактор в уроке
ST
+WebDesign Master спасибо, не узнал
Прошу прощение, а вот эти манипуляции по установке в свой проект галпа и саса надо делать каждый раз когда начинаешь новый проект? Вопрос может глупый, не пинайте, что то я не въеду полностью пока в этот галп. P. S. Gulp доя самых маленьких посмотрел.
Нет. Достаточно использовать ваш пресет или скачать мой: github.com/agragregra/optimizedhtml-start-template
WebDesign Master спасибо за ответ и ссылку
+
что за тема у вас в sublime
One Dark