Getting Tridion to use SASS

Question

Is there any way to get Tridion and SASS to work together nicely? e.g. I upload my .scss files and they are automatically converted into css files when I publish or create a component presentation?

Is there a best practice/tool/add-on which could facilitate this?

Thanks

Answer 1

A couple of steps are necessary in order to get Tridion to use a CSS preprocessor, but it certainly can be done:

1. Install Sass on the Tridion server. Since Tridion runs on windows machines, you should install first Ruby, and then Sass. You need to be able to build Sass things from the command line.
2. Make sure that .scss is a valid mimetype. Within the Tridion gui, goto Administration > Multimedia Types > Show Multimedia Types. Click New Multimedia Type and create one for scss. look at the "Cascading style sheet" for inspiration on how to fill in the fields.
3. Add Sass to the default multimedia schema. Find your default multimedia schema, open it up, and make sure that Sass is added to "allowed multimedia types".

At this point you can do the following:

• upload .scss files into tridion as binaries
• add them to a page under a component template (commonly the "code component template)

You could even publish the page, but it won't do you any good... yet!

You still need to build the Sass, for this is the more difficult and fourth step:

1. Create a TBB that "processes" your preprocessed CSS. You'll need a .NET assembly to do this. That assembly should grab the .scss files via a webdav URL, execute the build command, and then the value returned should be the built page - which is now CSS.

Answer 2

There's probably a number of ways to do this, here is roughly how I would look at implementing:

1. create a multimedia type in the CMS to support the .scss file extension

2. associate that mm extension to an existing or new multimedia schema (i'd probably do a 'sass' specific schema so it can have a 1-1 relation ship with a component template)

3. Associate your 'sass schema' to a CMS component template, e.g 'SASS to CSS Processor'.

4. Your component template is build using .net, so it's a case here of extracting the content from your uploaded .scss file (really simply using the TOM.NET api), the using one of the many SASS .net libraries to do the compilation to CSS (for example: http://libsassnet.codeplex.com/), you can then use the TOM.NET api to publish the file as needed

let me know if you need any more detail.

Answer 3

This is using LESS rather than SASS, but a similar process to follow:

http://www.building-blocks.com/thinking/adding-less-support-to-sdl-tridion/

Answer 4

In the SDL Tridion Reference Implementation we use Bootstrap and Less which is compiled via Grunt. We have all the Bootstrap source files (for CSS, JS, and icon fonts respectively) stuffed in a zip file (html-design.zip), which is unpacked to a temporary folder by a Template Building Block at publish time. Then we use Grunt (via Node.js installed on the Publisher server) to build the assets (CSS, JS and fonts) which are then published as Multimedia Component variants.

You can find the source code for the TBB on GitHub -> https://github.com/bkoopman/tri/blob/a605e4c6f05bcc5428cae8672e2519dda30e9c5c/content-management/Sdl.Web.Templating/Templates/PublishHtmlDesign.cs

linked to the original source which is a bit more descriptive in the process of extracting the zip (line 73), running Grunt (lines 100-151 and publishing the assets via AddBinary() (lines 164-197)

So if you are planning to compile your SASS with Grunt, you could use a similair approach.