Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
I would like to integrate Sass files (.scss) into an Umbraco solution. Does anyone has experience with this? Where do you put your .scss files, how do you structure your .scss and .css files. Are there any pitfalls for using Sass with Umbraco?
Thanks for your advice,
There should not be any issues using sass with Umbraco. I think it's all about figuring out what the best structure for your project is. So I imagine you have some folders for frontend files like css, scrips, images etc.
Then I would simply create a folder called scss for instance and then make the compiled CSS end up in the CSS folder and in my masterpage link to the css file(s).
That's really it - remove Umbraco from the equation since it should really just work without any Umbraco related issues. The approach should be the same as if you did not rely on a CMS but was just using static files really (or any other CMS).
Hope this makes sense to you :)
Thanks, it's the first time I use Sass in a Umbraco solution, so I wanted to make sure there were no pitfalls or things I should take care of in advance.
I'll post my content structure here, one I got it integrated.
Sounds good - looking forward to learn more about your expeprience using sass and cool you've begun using it :)
Just to chip in (I use LESS but the issue is exactly the same):
Pretty much a reiteration of what Jan said: Build your Umbraco solution as if you were using plain CSS and then just use whatever tools you need for that - my usual setup looks like this (abridged for clarity):
- less/ - app.less
- css/ - app.css
Whenever I save a file in the app/less/ directory, the app.less file (because it imports all the others) will be compiled and saved as app.css in the umbraco/css/ folder. Likewise with files in coffee/ ending up as umbraco/scripts/app.js
I'd advise against using your .scss files directly in the css folder and then using an HTTPHandler to process and deliver them as CSS... wrong "problem" (IMO).
Thanks for the advice. So if I understand it correctly, you created a different project (/app) in your solution for your .LESS and Coffescript files.
I created a Sass folder under my site root.
In my 'app.scss' I'm importing all the partial .scss files.
I'm also using Compass, but still need to learn some things using it, because for now it's compiling the 'app.scss' file to my Sass folder instead of my css folder. I tried configuring the config.rb file like this:
# Set this to the root of your project when deployed:
so I don't fully grasp right now, why Compass isn't putting my compiled .css files in the 'css' directory.
Also I'm using the Workbench add-on for Visual Studio (http://www.mindscapehq.com/products/web-workbench) but coding .scss is still somewhat of a hassle as the Intellisense of Visual Studio doesn't understand the Sass code and tries autocomplete my Sass code. Very annoying!
ps: funny, I tought on your session at Code Garden that you advised people to use Sass instead of LESS, must have been my imagination :)
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted