Take the 2-minute tour ×
Tridion Stack Exchange is a question and answer site for Tridion developers and administrators. It's 100% free, no registration required.

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

share|improve this question

4 Answers 4

up vote 14 down vote accepted

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.
share|improve this answer

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.

share|improve this answer
    
Thanks John. Your additional details about compiling the SASS in .net are very useful. –  Luke Jan 30 at 10:47

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/

share|improve this answer

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.

share|improve this answer
    
Thanks Bart! This piece of code is very helpful. I am currently working on something similar. However, one thing I am having trouble with is running a Windows command from my Template Building Block. I have followed your code closely, but for some reason, my cmd doesn't seem to run. –  Damian Jewett Oct 4 at 19:24
    
Seems to be a permissions issue, perhaps something similar to this: codeproject.com/Questions/652362/… But I still have not been able to do Process.Start() from within my TBB. I can make the same Process.Start() call from a regular console application, but not from a TBB... –  Damian Jewett Oct 5 at 15:28
    
@DamianJewett a TBB is usally run by the NT Authority/Network Service or the local system account, depending under which account your Publisher service is running. But when you preview, it is the account of the Service Host most likely. With that said, I never encountered any permission issues running the cmd process this way. What I did have problems with was which programs were in my path for example. –  Bart Koopman Oct 6 at 9:37
    
Yes, one of the problems I was having was due to JAVA_HOME not being set (according to an exception thrown by my TBB), despite the fact that JAVA_HOME WAS set in both the user and system environment variables. I got past this by setting the JAVA_HOME environment variable explicitly in my TBB. (Java is used by Maven, which is what we are using to compile SASS). –  Damian Jewett 3 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.