Converting Sass To CSS
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.