You are the Robin hood for us poor people. Instead of buying reference books worth hundred's of dollars, we just simply watch your videos. You deserve more exposure.
Yes, Derek Banas is a super hero for people like me, who find reading an article little tedious as compare to watching a detailed video. Thanks a ton Derek.
this is going to be weirdest coincidence. I was just told by my company to make a project using SASS for FedEx day. And here you are, teaching me the basics right away. Thank you so much Darek. This surely helped.
Whenever I Google an obscure programming language and I find a Derek Banas tutorial I immediately think "YES!" and kind of shake my fist in the air! Of course it's always good to watch other peoples long drawn out tutorials too, to learn some of the intricacies of a language, but these are the best and quickest way to get a good overview of a language, and also a great reference when you've forgotten a keyword or syntax.
I started learning SASS and Compass from the guy who is currently mentoring me. I know a lot of what this tutorial is talking about, I just didn't realize how much of it was SASS specific. This tutorial still managed to teach me a couple of new things about using SASS and Compass outside of a Rails project. Awesome tutorial as always. I do think SASS syntax is a lot more reader friendly once you understand the indentation and nesting. Seeing all those opening and closing tags hurt my eyes ^_^
Dude I followed you because I'm interested in learning programming a year ago, and now that I've dived in to js css jquery etc your video really helped me learn quickly! Thank you for making the learn (anything) in 1 video series!
Guys, if you get to a point where you don't understand something in this video: - just pause the video - wait a few seconds - think about that thing - let your brain digest the information - you can also go back a few secs and hear that again
Thanks for this amazing tutorial! I've always just edited CSS files within frameworks manually simply because hearing the word "Sass" and "Compass" always put me off on how boring it would be, learning a new language just to work with CSS. But having seen all the things you could do by writing little code has helped so much. Switched over to Sass now. That sprites things had me smiling through the whole segment! I should have started using Sass sooner. Thanks again Derek!
Thanks Derek..that's wonderful tutorial..covered so many concepts in short video..much appreciated..please keep positing such videos..really helped me a lot!!!
I'm just going to wait until you produce a video to learn something. I'm done. lol. I have needed to learn SASS and get better with CSS for A LONG time now but just haven't wanted to. But I know what to expect on these videos. Concise, to the point, and understandable. I started using Foundation 5 in one of my Rails projects and it's not as "plug and play" as Bootstrap there are many times when you need to customize your solution. Thanks again.
Hey Derek! Great tutorial mi amigo! I watched a few other Sass tutorials and have been working on trying to learn Sass for the past 48 hours and the second I clicked your video and heard your voice I knew your upbeat rapidity would be exactly what I needed! The only problem for me was that my browser couldn't load the step at 14:33 and the compiler told me that it was because "No files were found in the load path matching "icons/*.png". Your current load paths are: /Users/user/test-1/images)". Its said that whenever i saved styles.scss around the 14:33 mark. The good news is (and most important of all) I was able to understand Sass and finally compile some awesome SCSS that i found on codepen.io thanks to your tutelage so cheers for that!! Sass is awesome :D and so is this channel!!
There is now a usecase for the grayscale function. It is mourning period in Thailand and many sites have gone over to black and white for the full site. I mean ALL text AND images. Doing that with the flip of a switch(tag) would be really nice.
Thank you Derek! Small question near the end of the video: You wrote in .clock { @include icons-sprite(clock;} four times. Did you mean to include to change each of those to the respective icons (aka diary, weather, printer)? Not sure on how that works. Thanks!
Really nice tutorial as usual Derek. My only thing was maybe have it separated, (SASS/Compass).. this way it is just a little overwhelming to differentiate both.
I have a doubt about the way the scss file extension has to be saved. It´s correct to simple saved it as "Plain text"? It works the same if I saved it as css extension? Thanks. (That happen in aprox 11:00 min)
+derek banas Silly question for you: Does $almond have to be in the same file as where it is used or could I have a _sass.sass file with just $almond in it and then use it in another sass file? nevermind my sass listener does not like importing.
LizardanNet Thank you :) I basically use my Mac as a Linux machine. When I upgraded previously my development system was messed up. Since I don't care about most of the upgrades I decided to stay where I was.
Figured it out: from the styles.scss source code copied, i commented out all sections below "// Spriting with Compass" and now style.css is receiving appropriate styling from .scss file. phew!
Thank you very much Derek. I really like your videos and how you teach all in one video. If possible can you make a tutorial about how to use require.js?
Hi Derek i really learn a lot from your videos. I noticed that when using sass @ extend to add values the text shadow can't be applied through css but can be through jquery--interesting.
So many languages, I envy you. I think instead of teaching a particular language, teaching a concept of some sort would be useful, too. Like if one would understand that, one would be able to get into every language. Although this would be a lot harder than just one language. Hope that makes sense. Anyway thank you, as always. Love it!
BuckstarrZ I think I have done a bad job of explaining how I learned all of this stuff. Normally I break everything down into a cheat sheet that I refer to. Then I naturally learn it through reuse. I did my best to provide those cheat sheets on my site, but I need to improve them.
Derek Banas no please, it wasn't meant as criticism or anything. You are doing as well as anybody could. I just meant it's hard to learn all these languages as long as one lacks a basic understanding of the concept of programming and object orientation itself. If that makes any sense ^^ I would be happy to see some general thoughts about how to approach a new language or that sort of thing.
BuckstarrZ I was just thinking out loud about how I want to improve. I didn't take offense to your comment. I think I already covered what you want. Look at my Object Oriented Design and UML tutorials. They should help explain how to turn problems into finished code. I hope they help.
Hey Derek Banas I've been watching your videos for a few months now, and its helped me with coding studies. Can you start a series about the Windows Command-Line-Interface, and maybe Linux as well?????? :)
+Derek Banas setting things up with Windows with all the tools (gulp, yeomen, scss, rails,etc) would be nice. I have things perfectly setup on my Linux machine but even after months of fiddling, I cannot get it to work properly on windows.
I get this sass cache file it has a ton of files associated with it. Is that part of the config files and how it is complied? I am wondering if that just shows up because I am using Brackets? They are not revealed in finder. By the way love the video and after all my searching I can't believe I just found you on You Tube! SUBBED!
should I learn sass if I have no problem with typing the actual colors hex values and the prefixes for every browser and typing out #mydiv:hover { } and I can do it just as fast as with sass? I can also minify my vanilla CSS. If sass is generating minified css why I just write my css and minify it if I can do it fast. Are there any other benefits I'm missing?
I am asking a rather silly question: If a website is designed with sass, how to ensure that any new user browsing that site can view the site without any glitch? Does sass install in his system as well?
I seem to be having an issue with the right nav-bar. Instead of having 4 gray boxes with titles above them i get what looks like a sentence in the top right corner with the words Programming Framework, Laravel, Rails, and Javascript all highlighted gray. Any suggestions?
Thank you, Derek, most of it worked just like in the video and I like it, except that I had to use content: url('../images/featured-image.png') instead of image-url('featured-image.png'). With image-url, the browser was looking for the file in my root directory + images folder (e:/images). Probably some of more recent updates, will try to find out.
I can't seem to get the site to show up, i have all the code, i type in compass watch, i go to localhost/test-1 and it says this webpage is not available. any advice as to the problem.?
vanina dzhuteva Thank you :) If you are on Windows you have to put the whole directory after subl instead of just . You can also launch Sublime Text and then open the directory from inside it.
Lol just kidding its be that lagged i guess RUclips didn't like be streaming all your rails videos and now going on to styling. I started with your html, wordpress layout, code refactoring, Python, alittle bit of php and MySQL. It's overwhelming since so many languages can over lap and be processed inside each other. And programs
i followed exactly all of your tutorials and folder/file placement but my styles.scss doesnt work. I place my scss folder on xampp under htdocs folder. help.
sorry just got back from busy day. there are 2 errors, both of them failed to load resource. that's it sir. im done restarting from the beginning and still got the same error :(
Its in code pen maybe that's why but im having lots of fun with code so thats really cool.another thing i noticed is when i use @mixin with @include,I cant apply j query to it when using codepen.
why so many files ? do we have to create more than 10 files for small project? i did watch this tutorial and i have noticed that we have created files for 10 mins... nice tutorial though.. thank you
stylesheets/styles.css produces errors that i dont understand. i think i has to do with missing folders and files, but you created them afterwards in your video so what is going on. did anyone else have this problem where the refresh doesnt produces a nicer page?
ok i have the styles.scss file exactly like you have it in the exact directory and when i hit reload, the same ugly formatting remains. what is going on?
+alexander shekhtman here are the error messages in my terminal: WARNING: 'featured-image.png' was not found (or cannot be read) in /Users/alexander/Desktop/Derek Banas/SASS/test-1/images error sass/styles.scss (Line 363: No files were found in the load path matching "icons/*.png". Your current load paths are: /Users/alexander/Desktop/Derek Banas/SASS/test-1/images) modified sass/styles.scss error sass/styles.scss (Line 271: Undefined mixin 'border-radius'.) modified sass/styles.scss WARNING: 'featured-image.png' was not found (or cannot be read) in /Users/alexander/Desktop/Derek Banas/SASS/test-1/images error sass/styles.scss (Line 361: No files were found in the load path matching "icons/*.png". Your current load paths are: /Users/alexander/Desktop/Derek Banas/SASS/test-1/images)
FYI: I am running on windows using phpstorm. I needed a directory images/icons with four 64 by 64 images that you can get from here: findicons.com/icon/79556/clock_64?id=333440 findicons.com/icon/79555/diary_64?id=79573 findicons.com/icon/79560/printer_64?id=79578 findicons.com/icon/79552/weather_64?id=79570 the files need to be called: clock.png, diary.png, printer.png weather.png. I copied the file images/icon/clock.png to images/featured-image.png to cover that image. The icons didn't appear so in the config.rb had to uncomment: relative_assets = true then restarted compass watch to reread the config.rb file. now the Icons appear.
All was going well until adding the styles.scss from www.newthinktank.com/2015/04/sass-video-tutorial/ at 14:30 in the video. This wrote error messages to the styles.css file and produced the following output above the stripped html in the browser. Browsed through the comments and did not see others with this problem. Tried 3 versions of the _normalize.scss file. Error: No sprite called clock found in sprite map icons/icons. Did you mean one of: featured-image on line 18 of C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss, in `sprite-background-position' from line 38 of C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss, in `sprite' from line 79 of icons/*.png, in `icons-sprite' from line 370 of E:/sandbox/test1/sass/styles.scss Some of the errors are coming from @import statements such as... .icons { .clock { @include icons-sprite(clock);} // *** This is line 370 in styles.scss .diary { @include icons-sprite(diary);} .printer { @include icons-sprite(printer);} .weather { @include icons-sprite(weather);} } A partial list of ruby error messages generated in the styles.css file are in the form of... Backtrace: C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss:18:in `sprite-background-position' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss:38:in `sprite' icons/*.png:79:in `icons-sprite' E:/sandbox/test1/sass/styles.scss:370 C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-1.0.3/lib/compass/sass_extensions/functions/sprites.rb:298:in `missing_image!' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-1.0.3/lib/compass/sass_extensions/functions/sprites.rb:223:in `sprite_position' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/script/tree/funcall.rb:143:in `_perform' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/script/tree/node.rb:58:in `perform' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:397:in `visit_prop' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/base.rb:36:in `visit' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `block in visit' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `block in with_base' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:115:in `with_frame' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `with_base' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `visit' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (4 levels) in visit_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `map' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (3 levels) in visit_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:181:in `with_environment' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (2 levels) in visit_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:84:in `perform_arguments' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:361:in `block in visit_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:98:in `block in with_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:115:in `with_frame' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:98:in `with_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:349:in `visit_mixin' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/base.rb:36:in `visit' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `block in visit' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `block in with_base' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:115:in `with_frame' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `with_base' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `visit' C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (4 levels) in visit_mixin'
You are the Robin hood for us poor people. Instead of buying reference books worth hundred's of dollars, we just simply watch your videos. You deserve more exposure.
Thank you for the compliment :) Yes my goal is to provide a free education for all!
Yes, Derek Banas is a super hero for people like me, who find reading an article little tedious as compare to watching a detailed video. Thanks a ton Derek.
I agree with you ... Just so enjoyable to watch
this is going to be weirdest coincidence. I was just told by my company to make a project using SASS for FedEx day. And here you are, teaching me the basics right away. Thank you so much Darek. This surely helped.
Alek Modi That is awesome :) They'll probably want to see Susy as well. I'll get that up as soon as possible.
Whenever I Google an obscure programming language and I find a Derek Banas tutorial I immediately think "YES!" and kind of shake my fist in the air! Of course it's always good to watch other peoples long drawn out tutorials too, to learn some of the intricacies of a language, but these are the best and quickest way to get a good overview of a language, and also a great reference when you've forgotten a keyword or syntax.
Thank you for the nice compliment :)
I started learning SASS and Compass from the guy who is currently mentoring me. I know a lot of what this tutorial is talking about, I just didn't realize how much of it was SASS specific.
This tutorial still managed to teach me a couple of new things about using SASS and Compass outside of a Rails project. Awesome tutorial as always.
I do think SASS syntax is a lot more reader friendly once you understand the indentation and nesting.
Seeing all those opening and closing tags hurt my eyes ^_^
+Marik 444 Thank you :) I'm very happy that I could help. Yes Sass is great and I have no idea why more people don't use it.
Derek Banas is the best presenter of coding lessons.
Thank you for the nice compliment :)
Dude I followed you because I'm interested in learning programming a year ago,
and now that I've dived in to js css jquery etc your video really helped me learn quickly!
Thank you for making the learn (anything) in 1 video series!
Thank you :) I'm very happy that you like them
Guys, if you get to a point where you don't understand something in this video:
- just pause the video
- wait a few seconds
- think about that thing
- let your brain digest the information
- you can also go back a few secs and hear that again
Thank you for helping others :)
Seriously, your tutorials are the absolute best on the web! I love the fast, understandable content! Thanks
+Scott Koons Thank you for the nice compliment :)
Thanks for this amazing tutorial!
I've always just edited CSS files within frameworks manually simply because hearing the word "Sass" and "Compass" always put me off on how boring it would be, learning a new language just to work with CSS.
But having seen all the things you could do by writing little code has helped so much. Switched over to Sass now.
That sprites things had me smiling through the whole segment! I should have started using Sass sooner.
Thanks again Derek!
You're very welcome :) I'm very happy I was able to help you out
Ty! This is why I tell so many people about your tutorials. I just learned SASS and Compass :)
Thank you very much for telling others :)
Derek, you're obviously a robot. Thank you for all of the awesome videos!
oopserv316 That's funny :) You're very welcome
Thanks Derek..that's wonderful tutorial..covered so many concepts in short video..much appreciated..please keep positing such videos..really helped me a lot!!!
Thank you very much :)
All of your videos are to the point which is awesome. I am regular visitor of your outstanding videos. Thanks for sharing.
+biswajit sarkar Thank you :) You're very welcome
Thank you for the tutorials. They're the best I've seen; they've helped immensely.
you have like the best video tutorials on you tube, but for real... well done. and thank you .
Thank you very much :)
I'm just going to wait until you produce a video to learn something. I'm done. lol. I have needed to learn SASS and get better with CSS for A LONG time now but just haven't wanted to. But I know what to expect on these videos. Concise, to the point, and understandable. I started using Foundation 5 in one of my Rails projects and it's not as "plug and play" as Bootstrap there are many times when you need to customize your solution. Thanks again.
Derek Pauley Thank you for the nice compliment :) Check out Susy for creating grids, or just wait a few days and I'll upload my Susy tutorial :D
Nice never heard of it. :)
Derek Pauley It is super awesome! Way better then Bootstrap in my opinion.
I just finished the previous Rails videos a few hours ago, perfect timing ; thanks! :)
Hyllis I'll finish up Rails in the next week. I'll cover susy and haml as well.
Hey Derek! Great tutorial mi amigo! I watched a few other Sass tutorials and have been working on trying to learn Sass for the past 48 hours and the second I clicked your video and heard your voice I knew your upbeat rapidity would be exactly what I needed! The only problem for me was that my browser couldn't load the step at 14:33 and the compiler told me that it was because "No files were found in the load path matching "icons/*.png". Your current load paths are: /Users/user/test-1/images)". Its said that whenever i saved styles.scss around the 14:33 mark. The good news is (and most important of all) I was able to understand Sass and finally compile some awesome SCSS that i found on codepen.io thanks to your tutelage so cheers for that!! Sass is awesome :D and so is this channel!!
+Ron crenshaw Thank you for all the nice compliments :) Thank you as well for posting your fix.
Very intuitive and engaging. You are a amazing comunicator
Calo Man Thank you for the very nice compliments :)
Again, thank you for these amazing well explained tutorials, Derek!
You're welcome :) Thank you
I found the last section of your video very useful and informative !
Thank you :)
Ayo Salute camera dude is a beast and this songs hot
Derek, great video! I have to say I loved the spritesheet creation the most! So easy this way!
wjrasmussen666 Thank you :) I'm glad it helped
Pretty awesome. Will eventually look into using this.
+zaigex Thank you :)
Hey Derek, awesome Tutorial. Never before learned that much in 45 minutes :)... Thx alot
+Cristofo Vilares Thank you :) I'm very happy that it helped
I love all your videos guy!!! y´re awesome to explain things!!! keep improving man and thanks for all tutorial you have done...
New to SaSS....Loved the video! Thanku!
Thank you :) You're very welcome
Hey dude, thank you for the tutorials, man. I appreciate it, so does everybody else watching them :P
H. Pavlovic You're very welcome :)
Derek Banas And you actually interact with your sub-base.. Glad to have subscribed :)
Thanks for this video, very helpful indeed.
Sass is a nice closet for CSS!!!!
I'm happy you liked it :)
i thought this was a beginner tutorial.. lmfao u rush through it man
Thanks for the great tutorial. Looking forward to checking out the rest of your tutorials. Subbed!
Thank you very much :)
Again...well done, Derek.
Just glad i've been pronouncing this correctly.
I mispronounce things all of the time because I'm mainly a book learner :)
Quick, and tons of useful tips, thanks.
Thank you :)
There is now a usecase for the grayscale function. It is mourning period in Thailand and many sites have gone over to black and white for the full site. I mean ALL text AND images. Doing that with the flip of a switch(tag) would be really nice.
Thank you Derek! Small question near the end of the video: You wrote in .clock { @include icons-sprite(clock;} four times. Did you mean to include to change each of those to the respective icons (aka diary, weather, printer)? Not sure on how that works. Thanks!
Thanks Derek for all your help - very much appreciated
I'm very happy to be able to help :)
Wow, nested Css and Variables shouöd be default in CSS! This is amazing!
Really nice tutorial as usual Derek. My only thing was maybe have it separated, (SASS/Compass).. this way it is just a little overwhelming to differentiate both.
+Rizwan Shafiq Thank you :) Sorry for pushing to much into one tutorial. I learned my lesson and I'm breaking my NodeJS tutorials up now.
Derek, thank you very much for the tutorial.
Georgi Georgiev You're very welcome :)
Hi there. Thanks for a great start on sass.
+Jim Melby You're very welcome :)
Derek ,Thank you very much, learn a lot form this video.
+Peng Mark Gang You're very welcome :)
I wish I learned SASS earlier, but it's never to late to start. :)
I agree 100%
I have a doubt about the way the scss file extension has to be saved. It´s correct to simple saved it as "Plain text"? It works the same if I saved it as css extension? Thanks. (That happen in aprox 11:00 min)
Love This Tutorial Really Helped Thanks!
Thank you :) I'm glad I could help
Lorenzo Iannuzzi dsx
I like how this was made five years ago-
This tutorial is awesome!!! Thank you very much!
Thank you :)
Derek Banas SASS tutorial: 45 minutes
Derek Banas Java tutorial: 30 minutes
Explain this madness!
In the case of Sass I think I basically covered almost everything. With Java I cover the core language, which is definitely not everything
lmao
Great job, as usual! Thank you.
Thomas Connolly Thank you :)
so basically to sum up sass: you have to input css one time on the site and then scss lets you pick it up throughout the whole website?
You're awesome, I was just trying to figure this out :)
Kyle Aisho Thank you :) I'm glad I could help
+derek banas Silly question for you: Does $almond have to be in the same file as where it is used or could I have a _sass.sass file with just $almond in it and then use it in another sass file? nevermind my sass listener does not like importing.
man, you're simply amazing, thanks again
Santiago R Thank you for the nice compliment :)
Just for in case, I notice that your video is published in 2015. Is there any recent changes to scss or anything that I should be aware of?
Thanks for this awesome tutorial, derek! (y)
+Nerdberry Thank you very much :)
Awesome video. Thanks.
Why haven't you updated your computer to Yosemite? .. just curious.
LizardanNet Thank you :) I basically use my Mac as a Linux machine. When I upgraded previously my development system was messed up. Since I don't care about most of the upgrades I decided to stay where I was.
So useful, thanks for sharing.
+Luc SCHEITLE Thank you :) You're very welcome
at 14:25, i'm adding to styles.scss yet my index.html did not change. The only CL error i'm getting is missing images in directory. anyone know why?
Figured it out: from the styles.scss source code copied, i commented out all sections below "// Spriting with Compass" and now style.css is receiving appropriate styling from .scss file. phew!
This video has a ton of sass
GiansCode That's funny :)
THANKS! This is so helpful!
Omar Christian Palco I'm very happy that I could help :)
omfg this is so old. but I need it for maintaining an old project
The link to Normalize SCSS File in the description is dead
+dasten123 github.com/npmcomponent/JohnAlbin-normalize-scss
+dasten123 github.com/npmcomponent/JohnAlbin-normalize-scss/blob/master/_normalize.scss
Thank you very much Derek. I really like your videos and how you teach all in one video. If possible can you make a tutorial about how to use require.js?
Ömer KARAGÖZ You're very welcome :) I'm glad you like the big videos. Sure I can cover that and much more when I cover NodeJS
Brilliant! Thank you so much for this video.
Thank you very much :)
Hi Derek i really learn a lot from your videos. I noticed that when using sass @ extend to add values the text shadow can't be applied through css but can be through jquery--interesting.
That is interesting I'll take a look
Beautiful video good sir. Thank you!
Thank you very much :)
So many languages, I envy you. I think instead of teaching a particular language, teaching a concept of some sort would be useful, too. Like if one would understand that, one would be able to get into every language. Although this would be a lot harder than just one language. Hope that makes sense. Anyway thank you, as always. Love it!
BuckstarrZ I think I have done a bad job of explaining how I learned all of this stuff. Normally I break everything down into a cheat sheet that I refer to. Then I naturally learn it through reuse. I did my best to provide those cheat sheets on my site, but I need to improve them.
Derek Banas no please, it wasn't meant as criticism or anything. You are doing as well as anybody could. I just meant it's hard to learn all these languages as long as one lacks a basic understanding of the concept of programming and object orientation itself. If that makes any sense ^^ I would be happy to see some general thoughts about how to approach a new language or that sort of thing.
BuckstarrZ I was just thinking out loud about how I want to improve. I didn't take offense to your comment. I think I already covered what you want. Look at my Object Oriented Design and UML tutorials. They should help explain how to turn problems into finished code. I hope they help.
Omg I thought you were talking about sass like snapping fingers and stuff XD
He is... :)
PuppySlime likewise
HELP!! Where do I insert the semicolon when roasting people?!
Is normalize still needed today or is that out of date?
Thanks Derek Banas ... Its very helpful. Where can I have more detailed stuff regarding Sass?? Thanks
Ashim Bera Your welcome :) I covered a lot here and I will cover Susy in the next tutorial. The Sass site has a lot of good info.
Hey Derek Banas I've been watching your videos for a few months now, and its helped me with coding studies.
Can you start a series about the Windows Command-Line-Interface, and maybe Linux as well?????? :)
Joseph Gordon I can definitely do that with Linux and plan to very soon. I'll see what I can come up with with Windows.
Derek Banas Thank You Derek, Much Appreciated :)
+Derek Banas setting things up with Windows with all the tools (gulp, yeomen, scss, rails,etc) would be nice. I have things perfectly setup on my Linux machine but even after months of fiddling, I cannot get it to work properly on windows.
I get this sass cache file it has a ton of files associated with it. Is that part of the config files and how it is complied? I am wondering if that just shows up because I am using Brackets? They are not revealed in finder. By the way love the video and after all my searching I can't believe I just found you on You Tube! SUBBED!
Thank you and I enjoyed these "learn in one" videos. Can you please also do a tutorial on Bootstrap?
Daocun Yang Your welcome :) I'll cover Susy next which many consider an improvement over Bootstrap, but I can make a video on it as well.
should I learn sass if I have no problem with typing the actual colors hex values and the prefixes for every browser and typing out #mydiv:hover { } and I can do it just as fast as with sass? I can also minify my vanilla CSS. If sass is generating minified css why I just write my css and minify it if I can do it fast. Are there any other benefits I'm missing?
I am asking a rather silly question: If a website is designed with sass, how to ensure that any new user browsing that site can view the site without any glitch? Does sass install in his system as well?
kumropotashify Sass generates the CSS on your server
I seem to be having an issue with the right nav-bar. Instead of having 4 gray boxes with titles above them i get what looks like a sentence in the top right corner with the words Programming Framework, Laravel, Rails, and Javascript all highlighted gray. Any suggestions?
Great tutorial :)
Thank you :)
Thanks for the great tutorial....
You're very welcome :)
Normalize SCSS File: github.com/JohnAlbin/normalize-scss
Thank you, Derek, most of it worked just like in the video and I like it, except that I had to use content: url('../images/featured-image.png') instead of image-url('featured-image.png'). With image-url, the browser was looking for the file in my root directory + images folder (e:/images). Probably some of more recent updates, will try to find out.
Thank you for taking the time to help others :)
I had to import the mixins in my "_base.scss" file, in order to use them. Is that normal? You didn't import anything in your base file.
I can't seem to get the site to show up, i have all the code, i type in compass watch, i go to localhost/test-1 and it says this webpage is not available. any advice as to the problem.?
+Adrian Nicholson try clicking on tests-1 and selecting open with google chrome or safari
Hello Derek. Thanks for the video. It was all nice and easy until the cmd didn`t recognize the "subl ." code. Could you help me? Thanks :)
vanina dzhuteva Thank you :) If you are on Windows you have to put the whole directory after subl instead of just . You can also launch Sublime Text and then open the directory from inside it.
Thanks Derek :)
+mohamed nujufas You're very welcome :)
Hey Derek whenever you get a chance the video skips from 18 mins to 22 with audio running but video is either lagging or restarted.
Lol just kidding its be that lagged i guess RUclips didn't like be streaming all your rails videos and now going on to styling. I started with your html, wordpress layout, code refactoring, Python, alittle bit of php and MySQL. It's overwhelming since so many languages can over lap and be processed inside each other. And programs
+Derek Davis Yes YT has been slow lately. I'm glad you are enjoying the videos :)
For Windows do you have an ide besides netbeans I should try and when is nodejs coming out sir?
i followed exactly all of your tutorials and folder/file placement but my styles.scss doesnt work. I place my scss folder on xampp under htdocs folder. help.
It is hard to guess. Do you get any errors?
sorry just got back from busy day. there are 2 errors, both of them failed to load resource. that's it sir. im done restarting from the beginning and still got the same error :(
Images and Javascript folder are missing. When you enter "compass create test-1" the images and javascrips folders are not there.
remember in the video we had to create those manually.
Its in code pen maybe that's why but im having lots of fun with code so thats really cool.another thing i noticed is when i use @mixin with @include,I cant apply j query to it when using codepen.
I thought you were going to teach me how to sass to my parents... darn
J_laubster That should be a natural gift :)
Thanks! Great post.
I've seen that you can also plug SASS in using gulp-sass, wihout Ruby on Rails. What difference does it make?
Hi Derek, Im learning sass. Im w10 user, and im using git for windows. I have ruby and installed compass and sass. what does rvm for? ^_^
+felin Tan Ruby Version Manager It gets all of the Ruby gems for you and makes sure they work well together.
why so many files ? do we have to create more than 10 files for small project? i did watch this tutorial and i have noticed that we have created files for 10 mins...
nice tutorial though..
thank you
+Eone channel You don't need to. I was showing everything you can do with a Sass project and not what you will always do.
+Derek Banas thank you
stylesheets/styles.css produces errors that i dont understand. i think i has to do with missing folders and files, but
you created them afterwards in your video so what is going on.
did anyone else have this problem where the refresh doesnt produces a nicer page?
you were using rails, can I use sass with node.js or some other back end server?
+rmc1579 You can use Sass starting with Bootstrap 4
ok i have the styles.scss file exactly like you have it in the exact directory and when i hit reload, the same ugly formatting remains. what is going on?
+alexander shekhtman here are the error messages in my terminal:
WARNING: 'featured-image.png' was not found (or cannot be read) in /Users/alexander/Desktop/Derek Banas/SASS/test-1/images
error sass/styles.scss (Line 363: No files were found in the load path matching "icons/*.png". Your current load paths are: /Users/alexander/Desktop/Derek Banas/SASS/test-1/images)
modified sass/styles.scss
error sass/styles.scss (Line 271: Undefined mixin 'border-radius'.)
modified sass/styles.scss
WARNING: 'featured-image.png' was not found (or cannot be read) in /Users/alexander/Desktop/Derek Banas/SASS/test-1/images
error sass/styles.scss (Line 361: No files were found in the load path matching "icons/*.png". Your current load paths are: /Users/alexander/Desktop/Derek Banas/SASS/test-1/images)
+alexander shekhtman Create an image named featured-image in the folder and that error will go away.
sorry if this a stupid question but how can we use bash like in the video but on windows?
Search for Cygwin
FYI:
I am running on windows using phpstorm. I needed a directory images/icons with four 64 by 64 images that you can get from here:
findicons.com/icon/79556/clock_64?id=333440
findicons.com/icon/79555/diary_64?id=79573
findicons.com/icon/79560/printer_64?id=79578
findicons.com/icon/79552/weather_64?id=79570
the files need to be called: clock.png, diary.png, printer.png weather.png.
I copied the file images/icon/clock.png to images/featured-image.png to cover that image.
The icons didn't appear so in the config.rb had to uncomment:
relative_assets = true
then restarted compass watch to reread the config.rb file.
now the Icons appear.
wjrasmussen666 thanks a lot! I was going crazy on why that part wasn't working
Did I miss a file for the images? Where am I getting the images? What is the Github link?
Are we supposed to be adding our own images?
All was going well until adding the styles.scss from www.newthinktank.com/2015/04/sass-video-tutorial/ at 14:30 in the video. This wrote error messages to the styles.css file and produced the following output above the stripped html in the browser. Browsed through the comments and did not see others with this problem. Tried 3 versions of the _normalize.scss file.
Error: No sprite called clock found in sprite map icons/icons. Did you mean one of: featured-image
on line 18 of C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss, in `sprite-background-position'
from line 38 of C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss, in `sprite'
from line 79 of icons/*.png, in `icons-sprite'
from line 370 of E:/sandbox/test1/sass/styles.scss
Some of the errors are coming from @import statements such as...
.icons {
.clock { @include icons-sprite(clock);} // *** This is line 370 in styles.scss
.diary { @include icons-sprite(diary);}
.printer { @include icons-sprite(printer);}
.weather { @include icons-sprite(weather);}
}
A partial list of ruby error messages generated in the styles.css file are in the form of...
Backtrace:
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss:18:in `sprite-background-position'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss:38:in `sprite'
icons/*.png:79:in `icons-sprite'
E:/sandbox/test1/sass/styles.scss:370
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-1.0.3/lib/compass/sass_extensions/functions/sprites.rb:298:in `missing_image!'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-1.0.3/lib/compass/sass_extensions/functions/sprites.rb:223:in `sprite_position'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/script/tree/funcall.rb:143:in `_perform'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/script/tree/node.rb:58:in `perform'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:397:in `visit_prop'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/base.rb:36:in `visit'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `block in with_base'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:115:in `with_frame'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `with_base'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `visit'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (4 levels) in visit_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `map'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (3 levels) in visit_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:181:in `with_environment'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (2 levels) in visit_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:84:in `perform_arguments'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:361:in `block in visit_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:98:in `block in with_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:115:in `with_frame'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:98:in `with_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:349:in `visit_mixin'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/base.rb:36:in `visit'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `block in with_base'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:115:in `with_frame'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/stack.rb:79:in `with_base'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:160:in `visit'
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/tree/visitors/perform.rb:366:in `block (4 levels) in visit_mixin'