Будь вкурсе свежих уроков!
В категории: Курсы Frontend — HTML, CSS и JavaScript
Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.
Курс доступен после регистрации ← ЖМИ!

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

392 просмотра

Как установить 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 отзывов

Информация

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