Использование Sass в вашем приложении Ionic Framework, как Pro

Примечание : Мы предполагаем, что вы знакомы с Gulp & Sass

Ионные рамки по умолчанию использует CSS, но позволяет настроить его значения по умолчанию с помощью Sass.

Все, что вам нужно сделать, это использовать эту удобную маленькую команду Ionic Setup Sass И ты все набор. Если вы хотите более подробное руководство GO здесь Отказ

Это создает задачу в вашем Gulpfile.js Для компиляции файла SASS расположен в SCSS/Ionic.app.scsss Отказ

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

Получить часть этого настоящего насальника

Предполагая, что вы настроили свое ионное приложение с помощью команды Ionic Setup, у вас будет что-то похожее на это:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Ionic использует Гульп-Сас и не имеет никаких вариантов, не переданных по умолчанию, что я люблю делать здесь, это добавить поддержку компаса, чтобы мы изменим .pipe (Sass ()) и пройти в объекте с Компас: правда – Это говорит о SASS использовать компас.

Вам понадобится библиотека Ruby Compass установлен и доступен на вашем пути

Ваш конфигуратор Gulp теперь выглядит так:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({
    	compass: true
    }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Я также люблю включать в себя журнал ошибок и быстрый способ сделать это, чтобы войти прямо на консоль. Поэтому мы возьмем наш объект Sass Config и добавить errlogtoconsole: True Отказ Теперь вы должны иметь что-то похожее на это:

.pipe(sass({
    	compass: true,
        errLogToConsole:true
    }))

Модульность

Если вы используете SASS, вы, вероятно, наслаждаетесь преимуществами использования модулей и методов разделения кода, описанные в SMACS или BEM.

Вы можете быть знакомы с Sass-Globbing, экономя от необходимости вручную добавить каждый новый файл на ваш main.scssss – Для Ionic вы будете использовать Ionic.app.cscss Отказ

Чтобы включить это в вашем Gulpfile.js вам нужно будет запустить NPM установить --save-dev Gulp-Sass-Bulk-Import Чтобы получить пакет NPM.

Добавить VAR («Гурп-Сассо-Массовый импорт»); в список переменных в верхней части вашего Gulpfile.js Затем вы можете трусить функцию в вашу задачу SASS. Ваш конфиг теперь должен выглядеть так:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(bulkSass())
    .pipe(sass({
    	compass: true,
        errLogToConsole:true
        }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Обратите внимание, что я поставил функцию выше нашей функции SASS (). Это важно, как нам нужно собрать все наши .scss Файлы перед трубом их в нашу функцию SASS.

Вот и все. Вы все намерены идти.

Получить часть этого настоящего насальника

Модульность

Читайте ещё по теме: