Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Anthony Candaele 1197 posts 2049 karma points
    Dec 29, 2012 @ 09:41
    Anthony Candaele
    0

    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

  • Jan Skovgaard 11239 posts 23375 karma points MVP 6x admin c-trib
    Dec 29, 2012 @ 12:50
    Jan Skovgaard
    100

    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

  • Anthony Candaele 1197 posts 2049 karma points
    Dec 29, 2012 @ 15:03
    Anthony Candaele
    0

    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

  • Jan Skovgaard 11239 posts 23375 karma points MVP 6x admin c-trib
    Dec 29, 2012 @ 15:08
    Jan Skovgaard
    0

    Hi Anthony

    Sounds good - looking forward to learn more about your expeprience using sass and cool you've begun using it :)

    /Jan

  • Chriztian Steinmeier 2697 posts 8105 karma points MVP 3x admin c-trib
    Dec 30, 2012 @ 00:22
    Chriztian Steinmeier
    1

    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

  • Anthony Candaele 1197 posts 2049 karma points
    Dec 30, 2012 @ 10:48
    Anthony Candaele
    0

    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 :)

Please Sign in or register to post replies

Write your reply to:

Draft