Getting started with Sass and Compass So your friend, co-worker, web-buddy or whomever told you about Sass, Compass or both. In this beginner guide we take you through the first steps of getting started with Sass and Compass. We walk you through installation, creating a test project, compiling your first lines of Sass to CSS, and we even 'mixin' a little Sass history. Install Sass and Compass Sass and Compass get installed as Ruby gems so you'll need to have Ruby on your machine. If you're on Windows, you can run the. On Linux, provides several Ruby essentials. On OS X, Ruby is already installed by default so Ruby just works. Getting Ruby in place is beyond the scope of this article, so, if you hit any snags hit up if you need help finding the right resources for getting Ruby on your machine. Install Sass Ok, let's install Sass! How to Install Sass on MacOS with Homebrew. Wade Christensen, 5 months ago 3 min read. How to Install Sass on MacOS with Homebrew. Have you ever. This is a simple video of how to install Sass on an Apple Computer. You do not need to be tech savvy for this install. Simple commands and easily repeatable steps. Open up your and type: Windows. $ sudo gem install compass Fetching: sass-3.1.3.gem (100% ) Fetching: compass-0.11.3.gem (100% ) Successfully installed sass-3.1.3 Successfully installed chunky_png-1.2.0 Successfully installed fssm-0.2.7 Successfully installed compass-0.11.3 4 gems installed If that's not what you saw when you ran that command, you may not have Ruby or Ruby Gems on your machine. Covering this in detail is a bit beyond where I want to go in this post, so seek help at if you encounter any issues. If you are intimidated by, don't be. Has written an awesome guide titled,, that should get you up to speed on the subject. Also, there are 2 GUI apps for Sass/Compass, but we'll be assuming command-line usage for this guide. • (cross-platform) from • (Windows/Linux/Mac OS X) from Handlino. CSS Parser I also like to install to take advantage of all the features of compass stats which outputs statistics of my Sass stylesheets. It outputs a report that gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-stylesheets. Run this command to install css_parser. Git clone But that would completely defeat the purpose of learning how to do this on your own. Change directory () into the newly created /sass-test directory and open it up in your favorite editor. I use, but I've been contemplating trying out. We've covered Vim quite a bit on The Changelog, so take a peek at and dig in. Compile Sass to CSS This is the easiest part. Sass and Compass does all the hard work, so run this command and let Compass do its thing. $ sass-test git: (master ) compass watch FSSM -> An optimized backend is available for this platform! FSSM -> gem install rb-fsevent >>> Compass is polling for changes. Press Ctrl-C to Stop. If that's the case go ahead and let out a loud 'yee' and pat yourself on the back because you are now ready to start writing your CSS The Sass Way! The compass watch command does exactly what you would think it would do – it watches your Sass files for changes (saved changes) and automatically compiles your Sass to CSS. How does it know where the Sass is and where the CSS should be compiled to? That's a great question, and one that I'll cover in more detail in a future post titled 'Configuring Compass'. In the meantime, take a look at located in the root of our sass-test project. The is essentially the brain of Compass and defines a number of variables letting Compass know where your Sass, CSS, images and JavaScript files are located, what extensions to require, what syntax you prefer, the output style and much more. Write some Sass Ok, before we actually write some Sass, it's important to know that Sass has some history to it. In fact, one of the hardest things to grasp is that Sass actually has two – and that's often what either confuses or intimidates people and deters them from even giving it a try. How do I know? Because that's exactly how I felt BEFORE I bit the bullet and took the proverbial plunge. But let's not get off track here. Sass is like CSS. Ok, that's misleading. Sass CAN BE like CSS. I mentioned that Sass has some history to it and actually has not one, but two syntaxes. One of the syntaxes is even named 'Sass' which adds even more confusion to the mix. The main syntax is referred to as 'SCSS' (for 'Sassy CSS') and is new as of Sass 3. The older syntax (part of that history I mentioned) is referred to as the indented syntax (or just 'Sass').
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2019
Categories |