در این مقاله می خواهیم به شما نشان دهیم که چگونه Sass را به پروژه های خودتان اضافه کنید تا بتوانید با استایل های CSS بهتر کار کنید.SCSS یک نوع پیشرفته ای از CSS میباشد مثلا در آن می توان متغیر تعریف کرد و از حلقه ها استفاده کرد ویک روش برای کوتاه تر نویسی CSS می باشد.

نصب Gulp و  Sass

در ابتدا باید Gulp را در پروژه مورد نظر نصب کنیم . برای انجام این کار از npm استفاده می کنیم و دستورات زیر را اجرا می کنیم

npm install gulp --save-dev

npm install gulp-sass --save-dev

آماده سازی gulpfile.js

برای استفاده از gulp باید یک gulpfile برای ساختن task هایی که می خواهیم بعدا اجرا کنیم ، می سازیم

درمثال زیر ، دو task کلیدی وجود دارد

var gulp = require('gulp'),
sass = require('gulp-sass'),
gutil = require('gulp-util');

gulp.task('sass', function () {
return gulp.src('assets/styles/site.scss')
    .pipe( sass( { outputStyle: 'compressed' } ) )
    .pipe(gulp.dest('wwwroot/css'));
});

gulp.task('watch:sass', function () {
    gulp.watch([
        './assets/styles/*.scss',
        '!./bin/**/*',
        '!./obj/**/*',
    ], {
        interval: 250
    }, ['sass']).on('change', function (event) {
        gutil.log(`File ${event.path} was ${event.type}, running task.`);
    })
})

gulp.task( 'default', ['watch:sass'] );

اولین تابع task ، تعریف sass می باشد ، باید مسیر assets/styles را برای قراردادن فایل scss ، ایجاد کنیم . با استفاده از این می توانیم همه ی فایل های scss را  از پروژه ، وارد (import) کنیم.

مثال زیر را ببینید

@import "default-site";

دومین تابع task ، watch:sass می باشد ، با استفاده از این task  ، قصد داریم که با اجرای فایل های scss در gulp ، فایل های css را یکی یکی بسازیم

آماده سازی css و scss

باید فایل های css را حذف کنیم و فایل های sass را بسازیم . در این مثال site.min.css را حذف و scss را ایجاد میکنیم.

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

.carousel-inner .item img[src$=".svg"] {
    width:100%;
}

#qrCode {
    margin:15px;
}

@media screen and (max-width:767px) {
    .carousel-caption {
        display:none;
    }
}

ما باید یک نامی برای فایل css که درآینده ساخته میشود در _Layout.cshtml مشخص کنیم ، چون که در این مثال از site.min.css استفاده میکنیم.

Run gulp sass

برای اجرای sass نیاز به اجرای gulp داریم . این فرمان قرار است watcher را  اجرا کند ، هر بار که شما فایل scss را تغییر می دهید ، استایل ها را  آپدیت می کند.

اپلیکیشن ما برای استفاده از فایل های scss به منظور کار با استایل ها آماده است.