Scss Styling
in Sitefinity
Introduction
Ultimately we want to deliver as small and as few files as we can for sites. But we also need to be able to maintain and manage these files which usually leads to the opposite result. But today we have excellent pre-processors to help us and I will look at how I use SCSS in Sitefinity.
As web developers we all know that performance helps when we combine and minimize our CSS and JavaScript resources. And recently more and more people are using pre-processors to achieve it.
Why use a pre-processor?
First they allow us to write in a readable and maintainable way and then out put the ideal goobly-gook or optimised minified result.
There are two favorites/popular options too choose from LESS or SCSS. Both are good. Me, I choose SCSS which is, I think, more powerful though I don't think I will ever get to using that level of power.
Next thing to know is that Web Essentials supports both LESS and SCSS. Don't know about this VS extension? Your a web developer????? Forget this blog post and head straight there now!
With web essentials installed you can add a SCSS or LESS file to your project, write your CSS and it automatically generates .css and .min.css files from your .less or .sccs files for you.
So what follows is how I use SCSS to start a Sitefinity theme.
I place my .scss file in the Styles folder. I don't place it in the Global folder because if I did then Sitefinity would actually deliver my ABCStyle.css and my ABC.min.css files. The theme will still work but that's a big waste loading the normal css and the min'd versions.
Next I add a Post Build task to my Sitefinity project to copy the .min.css version to my Global folder. That way Sitefinity is always built and released using the optimised file.
Next I add my framework and library css files to the Styles folder and rename them with an underscore at the start and change the file type to .scss. Now CSS is valid SCSS so converting them is no issue. But why?
One of SCSS features is the ability to load other SCSS files and thus the load order. So in my master SCSS file I am only loading the other files in the correct order. Just like you would have done with the cssLoadOrder.xml file in the Global folder. Which, by the way, we now don't need any more because..... We are only generating one file for all our styles. Yet we can still separate and create readable and maintainable css.
Now I thought I would finish this article off with another standard step I do.
When I started with Sitefinity and I was editing my master pages in the back-end, it wasn't uncommon to have the site styles running-a-muck with the Sitefinity back-end styles. Sometimes making it almost impossible to edit content.
Now the best way to stop your styles competing with the Sitefinity's styles is to wrap your content in a div with an id. Now this div has to live under the <form> tag of an Web Forms master page. This is because when Sitefinity loads your page in the backend, it does so by rendering everything under that <form> element. (Your page is not in an iFrame, (Yay!) and of course you can't have a extra <form> or <body> tag in the markup of a ASP.NET Webforms page.
Now because we have the power of our SCSS pre-processor we don't need to prefix every selector with #ABC. SCSS takes care of that for us if we wrap all our css in #ABC { ... }. Read the SCSS guide for all the other cool stuff it does.
In the above example the outputted CSS is #ABC a { ... } which means that this will only affect <a> tags within my page and not any Sitefinity back-end styling.
Just this one feature makes the effort all worth it.
Hopefully this has been helpful for you.
PS: Sitefinity actually has a LESS processor which will actually allow you to write .less files in the global folder and it will take care of processing them for you. You can check it out on GitHub.
Thanks for reading and feel free to comment - Darrin Robertson
If I was really helpful and you would buy me a coffee if you could, yay! You can.
Leave a comment Load more commentsMake a Comment