Over the last couple of months I've been extolling the virtues of LESS to all and sundry at Building Blocks as a modern way to manage complex front-end styles, and eventually brought our resident front-end development guru, Paul Welsh, round to the idea.
The next logical step was to make it easy to use in production on our projects without having to compile the LESS locally and simply uploading the resulting CSS. That way we can keep the LESS in source control, and upload to Tridion, and have it publish out the compiled CSS.
What is LESS, and why should I use it?
LESS and its .NET port .LESS, is a dynamic stylesheet language, which extends the standard CSS syntax. This means you can write standard CSS code and add LESS code to the stylesheet as and when you need it. LESS has everything that CSS is missing, and reduces the verbosity of CSS; completely eliminating it by introducing the following features:
- Variables: variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet. Making global changes is as easy as changing one line of code!
- Mixins: mixins allow you to embed all the properties of one class into another class by simply including the class name as one of its properties. It's just like using a variable, but for whole classes.
- Nested Rules: say goodbye to long unwieldy selectors - simply nest selectors inside other selectors; this makes inheritance clear and style sheets shorter.
- Functions: LESS provides a number of useful helper functions to make working with colours easier, as well as functions for checking the type of parameters passed to mixins.
- Operations: operations allow you to perform calculations. This lets you add, subtract, divide and multiply property values and colours.
- Namespaces: using namespaces allows you to group variables and mixins; highly useful to avoid naming clashes.
Cool, so how do I integrate LESS into Tridion?
By the magic of free, open source software, and the Template Building Block I built, you too can enjoy using LESS in Tridion by performing the following steps:
Firstly, open the "Cascading style sheets" Multimedia Type from Administration > Multimedia Types, and add less as a file extension:
Next, download the binaries from https://github.com/downloads/jimmah/tridion-less-tbb/tridion-less-tbb_v0.1.zip. Once you have extracted the zip file, first you will need to install
dotless.Core.dll into the GAC on the Tridion server:
gacutil /i dotless.Core.dll
Once this is done, edit the
config.xml file for your Tridion environment, and from a command window execute the following command:
TcmUploadAssembly config.xml /verbose /folder:<your_tbb_folder_tcmuri_here> Blocks.Tridion.LessSupport.dll
If everything has gone according to plan, you should now have the following items in the folder you specified above in Tridion:
[bbBreakout type="c"][bbFigure class="post-figure-c"][bbFigureMedia][/bbFigureMedia][bbFigureCaption]The Blocks.Tridion.LessSupport TBB assembly[/bbFigureCaption][/bbFigure][bbFigure class="post-figure-c"][bbFigureMedia][/bbFigureMedia][bbFigureCaption]and the "Process LESS" TBB[/bbFigureCaption][/bbFigure][/bbBreakout]
The final step is to create a Component Template "Process LESS" that calls our new TBB, ensuring the "Default Multimedia Schema" is added as a Linked Schema.
Now, how do I use it?
Simply create some LESS files, for example:
[bbToggle showText="Show code" hideText="Hide code" linkClass="btn btn-style-c"][bbSectionBreakout class="section-code"][gist id="3017117"][/bbSectionBreakout][/bbToggle]
Now upload these into Tridion as Multimedia components:
A couple of things to note here:
If you want to use
@import, please ensure the imported LESS files are added as components named the same as your import, within in the same folder in Tridion.
If you want to use images in your style sheet, via the
url(..) syntax, you can either upload them directly to the published site, or add them as Multimedia Components in a folder named "images" under the folder containing your LESS files and they will be automatically published when your LESS file is published.
When you come to publish out your style sheet, take the following steps:
- Create a page in your publication for your main LESS file, for example, 05 Website > Root > _styles > test.less:
- Add the test.less component created earlier, using the Process LESS component template:
At publish time the TBB translates the LESS to CSS and once published this will produce the following CSS:
[bbToggle showText="Show code" hideText="Hide code" linkClass="btn btn-style-c"][bbSectionBreakout class="section-code"][gist id=3017341][/bbSectionBreakout][/bbToggle]
This post discussed reasons to use LESS for your stylesheets over plain ol' CSS, and how to use a custom TBB to combine, compile and publish your LESS from Tridion as CSS.
The TBB source code is hosted on Github at https://github.com/jimmah/tridion-less-tbb and pull requests are welcome. If you've got any feedback or suggestions for future features, please post a comment, or create an issue on Github.