Препроцессоры Less и Sass

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Для упрощения работы с стилями css особенно в крупных проектах нередко используются препроцессоры Less и Sass, которые позволяют создавать более комплексные таблицы стилей. Less и Saas позволяют уменьшить дублирование кода css, более оптимально организовать стили. И Visual Studio предоставляет встроенную поддержку для Less и Sass, а также ряд связанных с этими препроцессорами расширений, которые могут помочь при разработке. Рассмотрим, как мы можем применять эти препроцессоры в ASP.NET Core.

Less

Для работы с Less возьмем стандартный проект ASP.NET Core по типу ASP.NET Core Web App (Model-View-Controller) и вначале добавим в корень проекта новую папку, которая будет хранить файлы Less. Пусть эта папка называется Less. Затем в эту папку добавим новый элемент по типу LESS Style Sheet и назовем его styles.less:

Определим в файле styles.less следующее содержимое:

@base-color:#f7f7fa;
@article-font-size:13px;
@font:Verdana;

body{
    font-family:@font;
	background-color:@base-color;
}

div{
    margin:10px;
    .article{
        font-size:@article-font-size;
    }
}
h2{font-size:@article-font-size+5;}

@base-color и остальные элементы, которые начинаются с символа альфы @, являются переменными. Каждая переменная несет определенное значение. После определения переменных идут стандартные определения стилей css, правда, вместо конкретных значений они ссылаются на переменные.

Файл с кодом less сам по себе ничего не дает. В итоге нам надо его превратить в файл css. Для этого можно использовать менеджеры автоматизации задач, такие как Gulp или Grunt. В данном случае мы будем использовать Gulp.

Для этого вначале добавим в проект новый элемент по типу npm Configuration File, который назовем package.json

Далее добавим в этот файл функционал Gulp для работы с Less:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "4.0.2",
    "rimraf": "3.0.0",
    "gulp-less": "4.0.1"
  }
}

После сохранения файла в проект будет добавлен соответствующий пакет.

Затем нам надо определить конфигурацию Gulp. Для этого добавим в корень проекта новый javascript-файл, который назовем gulpfile.js и определим в нем следующий код:

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
    less = require("gulp-less"); // добавляем модуль less
	
var paths = {
    webroot: "./wwwroot/"
};
//  регистрируем задачу по преобразованию styles.less в файл css
gulp.task("less", function () {
    return gulp.src('less/styles.less')
            .pipe(less())
            .pipe(gulp.dest(paths.webroot + '/css'))
});

Итоговый проект:

Затем через окно Task Runner Explorer запустим задачу Gulp:

И после этого в папке wwwroot/css появится следующий файл styles.css:

body {
  font-family: Verdana;
  background-color: #f7f7fa;
}
div {
  margin: 10px;
}
div .article {
  font-size: 13px;
}
h2 {
  font-size: 18px;
}

Sass

Использование Sass аналогично Less за тем исключением, что немного отличается синтаксис. Вначале добавим в проект новую папку, которую назовем Saas и которая будет хранить файлы Sass. Затем в эту папку добавим новый элемент SCSS Style Sheet (SASS), который назовем styles2.scss:

В этом файле определим следующий код:

$base-color:#f7f7fa;
$article-font-size:13px;
$font:Verdana;

body{
    font-family:$font;
    background-color:$base-color;
}

div{
    margin:10px;
    .article{
        font-size:$article-font-size;
    }
}
h2{font-size:$article-font-size+5;}

Как можно заметить, данный код похож на код в файле styles.less, только объявление переменных начинается не со знака @, а со знака $.

Как и в случае с Less прежде всего нам надо добавить в файл package.json информацию о модуле gulp, который позволит работать с Sass:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "4.0.2",
    "rimraf": "3.0.0",
    "gulp-less": "4.0.1",
    "gulp-sass": "4.0.2"
  }
}

И также изменим файл gulpfile.js:

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
    sass = require("gulp-sass"); // добавляем модуль sass

var paths = {
    webroot: "./wwwroot/"
};
// регистрируем задачу для конвертации файла scss в css
gulp.task("sass", function () {
    return gulp.src('Sass/styles2.scss')
            .pipe(sass())
            .pipe(gulp.dest(paths.webroot + '/css'));
});

Также перейдем к окну Task Runner Explorer и запустим определенную выше задачу:

И после выполнения задачи в папке wwwroot/css появится новый файл styles2.css, который по своему содержимому не будет отличаться от ранее созданного через Less файла styles.css.