SASS, Wordpress, text editor + local environment: I need help connecting the dots

I’m having a hard time figuring out how to connect all these things together. I’m spinning my wheels on Google, so I’m hoping somebody can give me a bit of direction.

In a local environment, I’d like to use a bare bones Bourbon Neat theme to create my own custom theme. Normally this would be easy for me, but the addition of SASS and Ruby, and how to integrate with Wordpress are confusing me.

Here’s what I have:
On a Windows 8 machine, I’ve installed Ruby (http://rubyinstaller.org/)

I have the following code editors installed and available: Aptana, Sublime Text, and Dreamweaver 6. Aptana recognizes SASS syntax, but is not compiling it. I believe I need extensions for Sublime and DW6 to work with SASS.

I have WAMP installed for creating the WP Database.

I’ve installed Koala, Prepros, and Scout. (I’ve been trying LOTs of different tuts on google, hence all the diff software.)

I don’t understand how, or if installing Ruby means I need to change my project directories. Do I create the WP project directory in D:/Wamp/www/… like usual, or does Ruby change this?

I don’t understand the CSS file directory structure. To try to get SASS working, I tried following ALA tutorial (http://alistapart.com/article/getting-started-with-sass) and created a very simple directory like this:


MY_PROJECT/

    index.html

    CSS/

       style.css

       SCSS/

         style.scss 

I wrote some simple SASS inside of style.scss, hit compile, and nothing. I don’t understand, or cant find how style.scss is supposed to get written to style.css for display on index.html. I’ve tried having index.html link directly to style.scss, and still nothing. I cant find anything that says how to link the SCSS to the CSS. Most tutorials I’ve seen just say to create a blank CSS file, then create an SCSS file, and somehow they “magically” compile and work. The magic isn’t working out too well for me…. :frowning:

I understand your pain and it took me a while to comprehend all of the moving parts but it’s definitely doable. Getting a development environment configured can be a real challenge and extremely frustrating b/c all you really want to do is code, not troubleshoot your PC.

I have very little Wordpress experience but plenty using SASS. Ruby really has nothing to do with your web site or project in general. Ruby is what allows SASS and it’s dependencies to run on your system. So don’t concern yourself with Ruby too much. As long as it’s installed, up to date, and running you should be fine. Once you have SASS installed you can use the built in compiler so there really isn’t a need for all other software such as Scout and Koala. From my understanding this type of software is for people who are not comfortable with the command line interface.

If you are comfortable with command line then it’s pretty simple to get started. What you need to do is navigate to your project directory and tell SASS to “watch” all the files in that particular folder. This will allow you to make changes to the .scss files and have SASS automatically compile them to CSS when it notices changes have been made and saved. The www.sass-lang.com site has some really great information on it. I also recommend Level Up Tut’s free SASS tutorials on Youtube. Hopefully this helps you get started!

Directory structure isn’t really crucial. Whatever you are comfortable with will work fine. When you initiate your watch command you will tell SASS where you want corresponding .css files generated. I usually keep my .scss and .css files in their own independent folders on the same level. You will still need a traditional link to the .css file from your html pages.

Once you get up and running make sure you take a look at Compass which is a an open source CSS framework that has lots of useful mixins and other goodies to make your life easier. Compass also has a built in compiler and can/will “watch” a project directory exactly the way SASS does.

SASS is truly a game changer. I wish you the best of luck in getting over the SASS hump!