SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Code:
    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Ö.

  2. #2
    SitePoint Addict Kakarot720's Avatar
    Join Date
    Feb 2001
    Location
    Washington DC
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •