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
Amber Hoddinott
6,494 PointsIde like to check im using Sass correctly and my understanding is correct...
Hi i have been following the tutorials on how to set up sass with my current projects and basically i would like check that my understanding is correct and i have a couple of questions which i would like to ask.
First i set up currently css into scss files using the javascript code (gulpfile.json) to watch my project... which is working fine, how ever when i have tried to change the code in my now .scss files into sass, for example change my css code and use nesting, its coming up with errors in the command line that my css in invalid. Does this mean that when you use this why of compiling my css file (now .scss files) aren't able to have changes made to them?
secondly i have also with a separate project used the commandline command:
sass --watch .
on my applications.scss file so that it will create a applications.css file thats compiling all my .scss files this way, this is also working fine, my only problem with this is that its creating the applicstions.css file in the some folder as my appllications.scss file.... i would like it to be in my css folder so that it can be outputted correctly.
i hope this all makes sense... and i hope that someones not reading this and think that i am completely confused and not doing any of this right... and advise help answers, will be very much appreciated.
one more thing, if i am doing this correctly, is it right to use the
sass --watch .
command on the applications folder rather than putting code in the gulpfile.json file?
thanks in advance :D Amber
4 Answers
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 PointsOkay. Let's start with just using sass and ignoring gulp for the moment. The way sass works is that you code a .scss and use "sass --watch" to compile the sass file into a .css file. Your html file should link to the .css as usual.
By default "sass --watch" takes the .scss file and creates a .css file with the same name in the same directory as the .scss file. If you want to create the .css file elsewhere you can specify it. For example let's say you have a folder called css where you keep your css files and a folder called sass where you keep your sass files. From the root directory you could type:
```sass --watch sass/style.scss:css/style.css
The --watch command takes two arguments here, the first is the sass file to watch and the second is css the file to create, separated by the : character
Now here is the important thing. You should not change the .css file because any changes you make there will be overwritten when you run the "sass --watch" command
I'm a bit confused by what you mean here:
> when i have tried to change the code in my now .scss files into sass, for example change my css code and use nesting, its coming up with errors in the command line that my css in invalid. Does this mean that when you use this why of compiling my css file (now .scss files) aren't able to have changes made to them?
It sounds as if you are trying to change the css file? If so see my comment above and avoid changing the css file if it's being generated by sass.
Regarding gulp, if you are just doing sass conversions stick with using the sass command for now. Gulp does sass, but it also does a lot of other things like minifying JavaScript and converting CoffeeScript which you may not need just yet.
Sass is a bit complex to begin with but some good courses include: https://teamtreehouse.com/library/css-to-sass to start with and https://teamtreehouse.com/library/sass-basics the later is by Hampton Catlin who is the creator of sass and hence really knows his stuff! The former video may be a little easier however.
Amber Hoddinott
6,494 PointsFirstly thank you so much for taking the time to reply to my question, you have helped me so much, i just followed your instructions on how to change the location in which my compiled sass is created and it has worked perfectly!! so thank you!! The second part of my question, i have now worked out was was because i wasn't nesting correctly... so as always it wasn't working because i was doing it right ;) still learning!!! ha ha !!
i am going to follow your advise and keep using the command line rather than gulp, i have be excepted to do some work experience with a web design and development company in feb so i will ask them some advise then, right now the command line seems to be working well! :D its just going to be annoying when i want to add and commit changes to my git-hub account.
thank you for your help, im still learning how sass can works with my project im currently doing so i can in the future be able to use sass right from the start, im learning at the moment by changing my current css into sass. i have watched some of the videos but your right it wouldnt hurt to go back over some of them... think some of the informations gotten alittle lost in my mind :-P
Amber
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 PointsThat's cool, I'd suggest just taking things one step at a time to avoid getting confused. Going straight into everything at once can be a bit much :D
Amber Hoddinott
6,494 Pointsi agree.. just be a font end web developer has been my dream and i get frustrated and feel like im not doing well enough. i can see the light though, your right one day at a time. i have other questions... might be silly question.
when your compiling your .scss files into the css is it nesting any css in my .scss files code that i havent nested myself, and if so why would i need to nest my code when im writing it if when its being compiled to already doing it for me. I miight be wrong in thinking its doing this, it hard to tell as ive been though my code and nested things now. :D
Amber Hoddinott
6,494 Pointsand is it normal to spend 20mins trying to work out why something isnt working , to then see that its because you have missed a } somewhere or youve put a random letter in the middle of your code so its messed it all up, i get so cross with myself when i see that ive done something like this ;)