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

Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.

[дмитрийпилигрим-хв]

Старина,
в раю, в секторе для веб-мастеров для тебя уже зарезервировано бунгало с видом на океан.
Не конкретно за это видео, а за образ мышления, ну и ваще.
Респект и уважуха, не могу больше молчать...

[vasilishahov]

Если кто нибудь будет смотреть, работая на 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'))

[wdm]

Внимание! Деление следует выполнять функцией math.div(), а не прямым слешем. Например:

Неправильно:
$summ: 10 + 20 / 2

Правильно:
$summ: 10 + math.div(20, 2)


Сложение цветов теперь следует выполнять посредством функции color.mix(), а не «+»:

Неправильно:
#440203 + #550506

Правильно:
color.mix(#440203,  #550506)

[glorp_productions]

Лучший урок по SASS из всех на русском ютубе. Лайк и большое спасибо.

[kirill]

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']);

[createxis]

Дружище, отличные уроки! Не могу не заметить, что очень не хватало подписи хоткиев, которые ты используешь, не выключай их в других видео! Иногда из головы выпадают комбинации клавиш, а так наглядно все. Спасибо за невероятный труд!

[uaplatformacomua]

Спасибо за единственное нормальное видео по чистому .sass Везде руководства только по scss. Я многое для себя почерпнула, завтра постараюсь что-то применять!!!

[levmorgan]

Большое спасибо за урок. Объясняешь все понятно и по делу)

[avin]

Спасибо большое, автор, у Вас преподавательский талант, всё понятно даже совсем новичку. Супер!

[luckyquestions]

Ну а теперь, следуя логике было бы не плохо, запилить видео - Less для самых маленьких и Stylus для них же) Спасибо, за видео!

[otto-vector]

Уважуха. Смотрю уже несколько уроков и мне нравится подача материала. (В тему gulp так вообще за два дня въехал... с нуля)
Да и ещё. Это всё бесплатно!

[ВячеславРоманцов-же]

Посмотрел несколько уроков по Sass и только благодаря этому понял что к чему! Спасибо!

[rvolik]

благодарю! от слов Благо Дарю за твое время и стремление подарить знания!

[vodolazbest]

у кого sass не создает css, немного дальше просмотрите урок по синтаксису sass, если body
background-color: #fff написать через пробелы а не с помощью таб, всё работает

[darkside]

лучший канал по верстке! автору большой респект )

[ZazzizzuzA]

Очень хорошо. То, что искал. Спасибо.

[ruslannamanov]

Спасибо вам за все уроки, хотелось бы ещё про scss

[HonoraryBreathTaker]

Это бесценная информация. Огромное спасибо!

[vost]

интересный момент: делал все как в уроке, прописал
body {
background-color: green
} .
Watch стартует, пишет все что надо, не выдает никаких ошибок, но не работает компиляция. Ставлю после green точку с запятой - работает. Появляется файл main.css

[az]

Добрый день!
Скажите пожалуйста, как будет правильнее, сначала изучить Sass или же Gulp?