Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Converting Sass To CSS

    Emma WedekindEmma Wedekind
    cssCSS
    scssSCSS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss