First steps into SASS

Welcome to 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.

Advice:
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:

Incredible huh?

  • 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

Linux
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

Windows
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.

Mac
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:

  1. 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`.
  2. 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:

sass -v

It should return Sass 3.5.4.

Yeeeepee! Good job 🙂

After installation, you need to learn how to compile:

  1. Create your file: “testfile.scss
  2. 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.

3.

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!

HAPPY CODING!💻

www.cristinamoreno.dev

--

--

--

After noticing that the relationship between designers and developers is a struggle, I decided to shift gears and try developing end user interfaces by myself.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

GRPC and Protobuf(Proto

Door Number Three

Try out the Apollo Server 2.0 beta!

When life gives you lemons…

DevOps, or Dev vs Ops

Hosting your website in AWS for cheap with S3, Cloudfront and Route 53

Data migration: Strategy and Best Practices

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cristina Moreno Medran

Cristina Moreno Medran

After noticing that the relationship between designers and developers is a struggle, I decided to shift gears and try developing end user interfaces by myself.

More from Medium

SCSS mixins for reusable media query and scoping styles

Design Exercise: AirBnb Website Clone

Accessibility Tips, Tricks, and Resources for Web Devs

This image shows a wheelchair user at a computer.

css reset vs normalize.css