First steps into SASS
Last week, after an interview I was asked to go through a test to prove my skills. It had to be done using React… which was completely unknown for me! So I decided to take the bull by the horns and try React and SASS at the same time!
The experiment was really worth the effort! I discovered that SASS is a super good way to organise your CSS and on top of that, the website comes with all the information a newbie needs to know and the transition is more than easy.
WHAT YOU NEED TO KNOW:
1. Sass stylesheets end with “.scss” instead of the more familiar “.css”.
2. Browsers CANNOT read sass or scss… We are going to write in sass and we need to compile it into css so browsers can read it.
3. You just need to install sass in your machine and start typing.
4. Writing lines and browser not doing anything? watch out, there might be a reason why your compiler stopped. A typo maybe? Or perhaps you didn’t tell the compiler to compile and watch.
5. If your compiler is compiling and listening but you cannot see any changes, maybe you’re not selecting the element correctly, go check the css.
If you work on VSCode, there’s an awesome extension called: Live Sass Compiler that can listen and compile all of your SASS stylesheets simply by hitting a button.
The first advice is to visit their website and read through all the documentation (not a lot). I couldn’t test all of the features but I had the pleasure to work with some of them and trust me, it really takes your CSS to a complete new level.
The first amazing thing:
- It lets you nest styles, so it’s easier to be more specific. Let me show you:
- It lets you base your styles on variables, so it’s never gonna be a pain in the ass to repeat a “font-family” over and over.
It allows you to import as many stylesheets as you want!
Installation and use
If you’re using a distribution of Linux, you’ll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm. You will also need the build-essential package, available through a package manager as well.
sudo gem install sass --no-user-install
Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It’s a single-click installer that will get everything set up for you super fast. The installer will also install a Ruby command-line PowerShell application that will let you use the Ruby libraries.
If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you’re using a Mac, congratulations, Ruby comes pre-installed. Install Sass
Here’s the quickest way we’ve found to start using Sass by using the command line:
- Open your Terminal or Command Prompt. On the Mac, the Terminal.app comes installed by default. It’s located in your “Utilities” folder. On Windows, run `cmd`.
- Install Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:
gem install sass
This will install Sass and any dependencies for you. It’s pretty magical. If you get an error message then it’s likely you will need to use the
sudo command to install the Sass gem. It would look like:
sudo gem install sass
Double-check. You should now have Sass installed, but it never hurts to double-check. In your terminal application you can type:
It should return
Yeeeepee! Good job 🙂
After installation, you need to learn how to compile:
- Create your file: “testfile.scss”
- Navigate to your file using the terminal
sass testfile.scss testfile.css
This is going to create the file that the browser DOES understand. But, SASS IS NOT LISTENING YET, it’s not compiling.
sass --watch testfile.scss testfile.css
NOW IT SHOULD BE COMPILING AND SHOWING CHANGES IN THE BROWSER!
Steps 2 and 3 can be automatically done using the VSC extension I mentioned above on this post (Live Sass Compiler). It’s not much work but it can become messy if you’re working with several stylesheets, this extension creates and compiles all of your “.scss” files for you. The only thing you have to do after the installation is hitting the button: “Watch sass” at the bottom right of your editor.
I hope this clarifies all your questions, don’t hesitate to ask anything below.
Time for more practice! There are other features that SASS can offer such as mixins, inheritance and so on. Go to: https://sass-lang.com and enjoy!