SCORE 2.0 Support for SASS and LESS

Owned by Brian Beckham (Unlicensed)
Jan 04, 2016
3 min read

The BrainJocks solution scaffold now supports both LESS and SASS for development teams that are kicking off new projects.

The solution structure in Visual Studio within the tenant area includes two folders - the less folder that is has been there since the original SCORE public release, and now a folder called scss which contains the SASS version of the default styling.

By default, only the scss folder and it's contents are included in the Visual Studio solution, so when scaffolding a new tenant site, SASS will be used by default.

In the csproj file of the Web project that contains the tenant MVC area, the following code is included near the bottom of the file:

As you can see, the file includes statements to compile both the SASS and LESS versions of the files, except that he LESS compilation is commented out.

To use SASS within your tenant siteTo use LESS within your tenant site

Since the solution is already configured for SASS, you only need to install the SASS compiler.

You can install a free compiler for Windows by installing the Windows Ruby Installer, which can be downloaded from http://rubyinstaller.org/

Once the Ruby Installer is installed, you can install the sass compiler by executing the following from a command prompt:

gem install sass

which will install the compiler and place it in the path. To test the compiler, open a new command prompt and type the following command:

sass -v

which should report the version of the sass compiler installed.

You can also find instructions for installing the SASS compiler at http://sass-lang.com/install

 

To use LESS, you will need to first install a LESS compiler on your machine.

BrainJocks recommends using the LESS compiler that can be installed with node.js.

First, visit https://nodejs.org/en/ and install Node.js for Windows on your machine.

Once node.js is installed on your machine, you can use the node installer to install a free less compiler by executing the following command:

npm install -g less

which will install the LESS compiler and place it in the path. You can test the compiler by opening a command prompt and entering the following command

lessc -v

which should produce the following output

You can also find instructions on installing the LESS compiler at http://lesscss.org/#using-less-installation

 

Next, once the compiler is installed, you must comment out the SASS compilation in the web project csproj file and uncomment the LESS file compilation

 

Finally, open Visual Studio and navigate to the default MVC area. In the PROJECT menu, select the option to "Show All Files"

Find the scss folder, select it, open the menu and exclude it from the project:

Find the less folder, select it open the menu and include it in the project:

The next build will use the LESS compilation instead of SASS (smile)