Будь вкурсе свежих уроков!
В категории: Курсы Frontend — HTML, CSS и JavaScript
Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.
https://www.youtube.com/embed/4Fl23vtPRx0
https://www.youtube.com/embed/HJ-YO-cTsWQ
https://www.youtube.com/embed/30r8JEfVbZY
https://www.youtube.com/embed/8bJCfLNFaYY
https://www.youtube.com/embed/L6H70DaI134
https://www.youtube.com/embed/atd7x0PKV14
https://www.youtube.com/embed/6LVQMMpYmvc
https://www.youtube.com/embed/8b1x8fS2Cuo
https://www.youtube.com/embed/66Yo-MrEoxY
https://www.youtube.com/embed/VsiJ6-iEp6Y
https://www.youtube.com/embed/gJiievPDjNc

SASS уроки для начинающих

2 255 просмотров

Как установить SASS при помощи GULP

Для того, чтобы запустить SASS при помощи GULP вам нужно установить Node.JS или посмотреть предыдущий курс по GULP и Node.JS. Далее нужно зайти в папку проекта и запустить из неё командную строку и ввести следующую команду:

npm init

После создания проекта в директории, нам потребуется установить пакеты Gulp и Gulp-SASS, они устанавливаются следующей командой:

npm i --save-dev gulp gulp-sass
После того как пакеты установились, вам потребуется самостоятельно создать файл в корневой директории проекта под названием: gulpfile.js далее зайти в него, и прописать команды для Gulp. Если вы ещё не знакомы с Gulp, рекомендуем посмотреть предыдущий курс.

Код в gulpfile.js (изменено согласно изменению синтаксиса в Gulp 4):

var gulp = require('gulp'), //подключаем пакет gulp
    sass = require('gulp-sass'); //подключаем пакет sass

gulp.task('sass', function(done) {
    gulp.src("sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"));
    done();
});

gulp.task('serve', function(done) {
    gulp.watch("sass/*.sass", gulp.series('sass'));
    done();
});

gulp.task('default', gulp.series('sass', 'serve'));

Далее создайте следующую папку и файл: /sass/style.scss , а также папку /css/

Код SASS в style.scss:

$header-color: #583A29;
$bg-color: #FF4500;
body{
    background-color: $bg-color;
}
.block{
    background-color: $header-color;
    h1{
        color: $bg-color;
    }
    a{
        color:green;
    }
}

Далее в командной строке запускаем Gulp, командой:

gulp

И смотрим на результат: /css/style.css

Вы можете поделиться или сохранить для себя этот урок в социальных сетях:

Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов

Нужна помощь?
чат помощи в телеграме
Подскажите, что посмотреть чтобы стать React-разработчиком и с чего начать?
Вы, в 11:21
Здравствуйте. Для этого нужно знать фундаментальные основы вёрстки и JavaScript. Сейчас пришлю что посмотреть
Андрей, в 11:25
Изучете полностью данный раздел: https://showskills.ru/it/developer.... далее изучайте этот раздел: https://showskills.ru/it/developer....
Андрей, в 11:29

Информация

Посетители, находящиеся в группе Незарегистрированные, не могут оставлять отзывы к данному курсу.