Creating HTML themes in ASP.NET Core 1.0 using Sass

This article shows how to create HTML themes in an ASP.NET Core 1.0 angular application using Sass and grunt. The CSS themes are created using Sass, built using grunt-contrib-sass and compressed using grunt-contrib-cssmin. Angular is then used to switch the themes, using an input button.

Code: https://github.com/damienbod/AspNet5ThemesSassGrunt

2016.07.01: Updated to ASP.NET Core 1.0 RTM
2016.05.16: Updated to ASP.NET Core 1.0 RC2 dotnet
2015.11.18: Updated to ASP.NET Core 1.0 rc1
2015.10.20: Updated to ASP.NET Core 1.0 beta 8
2015.09.20: Updated to ASP.NET Core 1.0 beta 7

Sass is used to create the CSS stylesheets so that the application can use parameters to define the different style options and also keep the Sass CSS DRY. The basic colors are defined in a separate Sass file. It is important to use the !default option. This makes it possible to override the property in a theme.

$primary_color:  #337ab7 !default;
$border_color: #337ab7 !default;
$header_color: #337ab7 !default;
$background_color: #fff !default;
$text_color: #000 !default;

The colors Sass file can then be used in the main Sass file. This can be done by using the @import keyword. The properties defined in the external Sass file can be used anywhere in this file.

@import "colors";

.bodydefinitions {
    background-color: $background_color;
}

.panel-primary > .panel-heading {
    background-color: $primary_color;
    border-color: $border_color;
    color: $text_color;
}
.panel-heading {
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 10px 15px;
    color: $text_color;
    background-color: $background_color;
}

.panel-body {
    padding: 15px;
    color: $text_color;
    background-color: $background_color;
}

.changeThemeButton {
    color: $text_color;
    background-color: $background_color;
    padding:15px;
    margin:15px;
    margin-bottom:0;
}

Once the main styles have been defined, the default theme can be defined. This is very simple.

@import "colors";
@import "main";

A second theme can be defined and the properties can be set as required.

$primary_color:  #ff6a00;
$border_color: #ff0000;
$background_color: #000;
$text_color: #fff;

@import "main";

Now the Sass code needs to be compiled into CSS and also compressed to a min file. This is done using grunt and not Web Essentials, because Web Essentials does not work with Sass and @import. To use the grunt Sass task, Sass needs to be installed:

http://sass-lang.com/install

Sass requires ruby and also that it is included in the windows path (if your installing on windows.)

Once Sass is installed and working from the command line, the npm packages can be downloaded (packages.json)

{
	"name": "package",
	"version": "1.0.0",
	"private": true,
	"devDependencies": {
            "grunt": "0.4.5",
            "grunt-bower-task": "0.4.0",
            "grunt-contrib-cssmin": "0.12.2",
            "grunt-contrib-uglify": "0.8.0",
            "grunt-contrib-watch": "0.6.1",
            "grunt-contrib-sass": "0.9.2"
	}
}

Then the grunt file can be configured. The grunt file is configured to compile the Sass files into the same directory, and then compress the CSS files and copy these to the wwwroot directory. The watch task is configured to watch for Sass changes.

module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks("grunt-bower-task");

    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        sass: {
            dist: {
                files: {
                    'wwwroot/default_theme.css': 'app/content/default_theme.scss',
                    'wwwroot/dark_theme.css': 'app/content/dark_theme.scss' 
                }
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            dist: {
                files: {
                    'wwwroot/default_theme.min.css': ["wwwroot/default_theme.css"],
                    'wwwroot/dark_theme.min.css': ["wwwroot/dark_theme.css"]
                }
            }
        },
        uglify: {
            my_target: {
                files: { 'wwwroot/app.js': ['app/app.js', 'app/**/*.js'] }
            }
        },
        watch: {
            scripts: {
                files: ['app/**/*.js'],
                tasks: ['uglify']
            },
            appFolderCss: {
                files: ['app/content/**/*.scss'],
                tasks: ['sass', 'cssmin']
            }
        }
    });

    grunt.registerTask("bowertask", ["bower:install"]);
    grunt.registerTask('default', ['sass', 'cssmin', 'uglify', 'watch']);

};

The CSS files can be used in the HTML directly from the wwwroot folder. The HTML file uses an angular boolean property called load to switch between the different themes. When the button is clicked, the themes are toggled.

<!DOCTYPE html>
<html ng-app="mainApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>AngularJS Themes using SASS in ASP.NET 5</title>
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

        <link href="dark_theme.min.css" ng-if="load" rel="stylesheet">
        <link href="default_theme.min.css" ng-if="!load" rel="stylesheet">
    </head>
    <body class="bodydefinitions">
        <div>
            <input class="changeThemeButton" type="button" ng-click="load = !load" value="Change Theme" />
            <hr />
            <div ui-view></div>
        </div>

        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular-ui-router/angular-ui-router.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

The application using the default theme:

The application using the dark theme:

HTML themes can be easily created using Sass. As well as colors, layout, images and animations can all be styled using separated themes.

Links:

http://sass-lang.com/install

Pragmatic guide to Sass

https://github.com/gruntjs/grunt-contrib-sass

Tags: angular-drag-and-drop-lists, angular-http-batcher, ASP.NET, ASP.NET Core, ASP.NET Core 1.0, aspnetcore, dotnet, grunt, MVC, SASS