We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a leap of faith to reliquish control of stuff like this (I guess no more than using a preprocessor to begin with), but it’s worth it.
Why is using Compass a good idea?
- The @mixins are very well written. They match the spec where they can and are very consistant.
- Compass updates so you’ll stay up to date on current best practices automatically. It will probably do a more comprehensive job of doing that than you can alone.
- It has a bunch of other powerful stuff you can tap into, like spriting (which we won’t get to in this project but is sweet).
CodeKit works great with Compass (it even ships with it). We lose some of the control we had in CodeKit (like controlling file compiling paths directly) but it’s not a big deal. We can still control most stuff from the config.rb file now in our project.
Ultimately we use Compass to @include transitions for the navigation links giving them a softer feel.
why the videos are loading so slow? I mean, I try on different browsers (safari, chrome, firefox) all with the latest version, both on pc and macs, and with 2 different internet providers?
The file sizes for the videos (esp on desktop browsers) are pretty big. Sometimes hundreds of megabytes. They are hosted on Amazon S3 so that should be fairly fast, but of course all this is dependent on your internet connection speed.
If it seems crazy slow, hit me up and [email protected] with any other details you have and we’ll try and figure something out.
I’m going to bury this comment in an attempt to keep the comment threads about the content rather than specific technical issues.
Awesome stuff, Chris.
I’ve been using Codekit for a while since your original video about it, but hadn’t embraced Compass until now and had been making my own mixins. Didn’t realise it was quite as straighforward as that! Starting a new project today and will be using compass from the getgo!
I wrote a bit back using Compass w/Codekit if anyone would like to compliment this video with more additional information using Compass and it’s available plugins. I go through the entire setup from start to finish with screenshots of each step. I’ve also provided a link to the compass plugin repository.
http://blog.grayghostvisuals.com/css/installing-compass
Awesome video mate, I must say since you suggested using Compass it has cut down my development time drastically. The best part, because I work on a PC (cause the company I work for invented them) there is a PC version… YAY!! I highly recommend paying the 10 bucks for it, it is brilliant.
I had been having an issue with CodeKit and Compass and this video just helped me figure it out. Awesome.
You can click on “New Config File” instead of “Install Compass,” and it won’t create all those files that you didn’t need which will overwrite your existing files if you have a file with the same name.
If you already have a project that is set up for Compass, it’s safer to go the other route.
I am using windows and it did not create a config.rb file, so i had to copy the one from your project file and it works.
Chris, I know you’ve discussed CodeKit on CSS-Tricks and obviously use it a lot. It’s really stuck out to me how many problems you have with it while watching these screencasts. Have you mentioned that to the developer? I imagine seeing your screencasts and the issues presented would probably be quite an incentive to fix these bugs.
One of the reasons I signed up for The Lodge was to learn how CodeKit fits into your workflow and whether I should use it over LiveReload. Thanks!
I have been in touch several times with the developer and have made every issue I’ve had be known. (https://twitter.com/bdkjones)
There is even a v2 coming with a lot of sweet stuff, including project refreshes that are much faster (that has come up in these videos a few times). Also, when CSS injection doesn’t work, one major cause apparently is browser extensions interfering. Specifically Adobe Edge Inspect can be a problem one.
OK, that’s great to hear! Thanks!
Another way you can make transitions and changes seem more snappy is to use an ease-out function. Ease-out will slow down near the end of the transition.
You could also use the cubic-bezier function for ultimate control of your transition:
Chris, is Compass still relevent in 2019?
Not really, I’d say. Autoprefixer won the day for that functionality. I forgot what other kind of helper functions Compass has, but I don’t see it used all that much, not to mention I don’t think Compass is maintained anymore. It’s Ruby-only, and Sass has moved away from Ruby.