Converting Sass To CSS

Emma Bostian
InstructorEmma Bostian
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson we'll learn how to convert our Sass code to CSS code. We'll take a look at the sass watch command and use it to listen for changes within our Sass code.

The sass executable can be downloaded globally through npm by running npm i -g sass.

Instructor: [00:00] Here I have my SASS project with three subfolders. The base subfolder which contains element styles, variables we want to use in our SASS code, a home partial which contains all of the styles related to our home component, and a center mix-in which will center an item on a page.

[00:15] All of these partials are imported into index.sass. Finally, we have an index.html template which contains an H1 and image that links to the SASS documentation.

[00:26] Our CSS folder is currently empty, but will eventually contain all of our transpiled SASS code. We can run the sass --watch command to listen for any changes to our SASS code within the SASS folder. This SASS code will then be transpiled down to CSS code and will live inside index.css.

[00:41] When we navigate back to the CSS folder, we can see it contains two files. The index.css contains all of our transpiled SASS code.

[00:50] Now when I make a change to one of the SASS files, we can see that SASS has recompiled it down to SASS. This main-color variable is being used inside of the elements.css partial. Every time we change the main-color variable, it should be reflected in the H1 color.

[01:07] We can also observe this color change as reflected in our index.css file. Now, let's import our index.css file into our HTML template.

[01:16] Since we don't currently link a CSS file, none of our style are appearing in the browser. Let's import our index.css style sheet. When we refresh the page, we can see all of our styles are now being applied.

[01:28] Now let's go back and change our H1 color to blue. We can see in the terminal that SASS has recompiled our SASS code down to CSS. When we refresh the page, we can see that our H1 now has the color of blue.

[01:40] Finally, let's add the sass-watch command to the package.json file. Instead of running this line command, we can simply type npm run sass to achieve the same result.

[01:48] To ensure this works, let's add another property to the H1 element. After saving we can see font-size is reflected in the index.css file. When we refresh the browser, we can see our styles are being applied as expected. That's it, now you know how to compile SASS code down to CSS code.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today