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?
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).
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.
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):
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.
siteroot/
- ....
- sass
_global.scss
_icons.scss
_typography.scss
_sidebar.scss
_widget.scss
_app.scss
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!
greetings,
Anthony
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 :)
Sass and Umbraco
Hi,
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,
Anthony
Hi Anthony
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 :)
/Jan
Hi Jan,
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.
greetings,
Anthony
Hi Anthony
Sounds good - looking forward to learn more about your expeprience using sass and cool you've begun using it :)
/Jan
Hi Anthony,
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):
MyWebSiteProject - app/ - coffee/ - less/ - app.less - typography.less - grid.less - ... - umbraco/ - scripts/ - css/ - app.css - images/ - xslt/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).
/Chriztian
Hi Chriztian,
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.
siteroot/
- ....
- sass
_global.scss
_icons.scss
_typography.scss
_sidebar.scss
_widget.scss
_app.scss
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:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "scripts/js"
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!
greetings,
Anthony
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...