Scss Usage

For this example lets assume you have 3 CSS files in your project.

main.css
navigation.css
typography.css

After running the qs configure we now have

application.scss
main.css
navigation.css
typography.css

Rename all your css files to have a .scss extension

application.scss
main.scss
navigation.scss
typography.scss

Then edit your application.scss similarly to below.

@import "main";
@import "navigation";
@import "typography";

When compiled this will create one application.css.liquid file containing all your merged css styles. Now we just need to include this in our theme.liquid file.

<!doctype html>
<head>
  <!-- application.css is recompiled and uploaded anytime you change ANY .scss file in your project. -->
  {{ 'application.css' | asset_url | stylesheet_tag }}

  {{content_for_header}}
</head>

After that you can use all the benefits of SCSS! For more information on what you can do check out the Sass documentation