Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brendan Ferguson
Courses Plus Student 13,821 PointsBonus content - Design and Development: application.sass?
I'm working through the videos in Bonus content - Design and Development. I believe the videos use Rails 3.0, but I'm using the version from the RailsInstaller for Windows, which I think is 3.2.
In the videos, their project has the folder public/stylesheets, but I didn't have that folder, so I just created it. I then followed their instructions to create a sass folder within there, and then an application.sass file in that. Everything seemed to work just fine.
Then, when I went to the Compass page, the directions were different from the videos, but I tried to follow it the best I could. It seemed to work except that now the application.sass file seems to be ignored.
I did some hunting around, and it looks like the newer version of Rails puts the stylesheets in app/assets/stylesheets. In that folder I have:
partials [folder]
application.css
ie.css.sass
jobs.css.scss
print.css.sass
screen.css.sass
I figured maybe I wasn't supposed to put application.sass in the public folder earlier, so I tried moving it to this folder instead, but still my custom styling is gone. I tried putting it in a newly created sass subfolder within there, but that didn't work either.
I rewatched the video where this file was first created and I noticed they said you can put SASS files in layouts/stylesheets/SASS. I don't have such a folder in my project, although I do have an app/views/layouts folder. I tried creating a stylesheets/SASS folder in there and moving the application.sass file there, but that didn't work either.
Then I looked at the files that were there and jobs.css.scss seems to be the file where custom styling for jobs ought to go. I tried putting my custom sass in there, but it had an error, presumably because I'm writing sass and that's an scss file. I tried just changing the extension to sass and that fixed the error, but did not implement my custom styling.
Any idea what I need to do to get my custom styling to work?
Thanks in advance,
Brendan
2 Answers
Alan Johnson
7,625 PointsWith Rails 3 you'll want to put sass files under app/assets/stylesheets/. Then you'll want to update application.css to include them by adding a line like this: (let's pretend the stylesheet's named styles.css.sass)
/* ...
*= require styles
*/
Then you'll load that stylesheet up into your page through Rails with:
<%= stylesheet_link_tag :application %>
Alan Johnson
7,625 PointsOn that application.css including everything issue, you'll want to remove the require_tree line from your application.css file and instead just require those scripts that you want to include.
Brendan Ferguson
Courses Plus Student 13,821 PointsBrendan Ferguson
Courses Plus Student 13,821 PointsThank you Alan. I did all this, but it didn't help. It appears that the problem was due to the fact that application.css automatically included everything in the app/assets/stylesheets/ folder, which included screen.css. Since it occurred alphabetically after sass/application.sass, it overwrote all of my custom styling. It seems like screen.css is probably more appropriately placed in another folder, although just to save time, I simply renamed my sass folder to zsass and that solved the problem! I got stymied later when AuthLogic wouldn't work, so I gave up on trying to follow this project.